/* ============================================================
   DISCOVER INTRO — DESIGN TOKENS
   The ONLY file where a hex literal may appear.
   Two-layer palette architecture per DESIGN.md §11.
   Components reference semantic roles only — never a palette
   token, never a raw hex.
   ============================================================ */

/* ---- LAYER 1 · PALETTES · the only place hex may live ------ */
:root,
[data-theme="approved"]{
  --p-dark:#10262e;   --p-dark-2:#16303a;  --p-deep:#1e3a6e;
  --p-action:#e0482f; --p-action-hover:#c43a23; --p-accent:#f2a900;
  --p-light:#f5f1ea;  --p-light-2:#e3d9cc; --p-ink:#161616; --p-muted:#6f6a63;
}
[data-theme="brand"]{
  --p-dark:#103C3B;   --p-dark-2:#051F22;  --p-deep:#051F22;
  --p-action:#F04E3E; --p-action-hover:#d33f30; --p-accent:#C8A163;
  --p-light:#F5F1EA;  --p-light-2:#E6DED2; --p-ink:#1E1E1E; --p-muted:#69727D;
}

/* ---- LAYER 2 · SEMANTIC ROLES · components use ONLY these --- */
:root{
  --bg-deep:var(--p-dark);        --surface-deep:var(--p-dark-2);
  --bg-navy:var(--p-deep);
  --bg-light:var(--p-light);      --surface-light:#fff;
  --action:var(--p-action);       --action-hover:var(--p-action-hover);
  --emphasis:var(--p-accent);     --text:var(--p-ink);
  --text-muted:var(--p-muted);    --divider:var(--p-light-2);
  --on-dark:#fff;

  /* lines / borders derived from the dark ground */
  --line:color-mix(in srgb, var(--p-dark) 14%, transparent);
  --line-on-dark:rgba(255,255,255,.12);
  --focus:var(--action);

  /* photo overlay for text-bearing images */
  --overlay-text:linear-gradient(180deg,
      color-mix(in srgb, var(--p-dark) 35%, transparent),
      color-mix(in srgb, var(--p-dark) 82%, transparent));

  /* ---- TYPE ---- */
  --font-display:'Jost', system-ui, -apple-system, sans-serif;
  --font-head:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'DM Sans', system-ui, -apple-system, sans-serif;

  --fs-wordmark:22px;
  --fs-eyebrow:12px;
  --fs-h1:clamp(2.75rem, 6.2vw, 5rem);
  --fs-h2:clamp(2rem, 3.6vw, 3rem);
  --fs-h3:clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-body:1.0625rem;         /* 17px */
  --fs-small:14px;
  --fs-button:13px;
  --fs-stat:clamp(1.75rem, 2.6vw, 2.5rem);

  /* ---- SPACE · 8px base ---- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --container:1180px;
  --measure:62ch;

  /* ---- SHAPE ---- */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-pill:999px;

  /* ---- ELEVATION · warm, never gray ---- */
  --e1:0 1px 2px rgba(16,38,46,.06), 0 2px 8px rgba(16,38,46,.04);
  --e2:0 4px 12px rgba(16,38,46,.08), 0 12px 32px rgba(16,38,46,.08);
  --e3:0 18px 50px rgba(16,38,46,.18);

  /* ---- MOTION ---- */
  --dur-fast:140ms; --dur:220ms; --dur-slow:420ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}