/* ─── SPEAKFIRST DESIGN TOKENS ───────────────────────────────────────────── */
/* Palette: softer blue-gray family — comfortable for long sessions.          */

/* ── DARK THEME (default) ──────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* ── Backgrounds (cool blue-gray, never pure black) */
  --bg:              #13141B;   /* very dark, subtle blue */
  --surface:         #1C1E28;   /* panel / card surface   */
  --surface-2:       #23263A;   /* inputs / inset elements */
  --surface-hover:   #2A2D42;   /* hover state            */

  /* ── Sidebar */
  --sidebar-bg:      #0F1018;
  --sidebar-border:  rgba(255,255,255,0.055);

  /* ── Primary (desaturated indigo — softer than raw #4F46E5) */
  --primary:         #6C74DC;
  --primary-hover:   #7C85E8;
  --primary-dark:    #5B63C8;
  --primary-subtle:  rgba(108,116,220,0.14);
  --primary-light:   rgba(108,116,220,0.15);
  --primary-pale:    rgba(108,116,220,0.08);

  /* ── Text (softer than pure white) */
  --text-primary:    #E4E6F0;
  --text-secondary:  #8791A8;
  --text-muted:      #545A72;

  /* ── Borders */
  --border:          #232636;
  --border-2:        #2C3049;

  /* ── Semantic colors (desaturated for comfort) */
  --success:         #3DBE7A;
  --success-bg:      rgba(61,190,122,0.10);
  --warning:         #E8A530;
  --warning-bg:      rgba(232,165,48,0.10);
  --danger:          #E05A5A;
  --danger-bg:       rgba(224,90,90,0.10);
  --info:            #6C74DC;
  --info-bg:         rgba(108,116,220,0.10);

  /* ── Semantic aliases */
  --card:            var(--surface);
  --card-bg:         var(--surface);
  --hover-bg:        var(--surface-hover);
  --white:           #FFFFFF;

  /* ── Legacy aliases (backward compat) */
  --dark:            #0F1018;
  --dark-2:          #1A1C28;
  --orange:          var(--primary);
  --orange-mid:      var(--primary-hover);
  --orange-light:    var(--primary-light);
  --orange-pale:     var(--primary-pale);
  --muted:           var(--text-secondary);
  --muted-2:         var(--text-muted);

  /* ── Shadows (softer, less dramatic) */
  --shadow-sm:       0 1px 2px rgba(0,0,0,0.22);
  --shadow:          0 1px 3px rgba(0,0,0,0.28), 0 4px 16px rgba(0,0,0,0.16);
  --shadow-lg:       0 4px 24px rgba(0,0,0,0.38), 0 1px 4px rgba(0,0,0,0.2);
  --shadow-primary:  0 4px 20px rgba(108,116,220,0.22);

  /* ── Radius */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Typography scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  /* ── Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Layout */
  --sidebar-w: 220px;
  --topbar-h:  56px;

  /* ── Transitions */
  --ease:      0.15s ease;
  --ease-slow: 0.25s ease;
}

/* ── LIGHT THEME ────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* ── Backgrounds (warm off-white, not blinding pure white) */
  --bg:              #F5F6FA;
  --surface:         #FFFFFF;
  --surface-2:       #EDEEF5;
  --surface-hover:   #E5E7F0;

  /* ── Sidebar (deep navy — premium feel) */
  --sidebar-bg:      #1A2235;
  --sidebar-border:  rgba(255,255,255,0.08);

  /* ── Primary (slightly deeper for light bg readability) */
  --primary:         #5B63CC;
  --primary-hover:   #6C74DC;
  --primary-dark:    #4A52B5;
  --primary-subtle:  rgba(91,99,204,0.10);
  --primary-light:   #ECEEF9;
  --primary-pale:    #F3F4FB;

  /* ── Text */
  --text-primary:    #1A1C2E;
  --text-secondary:  #525874;
  --text-muted:      #8B91A7;

  /* ── Borders */
  --border:          #DDE0EB;
  --border-2:        #C8CBDB;

  /* ── Semantic */
  --success:         #1D9456;
  --success-bg:      #EDFAF3;
  --warning:         #B87308;
  --warning-bg:      #FFF7E5;
  --danger:          #C42B2B;
  --danger-bg:       #FFF0F0;
  --info:            #5B63CC;
  --info-bg:         #ECEEF9;

  /* ── Semantic aliases */
  --card:            #FFFFFF;
  --card-bg:         #FFFFFF;
  --hover-bg:        #E5E7F0;
  --white:           #FFFFFF;

  /* ── Legacy aliases */
  --dark:            #1A2235;
  --dark-2:          #2D3655;
  --orange:          var(--primary);
  --orange-mid:      var(--primary-hover);
  --orange-light:    var(--primary-light);
  --orange-pale:     var(--primary-pale);
  --muted:           var(--text-secondary);
  --muted-2:         var(--text-muted);

  /* ── Shadows */
  --shadow-sm:       0 1px 2px rgba(26,28,46,0.06);
  --shadow:          0 1px 3px rgba(26,28,46,0.07), 0 4px 16px rgba(26,28,46,0.05);
  --shadow-lg:       0 8px 32px rgba(26,28,46,0.11);
  --shadow-primary:  0 4px 16px rgba(91,99,204,0.20);
}

/* ── SYSTEM PREFERENCE FALLBACK ─────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:              #F5F6FA;
    --surface:         #FFFFFF;
    --surface-2:       #EDEEF5;
    --surface-hover:   #E5E7F0;
    --sidebar-bg:      #1A2235;
    --sidebar-border:  rgba(255,255,255,0.08);
    --primary:         #5B63CC;
    --primary-hover:   #6C74DC;
    --primary-dark:    #4A52B5;
    --primary-subtle:  rgba(91,99,204,0.10);
    --primary-light:   #ECEEF9;
    --primary-pale:    #F3F4FB;
    --text-primary:    #1A1C2E;
    --text-secondary:  #525874;
    --text-muted:      #8B91A7;
    --border:          #DDE0EB;
    --border-2:        #C8CBDB;
    --card:            #FFFFFF;
    --card-bg:         #FFFFFF;
    --hover-bg:        #E5E7F0;
    --dark:            #1A2235;
    --dark-2:          #2D3655;
    --success:         #1D9456;
    --success-bg:      #EDFAF3;
    --warning:         #B87308;
    --warning-bg:      #FFF7E5;
    --danger:          #C42B2B;
    --danger-bg:       #FFF0F0;
    --info:            #5B63CC;
    --info-bg:         #ECEEF9;
    --shadow-sm:       0 1px 2px rgba(26,28,46,0.06);
    --shadow:          0 1px 3px rgba(26,28,46,0.07), 0 4px 16px rgba(26,28,46,0.05);
    --shadow-lg:       0 8px 32px rgba(26,28,46,0.11);
  }
}