/* ============================================================================
   Slingshot Design Tokens
   Single source of truth for new.slingshot.tel, the app codebase
   (app.slingshotvoip.com + slingpanel.slingshotvoip.com), and any new surface.

   Generated 2026-08-28. Every colour pairing documented in Doc 19 is
   WCAG 2.1 AA verified. Do not add a colour, size, space or radius that is
   not in this file — if you need one, the file is wrong and should be edited
   here first, not overridden locally.
   ============================================================================ */

:root {

  /* --- BRAND ------------------------------------------------------------ */
  /* Purple is the brand. Blue is retired. Locked Aug 15 2026.              */
  --brand-50:  #F2EDFC;
  --brand-100: #E5DCFA;
  --brand-200: #D0BFF5;
  --brand-300: #B398ED;
  --brand-400: #966FE8;
  --brand-500: #7C4EDF;   /* the brand */
  --brand-600: #633ABB;
  --brand-700: #4C2998;
  --brand-800: #392070;
  --brand-900: #291B47;
  --brand: var(--brand-500);

  /* Dark mode only. --brand-500 on a dark ground runs 2.5:1 (on brand-800)
     to 3.2:1 (on ink) — below AA everywhere. --brand-on-dark clears AA on
     every dark surface EXCEPT brand-800, where it is 4.47:1: there, use it
     for fills and icons, not body text.                                    */
  --brand-on-dark: #A585F0;

  /* --- NEUTRALS (light surfaces) ---------------------------------------- */
  /* Retinted ~5% toward the brand hue so nothing reads cold beside purple. */
  --n-0:   #FFFFFF;
  --n-25:  #F6F6FB;
  --n-50:  #F0F0F7;
  --n-100: #E8E8F2;
  --n-200: #DCDEEB;
  --n-400: #969DB6;
  --n-450: #7E85A2;
  --n-500: #5D607E;
  --n-600: #4D5569;
  --n-700: #3A4258;
  --n-900: #171B32;

  --canvas:  var(--n-50);
  --surface: var(--n-0);
  --border:  var(--n-200);
  --muted:   var(--n-500);
  --body:    var(--n-700);
  --heading: var(--n-900);

  /* --- NEUTRALS (dark surfaces) ----------------------------------------- */
  /* NEW Aug 28 2026. Before this existed, five ad-hoc values were in use
     across two codebases (#C4BEDD #8E92AE #E9E6F5 #EFE9FC #A79FC6).
     All three rungs clear AA on ink, brand-900 AND brand-800.              */
  --on-dark-heading: #F6F4FD;   /* 15.6 : 1 on ink */
  --on-dark-body:    #DCD6EF;   /* 12.0 : 1 on ink */
  --on-dark-muted:   #A099B6;   /*  6.2 : 1 on ink, 4.8 : 1 on brand-800 */
  --on-dark-border:  #3A3358;   /* decorative divider only, not a boundary */

  /* --- SEMANTIC: GREEN (calls, success) --------------------------------- */
  /* 500 is the dial green. 600 is the locked hover value.                  */
  --green-50:  #F0F8F5;
  --green-100: #DDEEE8;
  --green-200: #B6DACE;
  --green-300: #86C2AE;
  --green-400: #49A486;
  --green-500: #0C855D;
  --green-600: #09694A;   /* locked hover — white on this is 6.7 : 1 */
  --green-700: #0C5942;
  --green-800: #0B4334;
  --green-900: #0B2C27;

  /* --- SEMANTIC: AMBER (warning, DND-on, trial) ------------------------- */
  /* !! White text on --amber-500 is 3.19 : 1 and FAILS AA for body text.
        Use --amber-600 for a filled button, or dark text on a tint.        */
  --amber-50:  #FDF7F0;
  --amber-100: #FAECDC;
  --amber-200: #F4D6B4;
  --amber-300: #ECBB82;
  --amber-400: #E29944;
  --amber-500: #D97706;   /* the warning colour — surfaces/icons, not white text */
  --amber-600: #B46308;   /* white on this is 4.44 : 1 — use for filled buttons */
  --amber-700: #8F500A;   /* on --amber-50 is 5.95 : 1 — callout text */
  --amber-800: #6A3C0C;
  --amber-900: #45290F;

  /* --- SEMANTIC: RED (error, hangup, destructive) ----------------------- */
  --red-50:  #FCF3F5;
  --red-100: #F9E4E8;
  --red-200: #F2C4CD;
  --red-300: #E99DAC;
  --red-400: #DE6C82;
  --red-500: #D33B58;   /* white on this is 4.63 : 1 */
  --red-600: #AF324B;   /* white on this is 6.21 : 1 */
  --red-700: #8B293F;   /* on --red-50 is 7.75 : 1 — callout text */
  --red-800: #672132;
  --red-900: #431826;

  /* --- TYPE ------------------------------------------------------------- */
  /* Inter. Load 400/500/600/700 only — 800 is not a Slingshot weight, and
     500 was being loaded but never used. Both are now corrected.           */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif;

  /* Eight sizes. Replaces the 16 in use, including 11.5/12.5/13.5/14.5px.
     No fractional sizes. Ever.                                             */
  --text-2xs: 11px;   /* uppercase micro-labels only */
  --text-xs:  12px;   /* dense table meta */
  --text-sm:  13px;   /* secondary text, table cells, nav */
  --text-md:  14px;   /* compact body */
  --text-base:16px;   /* body — the default */
  --text-lg:  20px;   /* section heading */
  --text-xl:  26px;   /* page heading */
  --text-2xl: 32px;   /* hero */

  --lh-tight: 1.25;   /* headings */
  --lh-snug:  1.4;    /* UI text */
  --lh-base:  1.55;   /* prose */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --tracking-tight: -0.02em;   /* headings 20px and up */
  --tracking-label:  0.09em;   /* uppercase micro-labels */

  /* --- SPACING ---------------------------------------------------------- */
  /* 4px grid. Replaces the 13 ad-hoc values found in the panel
     (9, 13, 15, 17 and 26px are all off-grid and are being retired).       */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;   /* card padding — replaces the 26px in use */
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- RADIUS ----------------------------------------------------------- */
  /* 8px was in use 444 times but was never a token. It is adopted here as
     the CONTROL radius rather than migrated away — see Doc 19.             */
  --r-sm:   6px;    /* badges, chips, micro-controls */
  --r-md:   8px;    /* buttons, inputs, nav pills — the control radius */
  --r-lg:   10px;   /* inner panels, callouts */
  --r-xl:   14px;   /* cards and containers */
  --r-full: 999px;  /* avatars, pills */

  /* --- ELEVATION -------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(41, 27, 71, .08);
  --shadow-md: 0 4px 12px rgba(41, 27, 71, .08);
  --shadow-lg: 0 20px 60px rgba(41, 27, 71, .12);

  /* --- LAYOUT ----------------------------------------------------------- */
  --maxw: 1120px;
  --sidebar-w: 236px;   /* panel nav */
  --rail-w: 94px;       /* softphone rail */
}