/* ============================================================
   LeadChaser — Design Tokens
   tokens.css · v1.0 · 2026-05
   Source of truth for the brand. Do not redefine values here in
   downstream code — extend, don't fork.
   ============================================================ */

:root {
  /* ---------- BRAND · CORAL ---------- */
  --coral-50:  #FCEEE9;
  --coral-100: #F9D6CB;
  --coral-200: #F2B3A0;
  --coral-300: #EC9277;
  --coral-400: #E68066;
  --coral-500: #E16F56;   /* brand anchor */
  --coral-600: #C25742;
  --coral-700: #9C4231;
  --coral-800: #722F22;
  --coral-900: #4A1D14;

  /* ---------- BRAND · TEAL ---------- */
  --teal-50:  #EEF5F6;
  --teal-100: #DAE7E9;   /* legacy: brand pale teal */
  --teal-200: #C2D8DC;
  --teal-300: #ABCBD0;
  --teal-400: #A2C4C9;   /* legacy: brand teal anchor */
  --teal-500: #82AAB1;
  --teal-600: #618C95;
  --teal-700: #466B73;
  --teal-800: #314D54;
  --teal-900: #1D3036;

  /* ---------- BRAND · SLATE ---------- */
  --slate-50:  #F3F5F6;
  --slate-100: #E4E7EA;
  --slate-200: #CCD2D6;
  --slate-300: #ABB3B8;
  --slate-400: #868F95;
  --slate-500: #657179;   /* legacy anchor */
  --slate-600: #505960;
  --slate-700: #3D4449;
  --slate-800: #2A2F33;
  --slate-900: #181B1D;

  /* ---------- NEUTRAL · GRAY ---------- */
  --gray-50:  #F8F8F9;
  --gray-100: #EFEFF1;
  --gray-200: #E2E3E5;
  --gray-300: #CACBCE;
  --gray-400: #A7A9AD;
  --gray-500: #82858A;
  --gray-600: #65686D;
  --gray-700: #4C4F53;
  --gray-800: #34363A;
  --gray-900: #1C1E20;

  /* ---------- FUNCTIONAL · SUCCESS ---------- */
  --success-50:  #E6F4ED;
  --success-100: #C4E5D2;
  --success-200: #8FCCAB;
  --success-300: #5BB286;
  --success-400: #2E9866;
  --success-500: #138056;
  --success-600: #0F7B4D;   /* recommended anchor */
  --success-700: #0A613D;
  --success-800: #07472C;
  --success-900: #042D1B;

  /* ---------- FUNCTIONAL · WARNING ---------- */
  --warning-50:  #FBF1E0;
  --warning-100: #F5DEB0;
  --warning-200: #ECC275;
  --warning-300: #E0A640;
  --warning-400: #D29021;
  --warning-500: #C77D11;   /* anchor */
  --warning-600: #A4640B;
  --warning-700: #7E4C07;
  --warning-800: #573404;
  --warning-900: #321E02;

  /* ---------- FUNCTIONAL · DANGER ---------- */
  /* Pushed deeper + cooler than coral so the two never read as the same role. */
  --danger-50:  #F8E7E3;
  --danger-100: #EFC2B8;
  --danger-200: #DC9183;
  --danger-300: #C7644F;
  --danger-400: #B44732;
  --danger-500: #A8341F;   /* anchor */
  --danger-600: #8A2917;
  --danger-700: #691E10;
  --danger-800: #481408;
  --danger-900: #290A04;

  /* ---------- FUNCTIONAL · INFO ---------- */
  --info-50:  #E4EEF4;
  --info-100: #BED5E2;
  --info-200: #87B3C8;
  --info-300: #5191AE;
  --info-400: #2E7B9C;
  --info-500: #1F6B8C;   /* anchor */
  --info-600: #185674;
  --info-700: #114159;
  --info-800: #0B2D3D;
  --info-900: #051821;

  /* ---------- SURFACES · LIGHT ---------- */
  --surface-page:    #FBF8F5;   /* warm off-white, 8% warm vs pure white */
  --surface-raised:  #FFFFFF;   /* cards, modals */
  --surface-sunken:  #F4EEE8;   /* inputs, code blocks, wells */
  --surface-overlay: rgba(24, 27, 29, 0.60);  /* modal scrim */

  /* ---------- TEXT · LIGHT ---------- */
  --text-primary:   #1C1E20;   /* near-black, slightly warm */
  --text-secondary: #505960;
  --text-tertiary:  #868F95;
  --text-on-coral:  #FFFFFF;
  --text-on-dark:   #FBF8F5;

  /* ---------- BORDERS · LIGHT ---------- */
  --border-subtle:    #EFEFF1;
  --border-default:   #E2E3E5;
  --border-strong:    #CACBCE;
  --border-focus:     var(--coral-400);

  /* ---------- TYPE ---------- */
  --font-sans:    "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Fraunces", "Lato", Georgia, serif;  /* editorial accent only */

  --text-display-xl: 72px;  --lh-display-xl: 1.00;
  --text-display-lg: 56px;  --lh-display-lg: 1.05;
  --text-display-md: 44px;  --lh-display-md: 1.10;
  --text-h1: 36px;          --lh-h1: 1.15;
  --text-h2: 28px;          --lh-h2: 1.20;
  --text-h3: 22px;          --lh-h3: 1.30;
  --text-h4: 18px;          --lh-h4: 1.40;
  --text-body-lg: 18px;     --lh-body-lg: 1.60;
  --text-body: 15px;        --lh-body: 1.55;
  --text-body-sm: 13px;     --lh-body-sm: 1.50;
  --text-caption: 11px;     --lh-caption: 1.40;
  --text-mono: 13px;        --lh-mono: 1.50;

  /* ---------- SPACING (4px grid) ---------- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  12px;
  --space-base:16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* ---------- RADIUS ---------- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;     /* default */
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ---------- SHADOW (use sparingly — borders first) ---------- */
  --shadow-sm: 0 1px 2px rgba(20, 16, 12, 0.05),
               0 0 0 1px rgba(20, 16, 12, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 16, 12, 0.08),
               0 1px 3px rgba(20, 16, 12, 0.06);
  --shadow-lg: 0 12px 32px rgba(20, 16, 12, 0.12),
               0 4px 8px rgba(20, 16, 12, 0.06);
  --shadow-xl: 0 24px 60px rgba(20, 16, 12, 0.18),
               0 8px 16px rgba(20, 16, 12, 0.08);
  --shadow-focus: 0 0 0 3px rgba(225, 111, 86, 0.30); /* coral-400 @ 30% */

  /* ---------- BREAKPOINTS (reference; use in media queries) ---------- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl:1536px;

  /* ---------- CONTAINERS ---------- */
  --container-marketing: 1280px;
  --container-app:       1440px;
  --sidebar-width:        264px;   /* mid of 240–280 range */
}

/* ============================================================
   DARK MODE
   Apply via either OS preference or a manual `.dark` class on <html>.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --surface-page:    #1A1714;
    --surface-raised:  #251F1B;
    --surface-sunken:  #120F0D;
    --surface-overlay: rgba(0, 0, 0, 0.70);

    --text-primary:   #FBF8F5;
    --text-secondary: #B0B7BD;
    --text-tertiary:  #868F95;

    --border-subtle:  #2A2F33;
    --border-default: #3D4449;
    --border-strong:  #505960;
  }
}

html.dark {
  --surface-page:    #1A1714;
  --surface-raised:  #251F1B;
  --surface-sunken:  #120F0D;
  --surface-overlay: rgba(0, 0, 0, 0.70);

  --text-primary:   #FBF8F5;
  --text-secondary: #B0B7BD;
  --text-tertiary:  #868F95;

  --border-subtle:  #2A2F33;
  --border-default: #3D4449;
  --border-strong:  #505960;
}

/* ============================================================
   DATA VIZ
   Categorical 6 (coral-blind safe in first 3), sequential ramps,
   diverging ramp for comparison viz.
   ============================================================ */

:root {
  --viz-cat-1: var(--coral-500);   /* coral */
  --viz-cat-2: var(--info-500);    /* blue */
  --viz-cat-3: var(--slate-700);   /* slate-deep */
  --viz-cat-4: var(--warning-500); /* amber */
  --viz-cat-5: var(--teal-600);    /* teal-deep */
  --viz-cat-6: #7A4A6E;            /* plum */

  /* sequential — coral */
  --viz-seq-coral-0: #FCEEE9;
  --viz-seq-coral-1: #F9D6CB;
  --viz-seq-coral-2: #F2B3A0;
  --viz-seq-coral-3: #EC9277;
  --viz-seq-coral-4: #E16F56;
  --viz-seq-coral-5: #C25742;
  --viz-seq-coral-6: #9C4231;

  /* sequential — teal */
  --viz-seq-teal-0: #EEF5F6;
  --viz-seq-teal-1: #DAE7E9;
  --viz-seq-teal-2: #ABCBD0;
  --viz-seq-teal-3: #82AAB1;
  --viz-seq-teal-4: #618C95;
  --viz-seq-teal-5: #466B73;
  --viz-seq-teal-6: #314D54;

  /* diverging — coral ←→ teal, neutral mid */
  --viz-div-0: #9C4231;  /* coral-700 */
  --viz-div-1: #E68066;  /* coral-400 */
  --viz-div-2: #F9D6CB;  /* coral-100 */
  --viz-div-3: #F3F5F6;  /* slate-50 — neutral mid */
  --viz-div-4: #C2D8DC;  /* teal-200 */
  --viz-div-5: #82AAB1;  /* teal-500 */
  --viz-div-6: #314D54;  /* teal-800 */
}