/* =============================================
   MPLUS BANANA — Theme Variables
   Dark / Light Mode
============================================= */

:root,
[data-theme="dark"] {
  --bg-base:        #0D0D12;
  --bg-surface:     #13131A;
  --bg-card:        #1A1A24;
  --bg-hover:       #20202C;
  --bg-sidebar:     #0F0F17;

  --border:         rgba(255, 255, 255, 0.06);
  --border-strong:  rgba(255, 255, 255, 0.12);

  --text-primary:   #F0F0F5;
  --text-secondary: #8888A0;
  --text-muted:     #50506A;

  --accent:         #F5B800;
  --accent-dim:     rgba(245, 184, 0, 0.15);
  --accent-glow:    rgba(245, 184, 0, 0.08);

  --online:         #34D399;
  --offline:        #374151;

  --danger:         #F87171;
  --success:        #34D399;
  --info:           #60A5FA;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;

  --sidebar-w:  220px;
  --topbar-h:   56px;

  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] {
  --bg-base:        #F4F4F8;
  --bg-surface:     #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-hover:       #F0F0F5;
  --bg-sidebar:     #FFFFFF;

  --border:         rgba(0, 0, 0, 0.07);
  --border-strong:  rgba(0, 0, 0, 0.13);

  --text-primary:   #111118;
  --text-secondary: #606075;
  --text-muted:     #A0A0B8;

  --accent:         #D4A000;
  --accent-dim:     rgba(212, 160, 0, 0.12);
  --accent-glow:    rgba(212, 160, 0, 0.06);

  --online:         #059669;
  --offline:        #D1D5DB;

  --danger:         #DC2626;
  --success:        #059669;
  --info:           #2563EB;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
}