/* ================================================================
   tokens.css  --  Single source of truth for all design tokens.
   v1 -- April 2026

   Load order: tokens.css BEFORE styles.css, softphone.css,
   thinking-indicator.css.

   RULE: No component rules here. Tokens only.
   Categories:
     1. Raw colour palette
     2. Semantic colours
     3. Typography
     4. Spacing scale
     5. Border radius
     6. Shadows
     7. Z-index stacking order
     8. Transitions
     9. Component dimensions (layout contract)
    10. Dark mode overrides (semantic only)
   ================================================================ */

/* ----------------------------------------------------------------
   1. Raw colour palette  (no semantic meaning -- never use directly
      in components; always via a semantic token)
   ---------------------------------------------------------------- */
:root {
  /* Navy / Brand */
  --color-navy-950: #0a1628;
  --color-navy-900: #0f2942;
  --color-navy-800: #1e3a5f;
  --color-navy-750: #16304f;
  --color-navy-700: #244c7a;
  --color-navy-600: #2a5082;
  --color-navy-500: #3b6da8;

  /* Indigo / Accent */
  --color-indigo-700: #4338ca;
  --color-indigo-600: #4f46e5;
  --color-indigo-500: #6366f1;
  --color-indigo-400: #818cf8;
  --color-indigo-100: #c7d2fe;

  /* Blue */
  --color-blue-600: #2563eb;
  --color-blue-500: #3b82f6;

  /* Teal */
  --color-teal-700: #0f766e;

  /* Green */
  --color-green-700: #15803d;
  --color-green-600: #16a34a;
  --color-green-500: #22c55e;
  --color-green-400: #059669;
  --color-green-100: #f0fdf4;
  --color-green-border: #bbf7d0;
  --color-green-text: #15803d;

  /* Amber / Warning */
  --color-amber-900: #78350f;
  --color-amber-800: #92400e;
  --color-amber-700: #b45309;
  --color-amber-600: #d97706;
  --color-amber-500: #f59e0b;
  --color-amber-400: #fbbf24;
  --color-amber-200: #fde68a;
  --color-amber-100: #fef3c7;
  --color-amber-50:  #fefce8;

  /* Orange */
  --color-orange-500: #f97316;

  /* Red / Error */
  --color-red-900: #7f1d1d;
  --color-red-800: #991b1b;
  --color-red-700: #b91c1c;
  --color-red-600: #dc2626;
  --color-red-500: #ef4444;
  --color-red-300: #fca5a5;
  --color-red-100: #fef2f2;
  --color-red-50:  #fff5f5;

  /* Slate (primary text / border palette) */
  --color-slate-950: #0f172a;
  --color-slate-900: #1e293b;
  --color-slate-800: #1f2937;
  --color-slate-700: #374151;
  --color-slate-600: #475569;
  --color-slate-500: #64748b;
  --color-slate-400: #94a3b8;
  --color-slate-300: #cbd5e1;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f0f4f8;
  --color-slate-50:  #f8fafc;

  /* Gray (widget / softphone palette) */
  --color-gray-900: #1f2937;
  --color-gray-700: #374151;
  --color-gray-600: #6b7280;
  --color-gray-400: #9ca3af;
  --color-gray-300: #d1d5db;
  --color-gray-200: #e5e7eb;
  --color-gray-100: #f3f4f6;
  --color-gray-50:  #f9fafb;

  /* Code / log terminal */
  --color-code-bg:             #0f1724;
  --color-code-text:           #d4d4d4;
  --color-code-scrollbar-thumb: #41526a;
  --color-code-scrollbar-track: #0b111d;

  /* White / Black */
  --color-white: #ffffff;
  --color-black: #000000;

  /* AI thinking indicator (branded sage-green) */
  --color-ai-thinking: #a9cc99;
}

/* ----------------------------------------------------------------
   2. Semantic colour tokens  (reference palette above)
   ---------------------------------------------------------------- */
:root {
  /* Brand */
  --color-primary:       var(--color-navy-800);
  --color-primary-hover: var(--color-navy-750);
  --color-primary-light: var(--color-blue-500);
  --color-accent-from:   var(--color-navy-800);
  --color-accent-to:     var(--color-indigo-500);
  --color-accent:        var(--color-indigo-600);

  /* Status */
  --color-success:  var(--color-green-400);
  --color-warning:  var(--color-amber-600);
  --color-error:    var(--color-red-600);
  --color-info:     var(--color-blue-600);

  /* Surfaces */
  --color-bg:              var(--color-slate-50);
  --color-surface:         var(--color-white);
  --color-surface-alt:     var(--color-slate-50);
  --color-surface-secondary: var(--color-slate-100);

  /* Text */
  --color-text:           var(--color-slate-950);
  --color-text-secondary: var(--color-slate-500);
  --color-text-muted:     var(--color-slate-400);

  /* Borders */
  --color-border:       var(--color-slate-200);
  --color-border-alt:   var(--color-slate-300);
  --color-border-focus: var(--color-navy-800);

  /* Map grade colours */
  --color-grade-green:   var(--color-green-600);
  --color-grade-amber:   var(--color-amber-600);
  --color-grade-blue:    var(--color-blue-600);
  --color-grade-grey:    var(--color-gray-600);
  --color-grade-neutral: var(--color-indigo-600);

  /* Notification / badge */
  --color-badge-unclaimed:    var(--color-orange-500);
  --color-warning-banner-bg:  var(--color-amber-100);
  --color-warning-banner-text: var(--color-amber-800);
  --color-warning-banner-border: var(--color-amber-500);

  /* Header glass effect */
  --color-header-bg: rgba(255, 255, 255, 0.92);
  --color-modal-overlay: rgba(0, 0, 0, 0.45);
  --color-thinking-overlay: rgba(0, 0, 0, 0.70);
}

/* ----------------------------------------------------------------
   3. Typography
   ---------------------------------------------------------------- */
:root {
  --font-family:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'Courier New', monospace;

  /* Size scale */
  --font-size-2xs: 10px;
  --font-size-xs:  11px;    /* labels, section titles */
  --font-size-sm:  12px;    /* meta, badges, word-count */
  --font-size-md:  13px;    /* secondary UI text */
  --font-size-nav: 13.5px;  /* navigation links */
  --font-size-base: 14px;   /* default component text */
  --font-size-body: 15px;   /* body default */
  --font-size-lg:  16px;
  --font-size-xl:  18px;    /* card headings */
  --font-size-2xl: 20px;    /* logo */
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;    /* placeholder hero */
  --font-size-5xl: 30px;    /* dashboard hero */
  --font-size-6xl: 36px;    /* stat value */

  /* Line heights */
  --line-height-tight:  1.2;
  --line-height-snug:   1.4;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.7;
}

/* ----------------------------------------------------------------
   4. Spacing scale  (multiples of 4px)
   ---------------------------------------------------------------- */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;

  /* Named aliases (preserve existing names used in styles.css and HTML) */
  --spacing-xs: var(--space-1);  /*  4px */
  --spacing-sm: var(--space-2);  /*  8px */
  --spacing-md: var(--space-4);  /* 16px */
  --spacing-lg: var(--space-6);  /* 24px */
  --spacing-xl: var(--space-8);  /* 32px */
}

/* ----------------------------------------------------------------
   5. Border radius
   ---------------------------------------------------------------- */
:root {
  --radius-xs:     4px;
  --radius-sm:     6px;
  --radius-md:    10px;   /* inputs, buttons */
  --radius-lg:    12px;   /* cards (primary) */
  --radius-xl:    16px;
  --radius-2xl:   20px;   /* pill badges */
  --radius-pill:  999px;  /* progress bars, round badges */
  --radius-circle: 50%;   /* avatars */

  /* Legacy alias -- keeps var(--radius) working throughout styles.css */
  --radius: var(--radius-lg);
}

/* ----------------------------------------------------------------
   6. Shadows
   ---------------------------------------------------------------- */
:root {
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.04);
  --shadow:    0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 8px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 8px 16px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.16);

  /* Component-specific */
  --shadow-fab:          0 4px 18px rgba(30, 58, 95, 0.45);
  --shadow-inset-focus:  0 0 0 3px rgba(30, 58, 95, 0.10);
  --shadow-header:       0 1px 3px rgba(0,0,0,0.04), 0 1px 8px rgba(0,0,0,0.04);
  --shadow-modal:        0 10px 30px rgba(0, 0, 0, 0.30);
  --shadow-softphone:    0 8px 32px rgba(30, 58, 95, 0.18);
}

/* ----------------------------------------------------------------
   7. Z-index stacking order  (document the full layer cake)
   ---------------------------------------------------------------- */
:root {
  --z-base:               0;
  --z-raised:             1;
  --z-table:             10;     /* sticky table headers */
  --z-tooltip:          100;     /* tooltips */
  --z-sidebar:          150;     /* mobile sidebar overlay */
  --z-mobile-nav:       190;     /* mobile bottom nav bar */
  --z-sticky:           200;     /* sticky app header */
  --z-dropdown:         300;     /* dropdown menus + toast container */
  --z-modal:           1000;     /* modals / thinking overlay */
  --z-toast:           1001;     /* toast notifications (above modal) */
  --z-softphone:       9000;     /* softphone FAB */
  --z-softphone-panel: 9001;     /* softphone slide-up panel */
  --z-softphone-ring:  9050;     /* incoming call overlay */
  --z-delta:          99999;     /* gamification floating delta overlay */
}

/* ----------------------------------------------------------------
   8. Transitions
   ---------------------------------------------------------------- */
:root {
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.40s ease;
}

/* ----------------------------------------------------------------
   9. Component dimensions  (layout contract -- change here, not inline)
   ---------------------------------------------------------------- */
:root {
  --header-height:              56px;
  --sidebar-width:             240px;
  --sidebar-collapsed-width:    56px;
  --sidebar-page-width:        260px;   /* page-layout sidebar variant */
  --softphone-width:           310px;
  --softphone-width-mobile-max: 340px;
  --softphone-fab-size:         56px;
  --softphone-offset:           28px;
  --softphone-ctrl-size:        42px;
  --container-max:            1400px;
  --modal-max-width:           540px;
  --toast-min-width:           280px;
  --dropdown-min-width:        220px;
  --input-focus-ring-width:      3px;
}

/* ----------------------------------------------------------------
   10. Dark mode overrides  (semantic tokens only -- component-specific
       dark rules live in styles.css [data-theme="dark"] block)
   ---------------------------------------------------------------- */
[data-theme="dark"] {
  /* Surfaces */
  --color-bg:               #0c1220;
  --color-surface:          #141e30;
  --color-surface-alt:      #141e30;
  --color-surface-secondary: #1a2740;

  /* Borders */
  --color-border:           #253347;
  --color-border-alt:       #2e3f55;

  /* Text */
  --color-text:             #e2e8f0;
  --color-text-secondary:   #94a3b8;
  --color-text-muted:       #64748b;

  /* Shadows (brighter in dark to be visible) */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.20), 0 2px 6px rgba(0,0,0,0.15);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.20), 0 2px 6px rgba(0,0,0,0.15);
  --shadow:    0 1px 3px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.25);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.20), 0 8px 20px rgba(0,0,0,0.30);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.20), 0 12px 32px rgba(0,0,0,0.40);

  /* Glass effects in dark */
  --color-header-bg: rgba(20, 30, 48, 0.95);
}