/* ==========================================================================
   ShowPoppy design tokens
   --------------------------------------------------------------------------
   The single source of truth for color, type, space, shape and elevation.
   Every public page loads this first, then its own stylesheet. Nothing else
   may declare :root, or the values drift apart page by page.

   Load order matters:
     1. showpoppy-tokens.css   these values
     2. page or intake styles  layout built on them
     3. showpoppy-prefs.css    visitor overrides, wins on specificity
   ========================================================================== */
:root{
  /* --- Brand ------------------------------------------------------------ */
  /* Retuned 2026-08-30 to the ShowPoppy Updates palette, so the marketing
     side and the app read as one product. Values only — no name changes, and
     the previous values are recorded here rather than deleted:
         --navy        #0E1B2A -> #0B1730
         --navy-raised #182B40 -> #16233D
         --orange      #F15A2A -> #FF4F18
         --orange-foot #DE4A1B -> #E64510
         --orange-deep #C9420F -> #E03E00

     NOT changed, deliberately: the "ShowPoppy Orange" card accent in
     showpoppy-branding-preview.js is still #F15A2A. That value is SAVED
     CONFIGURATION — it is the color agents have already chosen and that
     their sent cards are drawn in. Editing it would silently restyle every
     card already out in the world, which is a product decision and not a
     palette one. */
  --navy:#0B1730;
  --navy-raised:#16233D;
  --orange:#FF4F18;
  --orange-foot:#E64510;      /* foot of the CTA gradient */
  --orange-deep:#E03E00;      /* pressed / hover */
  --orange-text:#C0400F;      /* AA-safe orange for small text */
  --amber-text:#A9500C;
  --orange-soft:#FEF1EB;
  --warm:#FAF9F6;
  --white:#FFFFFF;
  --slate:#5F6B7A;
  --slate-soft:#677284;
  --line:#E4E7EC;
  --line-soft:#EFF1F4;
  --green:#159447;
  --green-deep:#0F7A3A;
  --green-soft:#F0F8F3;
  --green-line:#CFE7DA;
  --amber:#E97B20;
  --amber-soft:#FEF7EE;
  --amber-line:#F6E1C6;
  --red:#E5484D;
  --red-soft:#FDF5F4;
  --red-line:#F2DCD9;
  /* Informational blue — used by the app's status chips/banners.
     Not part of the marketing palette, but it lives here because this
     file is the single source of truth for tokens. */
  --blue-text:#1F5490;
  --blue-soft:#EEF4FC;
  --blue-line:#CFE0F5;


  /* --- Type ------------------------------------------------------------- */
  --font-display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-display:clamp(37px,3.85vw,54px);
  --fs-h2:clamp(29px,2.85vw,40px);
  --fs-h3:clamp(19px,1.35vw,22px);
  --fs-lead:clamp(18px,1.2vw,21px);
  --fs-body:clamp(17px,1.05vw,18px);
  --fs-sm:16px;
  --fs-label:14px;

  /* --- Space ------------------------------------------------------------ */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --section-y:clamp(76px,7.2vw,116px);
  --gutter:clamp(20px,3vw,32px);
  --maxw:1200px;

  /* --- Shape ------------------------------------------------------------ */
  --pad-card:clamp(24px,2.5vw,34px);
  --pad-card-lg:clamp(28px,3.4vw,48px);
  /* One four-step scale. A page running ten different corner radii reads as
     assembled rather than designed, even to someone who cannot name why. */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:18px; --r-pill:999px;

  /* --- Elevation. Navy-tinted, layered, never heavy. --------------------- */
  --e-1:0 1px 2px rgba(14,27,42,.05);
  --e-2:0 1px 2px rgba(14,27,42,.04), 0 10px 26px -16px rgba(14,27,42,.28);
  --e-3:0 2px 4px rgba(14,27,42,.04), 0 34px 64px -30px rgba(14,27,42,.38);
  --e-cta:0 1px 2px rgba(146,44,15,.3), 0 12px 24px -10px rgba(222,74,27,.46);
  --e-cta-hi:0 1px 2px rgba(146,44,15,.32), 0 20px 34px -12px rgba(222,74,27,.52);
  --hairline:inset 0 1px 0 rgba(255,255,255,.9);
  --ease:cubic-bezier(.2,.7,.3,1);
}
/* Doc and intake pages sit on a narrower measure than the landing page. */
:root{
  --maxw-doc:760px;
  --maxw-app:1080px;
}

/* ==========================================================================
   Semantic aliases
   --------------------------------------------------------------------------
   Purely additive. Every alias points at a brand value declared above, so
   nothing that already consumes the raw names shifts by a single pixel or
   hex digit. New work should reach for the semantic name: it says what the
   value is *for*, which is what keeps a palette honest as a page grows.
   ========================================================================== */
:root{
  /* Brand */
  --brand-navy:var(--navy);
  --brand-navy-raised:var(--navy-raised);
  --brand-orange:var(--orange);

  /* Surfaces. Ordered lightest to heaviest. */
  --surface-primary:var(--white);
  --surface-secondary:#F5F8FB;   /* cool blue-grey page tint */
  --surface-warm:var(--warm);
  --surface-accent:var(--orange-soft);
  --surface-inverse:var(--navy);

  /* Text */
  --text-primary:var(--navy);
  --text-secondary:var(--slate);
  --text-accent:var(--orange-text);      /* AA-safe orange, small text only */
  --text-inverse:#FFFFFF;
  --text-inverse-soft:#B9C6D6;           /* 7.1:1 on --navy */

  /* Lines */
  --border-subtle:var(--line);
  --border-soft:var(--line-soft);
  --border-strong:#D3DBE4;
  --border-inverse:rgba(255,255,255,.16);

  /* Status. Green is reserved for confirmed product states, never for sale. */
  --success:var(--green);
  --success-text:var(--green-deep);
  --success-soft:var(--green-soft);
  --success-line:var(--green-line);
  --warning:var(--amber);
  --warning-text:var(--amber-text);
  --warning-soft:var(--amber-soft);
  --warning-line:var(--amber-line);
  --danger:var(--red);
  --danger-soft:var(--red-soft);
  --danger-line:var(--red-line);

  /* Focus. One ring everywhere, drawn in brand orange with a surface-colored
     offset so it stays visible on white, on tint and on navy alike. */
  --focus:var(--orange);
  --focus-ring:0 0 0 2px var(--surface-primary), 0 0 0 4px var(--focus);
  --focus-ring-inverse:0 0 0 2px var(--navy), 0 0 0 4px var(--focus);
}

/* Top of the spacing scale. The file already carried 4 through 64; the
   landing page works at section rhythm, which needs the larger steps. */
:root{
  --sp-20:80px; --sp-24:96px; --sp-30:120px; --sp-36:144px;
}