/* ============================================================
   Dalgo — design tokens. The SINGLE source of truth.
   Variables only. One :root. No component styles here.
   Loaded before app.css on every page.
   ============================================================ */
:root {
  /* Surfaces */
  --surface-0: #FFFFFF;
  --surface-1: #F4FBF9;
  --surface-2: #F6F8FA;

  /* Ink */
  --ink: #0A2540;
  --ink-2: #48607A;
  --on-dark: #EAF2F0;
  --hairline-on-dark: rgba(255,255,255,.45); /* ghost-button border on navy bands — 3.8:1 vs --navy */

  /* Teal */
  --teal: #00BFA6;
  --teal-hover: #00A892;
  --teal-ink: #007A6B;

  /* Navy */
  --navy: #0A2540;
  --navy-2: #16243F;

  /* Lines & focus */
  --hairline: rgba(10,37,64,.10);
  --focus: #0A66C2;

  /* Semantic accents (audit: previously hardcoded in app.css/JSX) */
  --error: #C43D4B;
  /* Pending/amber status (one palette — used by pricing + FAQ tags) */
  --pending-ink: #9A6A2E;
  --pending-bg: #FBF1E3;
  --pending-border: #F0DCBE;
  /* Sticky-note (hero collage decoration) */
  --note-bg: #FFF7C2;
  --note-border: #F0E098;
  --note-ink: #5C4D12;
  --note-accent: #A8901F;
  /* WhatsApp brand greens (fixed brand colours, tokenised for reuse) */
  --wa-green: #25D366;
  --wa-dark: #075E54;
  --wa-mid: #128C7E;
  /* Initial-avatar palette (used in JSX avatar stacks) */
  --avatar-blue: #2A6FDB;
  --avatar-rust: #C4703A;
  --avatar-pine: #0F5C52;
  --avatar-violet: #6D4FC4;

  /* Elevation — layered navy-tinted ramp with the 1px hairline ring baked into
     the last layer (P2/P6). Cards drop their separate border and use these. */
  --shadow-sm:
    rgba(10,37,64,.05) 0 2px 4px -2px,
    rgba(10,37,64,.05) 0 1px 1px -.5px,
    var(--hairline) 0 0 0 1px;
  --shadow-card:
    rgba(10,37,64,.04) 0 12px 12px -6px,
    rgba(10,37,64,.05) 0 4px 6px -3px,
    rgba(10,37,64,.06) 0 1px 1px -.5px,
    var(--hairline) 0 0 0 1px;
  --shadow-pop:
    rgba(10,37,64,.06) 0 28px 32px -14px,
    rgba(10,37,64,.05) 0 10px 12px -6px,
    rgba(10,37,64,.06) 0 2px 2px -1px,
    var(--hairline) 0 0 0 1px;
  /* legacy aliases → the ramp, so existing shadow-md/lg usages lift too */
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-pop);

  /* Motion (P5) — one curve, one family of durations */
  --ease: cubic-bezier(.215,.61,.355,1);
  --spring: linear(0,.039 1.6%,.157 3.4%,1.03 12.4%,1.174 15%,1.243 17.8%,1.227 21.4%,1.003 30.8%,.94 36.6%,1.015 55.2%,1);
  --dur-fast: 150ms;
  --dur: 240ms;
  --dur-slow: 320ms;
  --t: var(--dur) var(--ease);

  /* Radius — scales with element size (P4) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Reading measure */
  --measure: 66ch;

  /* Heading measures — display headings wrap to ~2 lines. Expressed in ch so the
     cap scales WITH the font size rather than as a fixed magic number. */
  --measure-heading: 30ch;   /* centered section titles & CTA headings (40px tier) */
  --measure-heading-wide: 34ch; /* section titles inside the widened .section-head-center */
  --measure-hero-sub: 58ch;  /* hero subhead / lede */

  /* Fluid page-hero H1 — scales with the viewport so long headlines fit ~2 lines
     on laptops while keeping full 56px impact where the column is wide enough. */
  --fs-hero: clamp(38px, 1rem + 2.2vw, 56px);

  /* Spacing — 8pt scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* Section rhythm (composition principles §2) — exactly three values:
     white sections / tinted+dark chapter bands / slim strips */
  --section-pad: 56px;      /* white sections → 112px between two whites */
  --section-pad-lg: 80px;   /* tinted / dark chapter bands */
  --section-pad-sm: 32px;   /* slim strips + quote interstitials */
  --container: 1200px;
}
@media (max-width: 768px) { :root { --section-pad: 40px; --section-pad-lg: 56px; --section-pad-sm: 24px; } }