tokens.css

/* ============================================================
   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 */
  --measure-hero-copy: 596px; /* hero copy column — ONE width on every page (was 596 with an
                                 image / 720 without, which changed the headline measure
                                 between tabs). Matches the 1.12fr column at 1440. */

  /* Hero content height — this token on every page, never the copy, the CTA count, or the
     image's intrinsic size. Set to the tallest real copy stack measured in place at
     --measure-hero-copy with the reserved CTA row: /privacy at 343px, rounded up to the next
     8pt step. Anything lower and privacy alone grows past the floor, which is exactly the
     content-driven height this system exists to prevent. The 3:2 frame renders ~315px, so the
     remainder below it is a uniform ~29px sitewide. */
  --hero-h: 344px;

  /* 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; } }
/* The floor has to clear the tallest copy AT THAT WIDTH, and copy grows as the column narrows.
   Measured tallest copy across all ten pages: 343px at 1440/1280, 341 at 1200, 349 at 1100,
   365 at 1040, 389 at 1025 (the narrowest two-column width). One floor for the whole range
   would therefore have to be 392 everywhere, padding the desktop hero by 48px of dead space.
   So the two-column band gets its own floor. This is a breakpoint, not a page exception —
   every page still shares one height at any given viewport, which is the invariant that
   matters. If hero copy changes, re-measure both bands. */
@media (min-width: 1025px) and (max-width: 1200px) { :root { --hero-h: 392px; } }

/* Heroes stack at 1024px (see the .cvh-grid rule in app.css — this breakpoint must match it),
   so the two-column height floor no longer applies: the copy and the frame each take their
   natural height and a floor would only add dead space under a stacked hero. */
@media (max-width: 1024px) { :root { --hero-h: 0px; --measure-hero-copy: none; } }