/* ==========================================================================
   TouchPoppy design tokens
   --------------------------------------------------------------------------
   The single source of truth for colour, 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.

   Mirrors the FilePoppy and ShowPoppy token files in structure and naming;
   only the accent ramp differs - TouchPoppy is rose.

   Load order matters:
     1. touchpoppy-tokens.css   these values
     2. page styles             layout built on them
   ========================================================================== */
:root{
  /* --- Brand ------------------------------------------------------------ */
  --navy:#0E1B2A;
  --navy-raised:#182B40;
  --rose:#D9377A;
  --rose-foot:#C42E6B;        /* foot of the CTA gradient */
  --rose-deep:#B62A64;        /* pressed / hover */
  --rose-text:#B0245E;        /* AA-safe rose for small text */
  --rose-light:#EC7FAB;
  --rose-lightest:#F9CFE0;
  --rose-soft:#FDF0F5;
  --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-text:#A9500C;
  --amber-soft:#FEF7EE;
  --amber-line:#F6E1C6;
  --red:#E5484D;
  --red-soft:#FDF5F4;
  --red-line:#F2DCD9;

  /* --- 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;
  --sp-20:80px; --sp-24:96px; --sp-30:120px; --sp-36:144px;
  --section-y:clamp(76px,7.2vw,116px);
  --gutter:clamp(20px,3vw,32px);
  --maxw:1200px;
  --maxw-doc:760px;
  --maxw-app:1080px;

  /* --- Shape ------------------------------------------------------------ */
  --pad-card:clamp(24px,2.5vw,34px);
  --pad-card-lg:clamp(28px,3.4vw,48px);
  --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,32,83,.3), 0 12px 24px -10px rgba(196,46,107,.46);
  --e-cta-hi:0 1px 2px rgba(146,32,83,.32), 0 20px 34px -12px rgba(196,46,107,.52);
  --hairline:inset 0 1px 0 rgba(255,255,255,.9);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ==========================================================================
   Semantic aliases - every alias points at a brand value above.
   ========================================================================== */
:root{
  --brand-navy:var(--navy);
  --brand-navy-raised:var(--navy-raised);
  --brand-rose:var(--rose);

  --surface-primary:var(--white);
  --surface-secondary:#F5F8FB;
  --surface-warm:var(--warm);
  --surface-accent:var(--rose-soft);
  --surface-inverse:var(--navy);

  --text-primary:var(--navy);
  --text-secondary:var(--slate);
  --text-accent:var(--rose-text);
  --text-inverse:#FFFFFF;
  --text-inverse-soft:#B9C6D6;

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

  --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:var(--rose);
  --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);
}