/* Amplify V4 — design tokens.
 * One source of truth for every page. Roles, not fonts; four neutrals; one gradient.
 * See V4-CREATIVE-BRIEF.md §6–8. */

:root {
  /* ---- neutrals (max four) ---- */
  --cream: #f4efe8;        /* default ground */
  --cream-2: #e9e2d7;      /* warm gray: secondary surfaces, rules */
  --surface: #fbf9f5;      /* panel surface on cream (one step lighter) */
  --ink: #0a0a0c;          /* type, dark bands */
  --ink-2: #5f5850;        /* secondary text on cream */

  /* derived rules (never a fifth neutral — ink at alpha) */
  --rule: rgba(10, 10, 12, 0.16);
  --rule-strong: rgba(10, 10, 12, 0.38);
  /* the same idea on ink: cream at alpha (2026-09-21, replaces the raw rgba literals that sat in pages.css) */
  --rule-on-ink: rgba(244, 239, 232, 0.14);
  --fill-on-ink: rgba(244, 239, 232, 0.08);
  --fill-on-ink-2: rgba(244, 239, 232, 0.22);

  /* ---- brand colour: the gradient, its three solid stops, and two tints on cream ---- */
  --grad: linear-gradient(103deg, #7c3aed 0%, #d6336c 52%, #f97316 100%);
  /* 2026-10-05: text-safe gradients. --grad ends on #f97316, which is 2.6:1 on cream as headline text and 2.8:1 under white
     button text. These end on --coral-text (and the button's middle on --magenta-text) so both clear the floor.
     Marks, rules and fills keep --grad. */
  --grad-text: linear-gradient(92deg, #7c3aed 0%, #d6336c 46%, #c2410c 100%);
  --grad-btn: linear-gradient(103deg, #7c3aed 0%, #b82b5b 52%, #c2410c 100%);
  --violet: #7c3aed;
  --magenta: #d6336c;
  --coral: #f97316;
  --magenta-text: #b82b5b; /* 2026-09-21: magenta for small text on cream. --magenta measures 4.0:1 on cream and 4.4:1 on surface, under the 4.5:1 floor; this stop clears 4.6:1 on every tint. Large type and marks keep --magenta. */
  --coral-text: #c2410c;   /* 2026-10-05: coral for small text. --coral measures 2.67:1 on surface; this stop clears 4.9:1 on surface and 4.5:1 on cream. Marks and fills keep --coral. */
  --magenta-on-ink: #f06595; /* 2026-10-05: magenta for small text on ink panels. --magenta-text drops to 3.33:1 there and --magenta to 4.29:1; this stop (already in the reach headline gradient) is 6.59:1. */
  --tint-coral: #f9e7db;    /* warm tint for panels that carry the offer */
  --tint-violet: #ece5f6;   /* cool tint for panels that carry the second vertical / questions */
  --glow-violet: rgba(124, 58, 237, 0.42);
  --glow-coral: rgba(249, 115, 22, 0.32);

  /* ---- platform chrome (recognizable, simplified; never Amplify purple) ---- */
  --reels: #e1306c;
  --shorts: #ff0033;

  /* ---- type roles ---- */
  --display: "Playfair Display", Georgia, serif; /* 2026-09-20: Levi chose it from the Base44 reference for every headline. Was Archivo. */
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Archivo", "Helvetica Neue", Arial, sans-serif; /* 2026-09-20: was IBM Plex Mono. Judah flagged every monospace label as reading like AI output; the token name stays so 20 call sites keep working */
  --serif: "Playfair Display", Georgia, serif;  /* 2026-09-20: one serif site-wide. Was Instrument Serif. */

  /* ---- scale ---- */
  --t-display: clamp(2.9rem, 6.25vw, 7.4rem);   /* hero headline, grotesk, ~7vw visual weight at expanded width */
  --t-h2: clamp(2rem, 3.6vw, 3.6rem);
  --t-poster: clamp(2.6rem, 5.2vw, 5.6rem);
  --t-number: clamp(3.4rem, 7.2vw, 8.4rem);
  --t-lead: clamp(1.15rem, 1.35vw, 1.45rem);
  --t-body: 1.0625rem;
  --t-small: 0.9rem;
  /* sub-headings, three sizes (2026-09-21, collapsed from fourteen) */
  --t-sub-lg: clamp(1.35rem, 1.8vw, 1.75rem);  /* phase titles, join steps, feature cards */
  --t-sub: 1.2rem;                               /* default interior h3, dt */
  --t-sub-sm: 1.05rem;                           /* compact card headings, panel heads */
  --t-mono: .8125rem;                           /* 2026-10-05 gate 2: 13px labels on every screen. Was .72rem (11.52px) on desktop, .8125rem on phones only */
  --descender-room: .12em;                       /* 2026-10-05: room under a masked headline line so g, p, y are not cut; under the 12% reveal offset, so a hidden line never peeks */
  --lh-body: 1.5;                                /* gate 7 (2026-10-04): one body line-height; phone pages that ran 1.35 and 1.4 take it */
  /* small text, three named steps (2026-09-21, collapsed from .95/.92/.9/.85/.82/.75 scattered through pages.css) */
  --t-body-sm: 0.95rem;                          /* secondary body: table cells, card copy, list rows */
  --t-note: 0.85rem;                             /* notes, captions, chips, fine print */

  /* ---- layout ---- */
  --pad: clamp(1rem, 2vw, 2.25rem);      /* page inset: slim, the page runs edge to edge */
  --gutter: clamp(1rem, 1.7vw, 1.5rem);
  --cols: 12;
  --nav-h: 4.5rem;
  --section-pad: 4rem;   /* 2026-10-05 gate 5: one vertical padding for every homepage section and the reach band; 2.75rem on phones (below) */
  --measure: 54ch;       /* 2026-10-05 gate 7: reading width. 45 to 75 characters per line, since a "ch" (the zero) is wider than an average letter */

  /* ---- surfaces ---- */
  --radius-ui: 6px;       /* buttons, chips */
  --radius-panel: 20px;   /* information panels */
  --radius-clip: 14px;    /* social clips (feed-native corner) */
  --pad-card: 1.5rem 1.6rem;     /* one inset for every interior card and dark panel (2026-09-21, was six values) */
  --pad-card-sm: 1.2rem 1.3rem;  /* the same card on a phone */
  --sheet-max: none;      /* full-bleed: sections fill the viewport edge to edge */
  --shadow-object: 0 24px 48px -28px rgba(10, 10, 12, 0.55), 0 6px 14px -8px rgba(10, 10, 12, 0.35);
  --shadow-float: 0 30px 60px -30px rgba(10, 10, 12, 0.7), 0 10px 22px -12px rgba(10, 10, 12, 0.5);
  --shadow-float-hover: 0 40px 70px -30px rgba(10, 10, 12, 0.75), 0 14px 26px -12px rgba(10, 10, 12, 0.55);
  --shadow-lift: 0 14px 30px -20px rgba(10, 10, 12, 0.45); /* hover lift on pressable cards */

  /* ---- motion (entrance-only outside the two set pieces) ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* strong ease-out: entrances, reveals */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* on-screen movement */
  --dur-ui: 180ms;
  --dur-reveal: 460ms;
}

@media (max-width: 860px) {
  :root { --section-pad: 2.75rem; }
}