/* ============================================================
   Khulani — Design Tokens (Light theme iteration)

   Phase 1, second pass. Same Operator's Study vocabulary as the
   dark version, but flipped to a white canvas with mint rationed
   to a precision accent. Variable NAMES retained from the dark
   version so prototypes.css and HTML pages work unchanged.

   Where mint still earns its place:
     - Inside primary CTA pills (mint bg + navy text)
     - `<em>` accents on key hero phrases (£1m → £45m, etc.)
     - ICP "right for you" check bullets
     - Logo SVG strokes (nav + footer)

   Everything else that used to be mint is now navy ink:
     - Eyebrow chips, trust strip dots, process step numbers,
       belief em quotes, stat value connectors, story chapter
       labels, contact-line links, page atmosphere wash.

   The one place navy is preserved as a *surface*:
     - Closing CTA slab and booking panel — these become the single
       inverted dark moment per page (one strong brand throughline).
   ============================================================ */

:root {
  /* -- Brand (fixed, never changes) -- */
  --khulani-navy: #00273D;
  --khulani-mint: #18CB96;
  --khulani-white: #FFFFFF;

  /* -- Light theme surfaces.
     Names kept from the dark version for prototype compatibility. -- */
  --navy-deep:    #FAFAF6;   /* faint warm off-white — section wash behind cards */
  --navy-raised:  #FFFFFF;   /* card / panel background (was dark raised navy) */
  --navy-line:    rgba(0, 39, 61, 0.10);
  --navy-line-2:  rgba(0, 39, 61, 0.08);

  /* -- Mint interaction states (used sparingly) -- */
  --mint-hover:   #2EDDA8;
  --mint-deep:    #0FA277;
  --mint-glow:    rgba(24, 203, 150, 0.14);

  /* -- Foreground text on the white canvas (now navy ink) -- */
  --fg-primary:   #00273D;   /* headlines */
  --fg-body:      #1C3B4E;   /* body — slightly softer than pure navy */
  --fg-muted:     #6C8190;   /* secondary text */
  --fg-faint:     #A2B1BD;   /* timestamps, captions, meta */

  /* -- Inverted slab (the dark CTA + booking moments) -- */
  --inv-bg:       #00273D;
  --inv-bg-2:     #062335;
  --inv-fg:       #FFFFFF;
  --inv-fg-body:  #E6EDF2;
  --inv-fg-muted: #93A7B5;

  /* -- Type family. Nunito throughout to harmonise with the wordmark. -- */
  --font-display: 'Nunito', 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Nunito', 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -- Type scale (clamp() for responsive without media queries) -- */
  --t-display: clamp(3.25rem, 7vw + 0.5rem, 6rem);
  --t-h1:      clamp(2.5rem, 5vw + 0.5rem, 4.25rem);
  --t-h2:      clamp(1.875rem, 2.5vw + 1rem, 2.75rem);
  --t-h3:      clamp(1.25rem, 0.75vw + 1rem, 1.5rem);
  --t-lead:    clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-eyebrow: 0.6875rem;

  /* -- Weights -- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold: 600;
  --w-bold:    700;
  --w-extrabold: 800;

  /* -- Line heights -- */
  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-normal:  1.35;
  --lh-relaxed: 1.6;
  --lh-body:    1.75;

  /* -- Letter spacing -- */
  --ls-tight:   -0.022em;
  --ls-snug:    -0.012em;
  --ls-wide:    0.06em;
  --ls-eyebrow: 0.2em;

  /* -- Spacing -- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;

  /* -- Section vertical rhythm -- */
  --section-y: clamp(4rem, 8vw, 10rem);

  /* -- Layout -- */
  --container-max: 1240px;
  --container-px:  clamp(1.25rem, 4vw, 2.5rem);

  /* -- Radii -- */
  --r-xs:   6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-full: 999px;

  /* -- Border / hairlines (now navy at low alpha, not white) -- */
  --hairline:       1px solid var(--navy-line);
  --hairline-soft:  1px solid var(--navy-line-2);

  /* -- Motion -- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro:  180ms;
  --dur-base:   420ms;
  --dur-slow:   720ms;
  --dur-stage:  1100ms;

  /* -- Shadows. Soft and warm on light canvas. -- */
  --shadow-sm:    0 1px 2px rgba(0, 39, 61, 0.05);
  --shadow-md:    0 1px 2px rgba(0, 39, 61, 0.04), 0 12px 30px rgba(0, 39, 61, 0.07);
  --shadow-lg:    0 1px 2px rgba(0, 39, 61, 0.05), 0 24px 60px rgba(0, 39, 61, 0.10);
  --shadow-glow:  0 0 0 1px rgba(24, 203, 150, 0.22), 0 14px 36px rgba(24, 203, 150, 0.20);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}