/* ==========================================================
 * NEXUS ADMIN — DESIGN TOKENS
 * ========================================================== */

:root {
  /* Brand palette */
  --accent:        #5B6EF5;
  --accent-dark:   #4254D4;
  --accent-light:  #EEF0FE;
  --accent-glow:   rgba(91,110,245,.20);
  --teal:          #00C9A7;
  --teal-light:    #E6FAF7;
  --rose:          #F5476E;
  --rose-light:    #FEE8ED;
  --amber:         #F5A623;
  --amber-light:   #FEF5E6;
  --purple:        #8B7CF6;
  --purple-light:  #F0EEFF;

  /* Layout */
  --sidebar-w:    260px;
  --sidebar-col:  72px;
  --header-h:     64px;

  /* Radii */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* Motion */
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast:  .12s;
  --t-base:  .20s;
  --t-slow:  .35s;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.06);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.08);
  --shadow-accent: 0 4px 20px rgba(91,110,245,.32);

  /* Z-index scale */
  --z-sidebar:  100;
  --z-header:    90;
  --z-dropdown: 200;
  --z-modal:    300;
  --z-toast:    400;
  --z-loader:   500;
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:          #F5F6FA;
  --bg-alt:      #ECEEF5;
  --surface:     #FFFFFF;
  --surface-2:   #F8F9FC;
  --surface-3:   #F0F2F8;
  --border:      #E4E7F0;
  --border-2:    #D0D5E8;
  --hover:       rgba(0,0,0,.04);

  --text:   #111827;
  --text-2: #374151;
  --text-3: #6B7280;
  --text-4: #9CA3AF;

  --sidebar-bg:          #0F1117;
  --sidebar-text:        rgba(255,255,255,.60);
  --sidebar-text-active: #FFFFFF;
  --sidebar-hover:       rgba(255,255,255,.06);
  --sidebar-active:      rgba(91,110,245,.22);
  --sidebar-border:      rgba(255,255,255,.07);

  --input-bg:     #FFFFFF;
  --input-border: #DDE0EC;
  --input-focus:  #5B6EF5;
  --scrollbar:    #DDE0EC;
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --bg:          #0D0E12;
  --bg-alt:      #131419;
  --surface:     #1A1C23;
  --surface-2:   #21232C;
  --surface-3:   #282A34;
  --border:      #2A2D3A;
  --border-2:    #353847;
  --hover:       rgba(255,255,255,.05);

  --text:   #F1F2F6;
  --text-2: #CDD0E0;
  --text-3: #7E87A3;
  --text-4: #525B78;

  --sidebar-bg:          #0D0E12;
  --sidebar-text:        rgba(255,255,255,.48);
  --sidebar-text-active: #FFFFFF;
  --sidebar-hover:       rgba(255,255,255,.05);
  --sidebar-active:      rgba(91,110,245,.25);
  --sidebar-border:      rgba(255,255,255,.06);

  --input-bg:     #21232C;
  --input-border: #2A2D3A;
  --input-focus:  #5B6EF5;
  --scrollbar:    #2A2D3A;

  /* Dark overrides for tints */
  --accent-light:  rgba(91,110,245,.15);
  --teal-light:    rgba(0,201,167,.12);
  --rose-light:    rgba(245,71,110,.12);
  --amber-light:   rgba(245,166,35,.12);
  --purple-light:  rgba(139,124,246,.12);

  /* Stronger shadows in dark */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.45);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.55);
}