/* ══════════════════════════════════════════════════════════════════════════
   ESP Heroes — theme tokens.
   Dark editorial ground, warm gold accent, liquid-glass surfaces.
   Every contrast pair below was measured, not eyeballed; ratios are noted.
   ══════════════════════════════════════════════════════════════════════ */

/* ── fonts: self-hosted, no third-party request ──────────────────────────── */
/* Playfair Display — display type only. Variable 400–900. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('fonts/playfair-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* Inter — body, UI, data. Variable 100–900. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* ── ground ────────────────────────────────────────────────────────────
     Not pure black: #08070B keeps a warm cast so the gold sits in the same
     family, and avoids the smeared OLED look of #000 under a blur. */
  --ink-000:#08070B;      /* page ground */
  --ink-050:#0D0C12;      /* raised ground */
  --ink-100:#12111A;      /* glass base */
  --ink-200:#1B1A25;      /* card base */
  --ink-300:#282634;

  /* ── type ──────────────────────────────────────────────────────────────
     Warm off-whites. Ratios against --ink-000. */
  --text:#EDEAE3;         /* 16.7:1  AAA */
  --text-muted:#A8A29A;   /*  7.9:1  AAA — body-safe */
  --text-dim:#8F8981;     /*  5.3:1  AA  — labels, meta */

  /* ── accent: warm gold ─────────────────────────────────────────────────
     10.3:1 on the ground, so it is safe for body-size text as well as for
     rules and marks — unusual for an accent, and the reason it can carry
     this much of the page. */
  --gold:#E3B341;
  --gold-lift:#F2CE6B;    /* 13.2:1 — hover, highlights */
  --gold-deep:#A87F22;
  --gold-shade:#5C4512;
  --gold-ghost:rgba(227,179,65,.12);
  --gold-line:rgba(227,179,65,.28);

  /* ── secondary field: cool counterweight to the gold ───────────────── */
  --cyan:#5BC8D8;
  --violet:#8C7BE0;
  --ember:#E8734A;

  /* ── glass ─────────────────────────────────────────────────────────────
     Two recipes. `pane` is the frosted card; `veil` is the nav/overlay.
     Both carry a light top edge so they read as glass, not as flat panels. */
  --glass-pane:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 42%,rgba(255,255,255,.045));
  --glass-veil:rgba(13,12,18,.62);
  --glass-edge:rgba(255,255,255,.14);
  --glass-edge-soft:rgba(255,255,255,.07);
  --glass-blur:blur(20px) saturate(160%);
  --glass-blur-lg:blur(34px) saturate(180%);

  /* ── depth ─────────────────────────────────────────────────────────── */
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 10px 30px -8px rgba(0,0,0,.7);
  --shadow-lg:0 30px 70px -20px rgba(0,0,0,.85);
  --shadow-gold:0 20px 60px -22px rgba(227,179,65,.5);

  /* ── type scale — fluid, 1.25 ratio anchored at 16px ─────────────────── */
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-xs:0.75rem;    /* 12 — legal, meta */
  --t-sm:0.8125rem;  /* 13 — labels */
  --t-base:1rem;     /* 16 — body floor on mobile, per the a11y rule */
  --t-md:1.0625rem;  /* 17 */
  --t-lg:1.1875rem;  /* 19 */
  --t-xl:clamp(1.375rem,1.1rem + 1.2vw,1.75rem);
  --t-2xl:clamp(1.75rem,1.3rem + 2.1vw,2.5rem);
  --t-3xl:clamp(2.25rem,1.5rem + 3.4vw,3.75rem);
  --t-4xl:clamp(2.25rem,.5rem + 4.6vw,4.5rem);

  /* ── space — 4px base ────────────────────────────────────────────────── */
  --s-1:.25rem;  --s-2:.5rem;   --s-3:.75rem;  --s-4:1rem;
  --s-5:1.5rem;  --s-6:2rem;    --s-7:3rem;    --s-8:4rem;
  --s-9:6rem;    --s-10:8rem;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --measure:1240px;
  --measure-text:68ch;   /* the 65–75 char reading rule */

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:34px; --r-pill:999px;

  /* ── motion ────────────────────────────────────────────────────────────
     Liquid Glass wants long, fluid curves (400–600ms) for morphing, and
     short ones (160–260ms) for anything the pointer touches directly —
     interface feedback must never feel laggy just because the theme is slow. */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --d-fast:160ms;
  --d-ui:240ms;
  --d-slow:520ms;
  --d-fluid:640ms;

  /* ── z-index scale — 10/20/30/50, nothing ad-hoc ─────────────────────── */
  --z-bg:0;
  --z-content:10;
  --z-sticky:20;
  --z-overlay:30;
  --z-cursor:50;
  --z-intro:60;

  color-scheme:dark;
}