/* ============================================================
   DYNANCA — DESIGN TOKENS
   Structural language adapted from a premium travel-site reference
   (fluid clamp() type/space scale, container+gutter system, eyebrow
   labels, pill buttons, sticky/scrolled header, waypoint trackers,
   numbered list-rows) — re-skinned entirely around a code-first,
   navy/blue/gold "Dynanca" identity, in both a light and a
   dark theme sharing one token contract.
   ============================================================ */

:root{
  --r-xl:24px; --r-lg:18px; --r-md:13px; --r-sm:9px;
  --fd:"Segoe UI","Helvetica Neue",ui-sans-serif,system-ui,-apple-system,Arial,sans-serif;
  --fb:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fm:ui-monospace,"SFMono-Regular","Cascadia Code","Fira Code",Consolas,"Liberation Mono","Courier New",monospace;
  --container:1180px;
  --container-wide:1320px;
  --gutter:clamp(18px,4.2vw,32px);
  --header-h:70px;
  --sec-pad:clamp(64px,8vw,112px);
  --dur-fast:.18s; --dur:.28s; --dur-slow:.45s;
  --ease:cubic-bezier(.2,.65,.2,1);

  /* ---------- Type scale (semantic — components read from these,
     not raw px, so the whole site's hierarchy moves together) ----------
     Level 1: hero/section/donation headlines  → .h1 / .h2 / --fs-display
     Level 2: subheadings, CTA labels           → .h3 / --fs-cta
     Level 3: body / supporting paragraphs      → --fs-body / --fs-support
     Level 4: metadata, labels, badges          → --fs-meta / --fs-label */
  --fs-display-lg:clamp(38px,5.4vw,64px);
  --fs-display:clamp(27px,3.4vw,42px);
  --fs-support:clamp(16px,1.05vw,17.5px);
  --fs-body:17px;
  --fs-nav:15.5px;
  --fs-meta:14px;
  --fs-label:12px;

  /* ---------- Spacing rhythm (fluid) ---------- */
  --sp-1:8px; --sp-2:14px; --sp-3:20px; --sp-4:clamp(24px,3vw,32px);
  --sp-5:clamp(36px,4.5vw,52px); --sp-6:clamp(52px,6vw,80px);

  /* ---------- Surface / elevation hierarchy ---------- */
  --sh-0:0 1px 0 rgba(10,15,28,.04);
}

/* ---------- Light theme (default) ---------- */
:root,
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f6f2;
  --paper:#ffffff;
  --surface-2:#eef1f7;
  --surface-3:#e6eaf3;
  --code-bg:#0f1420;
  --code-ink:#e9edf7;
  --code-line:rgba(233,237,247,.10);
  --night:#0b0f1a;
  --night-2:#121a2c;
  --night-3:#182242;
  --on-dark:rgba(244,246,251,.86);
  --on-dark-muted:rgba(244,246,251,.6);
  --on-dark-line:rgba(244,246,251,.13);
  --ink:#0d1424;
  --body:#454c60;
  --muted:#697089;
  --line:rgba(13,20,36,.11);
  --line-strong:rgba(13,20,36,.19);
  --muted-strong:#5a6178;
  --accent:#3560c4;
  --accent-2:#7fa8ff;
  --accent-rgb:53,96,196;
  --accent-soft:rgba(53,96,196,.10);
  --gold:#a8721f;
  --gold-2:#e0a83f;
  --gold-rgb:224,168,63;
  --gold-soft:rgba(224,168,63,.14);
  /* --gold itself fails WCAG AA for text on the light theme's pale
     surfaces (~3.6-3.8:1) — --gold-ink is the same hue darkened for
     any gold *text*/icon use on a light background; dark theme's
     --gold is already bright enough (8:1+) so it doubles as its own ink. */
  --gold-ink:#8a5c14;
  --good:#1c7a4d;
  --good-soft:rgba(28,122,77,.12);
  --bad:#b23b3b;
  --bad-soft:rgba(178,59,59,.10);
  --sh-1:0 1px 2px rgba(10,15,28,.05),0 10px 24px rgba(10,15,28,.06);
  --sh-2:0 22px 54px rgba(10,15,28,.16);
  --scrollbar:rgba(13,20,36,.22);
  --feature-bg:linear-gradient(180deg,#fffdf8,#fff9ee);
  --feature-border:rgba(var(--gold-rgb),.35);
  --feature-sh:0 1px 2px rgba(10,15,28,.04),0 18px 40px rgba(168,114,31,.12);
}

/* ---------- Dark theme ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1320;
  --paper:#161c2b;
  --surface-2:#1a2133;
  --surface-3:#212a40;
  --code-bg:#0b0e17;
  --code-ink:#e7ebf6;
  --code-line:rgba(233,237,247,.08);
  --night:#0a0d16;
  --night-2:#0d1220;
  --night-3:#121a2c;
  --on-dark:rgba(244,246,251,.88);
  --on-dark-muted:rgba(244,246,251,.6);
  --on-dark-line:rgba(244,246,251,.12);
  --ink:#eef1f8;
  --body:rgba(238,241,248,.78);
  --muted:rgba(238,241,248,.56);
  --line:rgba(238,241,248,.11);
  --line-strong:rgba(238,241,248,.20);
  --muted-strong:rgba(238,241,248,.56);
  --accent:#7ea2f2;
  --accent-2:#9db8f7;
  --accent-rgb:126,162,242;
  --accent-soft:rgba(126,162,242,.14);
  --gold:#e5b45c;
  --gold-2:#efc57c;
  --gold-rgb:229,180,92;
  --gold-soft:rgba(229,180,92,.14);
  --gold-ink:#e5b45c;
  --good:#4bbf85;
  --good-soft:rgba(75,191,133,.14);
  --bad:#e0716f;
  --bad-soft:rgba(224,113,111,.14);
  --sh-1:0 1px 2px rgba(0,0,0,.22),0 10px 24px rgba(0,0,0,.30);
  --sh-2:0 24px 60px rgba(0,0,0,.48);
  --scrollbar:rgba(238,241,248,.22);
  --feature-bg:linear-gradient(180deg,#1c2033,#191c2c);
  --feature-border:rgba(var(--gold-rgb),.28);
  --feature-sh:0 1px 2px rgba(0,0,0,.25),0 22px 48px rgba(0,0,0,.4);
}