/* ==========================================================================
   LeaderScale — Design Tokens
   Single source of truth. Never hard-code a color or font elsewhere.
   Brand green confirmed from the brand kit (Emerald/500). Fonts confirmed
   with Mike, July 2026. Everything else derives from these tokens.

   Official Emerald ramp (brand kit v1, July 2026):
     Emerald/300 #5EE9B5 · 400 #00D492 · 500 #00BC7D · 600 #009966 · 800 #006045
   Inverse navy (OG and social base): #0F172B
   ========================================================================== */

:root {
  /* --- Surfaces ------------------------------------------------------- */
  --bg:            #0A0E16;
  --bg-soft:       #0D1320;
  --surface:       #131A28;
  --surface-2:     #1A2335;

  /* --- Lines ---------------------------------------------------------- */
  --line:          rgba(255, 255, 255, .09);
  --line-strong:   rgba(255, 255, 255, .16);

  /* --- Text ----------------------------------------------------------- */
  --text:          #ECF1F8;
  --text-dim:      #97A4B8;
  --text-dimmer:   #69768A;
  --ink:           #06140C;   /* text on green buttons */

  /* --- Semantic color -------------------------------------------------
     green  = outcome, resolution, primary action
     blue   = information, resources
     amber  = partial progress
     red    = unresolved problem, symptoms
     Never use green for a problem state.                                */
  --green:         #00BC7D;   /* Emerald/500 — brand kit v1. CTA + primary action. */
  --green-bright:  #00D492;   /* Emerald/400 — hover, highlights */
  --green-deep:    #006045;   /* Emerald/800 — gradient partner, deep */
  --green-wash:    rgba(0, 188, 125, .08);
  --green-edge:    rgba(0, 188, 125, .22);

  --blue:          #5790FF;
  --amber:         #F5B544;
  --orange:        #F0873E;   /* mid step between red and amber, severity scale */
  --red:           #F2603C;
  --red-wash:      rgba(242, 96, 60, .12);
  --purple:        #B7A6FF;

  /* --- Type ----------------------------------------------------------- */
  --font-display:  'Space Grotesk', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, monospace;

  --fs-display:    clamp(2.5rem, 6vw, 4.4rem);
  --fs-h2:         clamp(1.9rem, 3.6vw, 2.9rem);
  --fs-h3:         clamp(1.5rem, 2.4vw, 2rem);
  --fs-lead:       clamp(1.05rem, 1.5vw, 1.22rem);
  --fs-body:       1rem;
  --fs-small:      .9rem;
  --fs-caption:    .83rem;
  --fs-mono:       12px;

  --lh-tight:      1.08;
  --lh-heading:    1.25;
  --lh-body:       1.6;

  --track-display: -.035em;
  --track-heading: -.02em;
  --track-mono:    .18em;

  /* --- Layout --------------------------------------------------------- */
  --maxw:          1180px;
  --gutter:        28px;
  --gutter-sm:     18px;
  --section-y:     86px;
  --section-y-sm:  62px;

  /* --- Radius --------------------------------------------------------- */
  --r:             16px;
  --r-sm:          11px;
  --r-pill:        999px;

  /* --- Elevation ------------------------------------------------------ */
  --shadow-panel:  0 30px 80px -40px rgba(0, 0, 0, .9);
  --shadow-btn:    0 6px 18px -6px rgba(0, 188, 125, .7);

  /* --- Motion --------------------------------------------------------- */
  --ease:          cubic-bezier(.2, .7, .2, 1);
  --t-fast:        .15s;
  --t-base:        .18s;
  --t-slow:        .35s;
  --t-signal:      .9s;
}

@media (max-width: 560px) {
  :root {
    --gutter:    var(--gutter-sm);
    --section-y: var(--section-y-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0s;
    --t-base: 0s;
    --t-slow: 0s;
    --t-signal: 0s;
  }
}