/* ============================================================
   FIRM HEARTBEAT — Design Tokens
   Single source of truth for all CSS custom properties.
   Never hardcode hex values in components — always use var().
   Default palette: Steel (slate blue)
   ============================================================ */

:root {

  /* ── ACCENT / BRAND (Steel — default) ─────────────────── */
  --accent:         #4A7FA5;
  --accent-dark:    #2D5F80;
  --accent-darker:  #1D3F57;
  --accent-light:   #EEF5FA;
  --accent-border:  rgba(74,127,165,0.25);

  /* Semantic green alias — follows accent when palette changes */
  --green:          var(--accent);
  --green-dark:     var(--accent-dark);
  --green-darker:   var(--accent-darker);
  --green-light:    var(--accent-light);
  --green-border:   var(--accent-border);

  /* ── SEMANTIC: RED ─────────────────────────────────────── */
  --red:            #C0392B;
  --red-dark:       #922B21;
  --red-light:      #FCEAEA;
  --red-border:     rgba(192,57,43,0.25);

  /* ── SEMANTIC: AMBER (Booked + .mc.warn only) ──────────── */
  --amber:          #EF9F27;
  --amber-dark:     #CF8510;
  --amber-light:    #FAEEDA;
  --amber-border:   rgba(239,159,39,0.25);

  /* ── SEMANTIC: BLUE (info, Consultation Booked status) ─── */
  --blue:           #378ADD;
  --blue-dark:      #2060B0;
  --blue-darker:    #185FA5;
  --blue-light:     #EBF4FD;
  --blue-border:    rgba(55,138,221,0.25);

  /* ── SEMANTIC: PURPLE (Pipeline / outbound) ────────────── */
  --purple:         #7F77DD;
  --purple-dark:    #534AB7;
  --purple-darker:  #3C3489;
  --purple-light:   #EEEDFE;
  --purple-border:  rgba(127,119,221,0.25);

  /* ── SURFACES ───────────────────────────────────────────── */
  --bg:             #EEECEA;
  --surface:        #FFFFFF;
  --surface-2:      #FAFAFA;
  --surface-sunken: #F0F0F2;

  /* ── BORDERS ────────────────────────────────────────────── */
  --border:         rgba(0,0,0,0.07);
  --border-strong:  rgba(0,0,0,0.13);
  --border-focus:   rgba(74,127,165,0.5);

  /* ── TEXT ───────────────────────────────────────────────── */
  --text:           #1A1A18;
  --text-2:         #6B6B67;
  --text-3:         #ABABAB;
  --text-inv:       #FFFFFF;

  /* ── SIDEBAR ────────────────────────────────────────────── */
  --sidebar-width:        224px;
  --sidebar-bg:           #FFFFFF;
  --sidebar-border:       rgba(0,0,0,0.07);
  --sidebar-text:         #6B6B67;
  --sidebar-text-hover:   #1A1A18;
  --sidebar-active-bg:    var(--accent-light);
  --sidebar-active-border:var(--accent);
  --sidebar-active-text:  var(--accent-darker);

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-sans:      'DM Sans', system-ui, sans-serif;
  --font-display:   'DM Serif Display', Georgia, serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* ── TYPE SCALE ─────────────────────────────────────────── */
  --text-xs:        11px;
  --text-sm:        12px;
  --text-base:      13px;
  --text-md:        14px;
  --text-lg:        16px;
  --text-xl:        20px;

  /* ── SPACING ────────────────────────────────────────────── */
  --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;
  --page-padding:   44px;
  --card-padding:   18px 20px;

  /* ── RADIUS ─────────────────────────────────────────────── */
  --radius-sm:      8px;
  --radius:         14px;
  --radius-lg:      16px;
  --radius-full:    9999px;

  /* ── SHADOWS ────────────────────────────────────────────── */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:      0 8px 24px rgba(0,0,0,0.10);

  /* ── Z-INDEX ────────────────────────────────────────────── */
  --z-base:         0;
  --z-raised:       10;
  --z-sidebar:      100;
  --z-overlay:      200;
  --z-modal:        300;
  --z-toast:        400;

  /* ── SPECIALIST IDENTITY COLORS (permanent, never reassign) */
  --spec-0-bg:      #E1F5EE;
  --spec-0-text:    #085041;
  --spec-0-bar:     #1D9E75;

  --spec-1-bg:      #EBF4FD;
  --spec-1-text:    #185FA5;
  --spec-1-bar:     #378ADD;

  --spec-2-bg:      #EEEDFE;
  --spec-2-text:    #534AB7;
  --spec-2-bar:     #7F77DD;

  --spec-3-bg:      #FEF3E2;
  --spec-3-text:    #854F0B;
  --spec-3-bar:     #EF9F27;

  --spec-4-bg:      #F0F0F2;
  --spec-4-text:    #6B6B67;
  --spec-4-bar:     #ABABAB;

  /* ── DARK HERO BACKGROUNDS (per-page) ───────────────────── */
  --hero-default-bg:    #0C0C0B;
  --hero-default-border:#1E1E1C;
  --hero-calls-bg:      #0A0F1A;
  --hero-calls-border:  #1A2540;
  --hero-roi-bg:        #0F1A10;
  --hero-roi-border:    #1E3A20;
  --hero-revenue-bg:    #0D1F17;
  --hero-revenue-border:#1A3D2B;
  --hero-finances-bg:   #0A1628;
  --hero-finances-border:#1A2E4A;
  --hero-lost-bg:       #1A0505;
  --hero-lost-border:   #3D1515;
  --hero-paths-bg:      #100A1F;
  --hero-paths-border:  #2A1A4A;

  /* ── ANIMATION ──────────────────────────────────────────── */
  --ease-spring:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bar:       cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  500ms;
}

/* ── FONT SIZE SCALE (data-fsize on <html>) ─────────────── */
[data-fsize="small"]  { --mc-val-size: 32px; }
[data-fsize="default"]{ --mc-val-size: 38px; }
[data-fsize="large"]  { --mc-val-size: 44px; }
[data-fsize="xlarge"] { --mc-val-size: 48px; }
:root { --mc-val-size: 38px; }

/* ── HIGH CONTRAST ──────────────────────────────────────── */
.high-contrast {
  --border:        rgba(0,0,0,0.18);
  --border-strong: rgba(0,0,0,0.30);
  --text-2:        #4A4A46;
  --text-3:        #7A7A76;
}

/* ── COLOR PALETTES ─────────────────────────────────────── */
/* Applied by Settings → Color palette picker              */

[data-palette="emerald"] {
  --accent:        #1D9E75;
  --accent-dark:   #0F6E56;
  --accent-darker: #085041;
  --accent-light:  #E1F5EE;
  --accent-border: rgba(29,158,117,0.25);
}

[data-palette="steel"] {
  --accent:        #4A7FA5;
  --accent-dark:   #2D5F80;
  --accent-darker: #1D3F57;
  --accent-light:  #EEF5FA;
  --accent-border: rgba(74,127,165,0.25);
}

[data-palette="ocean"] {
  --accent:        #2471A3;
  --accent-dark:   #1A5276;
  --accent-darker: #0E3453;
  --accent-light:  #D6EAF8;
  --accent-border: rgba(36,113,163,0.25);
}

[data-palette="indigo"] {
  --accent:        #5B6FA8;
  --accent-dark:   #3D4E85;
  --accent-darker: #283263;
  --accent-light:  #EDEFFE;
  --accent-border: rgba(91,111,168,0.25);
}

[data-palette="aegean"] {
  --accent:        #3A7085;
  --accent-dark:   #245060;
  --accent-darker: #143340;
  --accent-light:  #EAF4F7;
  --accent-border: rgba(58,112,133,0.25);
}

[data-palette="dusk"] {
  --accent:        #6278A0;
  --accent-dark:   #445880;
  --accent-darker: #2D3B5C;
  --accent-light:  #EDF0F8;
  --accent-border: rgba(98,120,160,0.25);
}

[data-palette="violet"] {
  --accent:        #7F77DD;
  --accent-dark:   #534AB7;
  --accent-darker: #3C3489;
  --accent-light:  #EEEDFE;
  --accent-border: rgba(127,119,221,0.25);
}

[data-palette="rose"] {
  --accent:        #C0527A;
  --accent-dark:   #963D5C;
  --accent-darker: #6C283F;
  --accent-light:  #FAEDF2;
  --accent-border: rgba(192,82,122,0.25);
}

[data-palette="amber"] {
  --accent:        #D4890A;
  --accent-dark:   #A36808;
  --accent-darker: #724705;
  --accent-light:  #FAEEDA;
  --accent-border: rgba(212,137,10,0.25);
}

/* ══════════════════════════════════════════════════════════
   DARK MODE — Override tokens under prefers-color-scheme
   or [data-theme="dark"] attribute on <html>
   ══════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:             #1A1A18;
    --surface:        #242422;
    --surface-2:      #2C2C2A;
    --surface-sunken: #161614;

    --border:         rgba(255,255,255,0.08);
    --border-strong:  rgba(255,255,255,0.14);
    --border-focus:   rgba(74,127,165,0.5);

    --text:           #F0EFED;
    --text-2:         #A8A8A4;
    --text-3:         #68685E;
    --text-inv:       #1A1A18;

    --sidebar-bg:           #1E1E1C;
    --sidebar-border:       rgba(255,255,255,0.07);
    --sidebar-text:         #A8A8A4;
    --sidebar-text-hover:   #F0EFED;
    --sidebar-active-bg:    rgba(74,127,165,0.15);
    --sidebar-active-border:var(--accent);
    --sidebar-active-text:  #7DBAD9;

    --accent-light:   rgba(74,127,165,0.15);
    --accent-border:  rgba(74,127,165,0.3);
    --accent-darker:  #7DBAD9;

    --amber-light:    rgba(239,159,39,0.15);
    --amber-border:   rgba(239,159,39,0.3);
    --blue-light:     rgba(55,138,221,0.15);
    --blue-border:    rgba(55,138,221,0.3);
    --purple-light:   rgba(127,119,221,0.15);
    --purple-border:  rgba(127,119,221,0.3);
    --red-light:      rgba(192,57,43,0.15);
    --red-border:     rgba(192,57,43,0.3);

    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,.5);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.6);
  }
}

/* Explicit dark theme override (toggle via data-theme="dark") */
[data-theme="dark"] {
  --bg:             #1A1A18;
  --surface:        #242422;
  --surface-2:      #2C2C2A;
  --surface-sunken: #161614;

  --border:         rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.14);

  --text:           #F0EFED;
  --text-2:         #A8A8A4;
  --text-3:         #68685E;
  --text-inv:       #1A1A18;

  --sidebar-bg:           #1E1E1C;
  --sidebar-border:       rgba(255,255,255,0.07);
  --sidebar-text:         #A8A8A4;
  --sidebar-text-hover:   #F0EFED;
  --sidebar-active-bg:    rgba(74,127,165,0.15);
  --sidebar-active-border:var(--accent);
  --sidebar-active-text:  #7DBAD9;

  --accent-light:   rgba(74,127,165,0.15);
  --accent-border:  rgba(74,127,165,0.3);
  --accent-darker:  #7DBAD9;

  --amber-light:    rgba(239,159,39,0.15);
  --amber-border:   rgba(239,159,39,0.3);
  --blue-light:     rgba(55,138,221,0.15);
  --blue-border:    rgba(55,138,221,0.3);
  --purple-light:   rgba(127,119,221,0.15);
  --purple-border:  rgba(127,119,221,0.3);
  --red-light:      rgba(192,57,43,0.15);
  --red-border:     rgba(192,57,43,0.3);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.6);
}

/* Light mode explicit override */
[data-theme="light"] {
  /* All :root values apply — no override needed */
}