/* Hallmark · tokens · theme: studied-DNA (source: olxtoko.zip, user-supplied layout)
 * paper-band: dark · display-style: high-contrast serif (Noto Serif TC 900) · accent-hue: warm gold 95°
 * Every colour, font, space, radius, easing and duration in site.css references a token below.
 */
:root {
  /* ── colour · paper ───────────────────────────── */
  --color-paper: oklch(0% 0 0);                          /* page black, carried from the reference */
  --color-surface: oklch(19.6% 0 0);                     /* rows, FAQ items */
  --color-surface-2: oklch(23.1% 0 0);                   /* hovered rows */
  --color-tile: oklch(15% 0 0);                          /* logo tiles */
  --color-glass: oklch(0% 0 0 / 0.62);                   /* glass card over the glow */
  --color-dock: oklch(0% 0 0 / 0.9);                     /* fixed bottom bar */

  /* ── colour · ink ─────────────────────────────── */
  --color-ink: oklch(94.6% 0 0);
  --color-ink-muted: oklch(71.5% 0 0);
  --color-ink-on-accent: oklch(0% 0 0);

  /* ── colour · accent (gold #FFD700 from the reference) ── */
  --color-accent: oklch(88.7% 0.182 95.3);
  --color-accent-hi: oklch(91.7% 0.155 98);
  --color-accent-deep: oklch(72.8% 0.138 89.7);
  --color-accent-line: oklch(88.7% 0.182 95.3 / 0.42);
  --color-accent-line-soft: oklch(88.7% 0.182 95.3 / 0.18);
  --color-glow: oklch(82.7% 0.171 80.5 / 0.30);
  --color-glow-strong: oklch(82.7% 0.171 80.5 / 0.60);   /* CTA shockwave halo */
  --color-ray: oklch(88.7% 0.182 95.3 / 0.055);
  --color-transparent: oklch(0% 0 0 / 0);

  /* ── colour · CTA light ───────────────────────── */
  --color-glint: oklch(99.5% 0.02 98 / 0.95);            /* streak of light across a gold face */
  --color-glint-dim: oklch(90% 0.12 96 / 0.34);          /* the same streak over black (outlined CTAs, dock) */

  /* ── colour · banner button (red candy core in a gold rim) ──
   * The banner is gold on black, so a gold button sinks into it; the core takes the red of the
   * banner's 777 reels instead. Swap these four --color-hot* values to recolour the core. */
  --color-hot: oklch(50% 0.2 25);                        /* core */
  --color-hot-hi: oklch(58% 0.21 27);                    /* lit top of the core */
  --color-hot-deep: oklch(36% 0.14 22);                  /* shaded foot of the core */
  --color-hot-shade: oklch(24% 0.09 20);                 /* letterpress under the label */
  --color-hot-ink: oklch(98.5% 0.012 95);                /* label; 5.9:1 on the core behind it */
  --color-gloss: oklch(100% 0 0 / 0.3);                  /* candy gloss across the top half */
  --color-bezel-hi: oklch(97% 0.06 100);                 /* specular edge of the gold rim */
  --color-bezel-lo: oklch(55% 0.11 75);                  /* bronze underside of the rim */
  --color-bezel-rim: oklch(22% 0.04 70);                 /* hairline that lifts the rim off the picture */
  --color-shade: oklch(0% 0 0 / 0.55);                   /* drop shadow under the button */
  --color-ray-hot: oklch(90% 0.16 92 / 0.5);             /* starburst spoke */
  --color-spark: oklch(99.5% 0.03 98);                   /* sparkle core */

  /* ── colour · focus ───────────────────────────── */
  --color-focus: oklch(100% 0 0);

  /* ── type ─────────────────────────────────────── */
  --font-display: "Noto Serif TC", "Noto Serif CJK TC", "Songti TC", "PMingLiU", serif;
  --font-body: "Noto Sans TC", "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  --text-2xs: 0.6875rem;   /* 11 */
  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.875rem;     /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-md: 1.0625rem;    /* 17 */
  --text-lg: 1.25rem;      /* 20 */
  --text-xl: 1.5rem;       /* 24 */
  --text-2xl: 1.875rem;    /* 30 */
  --text-num: 3.5rem;      /* 56 — tally numeral */
  --text-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  --text-display: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem);
  --text-cta: clamp(1.1875rem, 0.85rem + 1.5vw, 1.875rem);  /* banner button label, 19 → 30 */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  --leading-tight: 1.3;
  --leading-snug: 1.55;
  --leading-body: 1.85;
  --tracking-cjk: 0.02em;
  --tracking-display: 0.01em;

  /* ── space (4 pt) ─────────────────────────────── */
  --space-3xs: 0.25rem;    /* 4 */
  --space-2xs: 0.5rem;     /* 8 */
  --space-xs: 0.75rem;     /* 12 */
  --space-sm: 1rem;        /* 16 */
  --space-md: 1.5rem;      /* 24 */
  --space-lg: 2rem;        /* 32 */
  --space-xl: 3rem;        /* 48 */
  --space-2xl: 4rem;       /* 64 */
  --space-3xl: 6rem;       /* 96 */

  /* ── size ─────────────────────────────────────── */
  --container: 72rem;
  --bar-top: 2.75rem;      /* sticky entry bar */
  --bar-bottom: 4rem;      /* fixed dock */
  --logo-lg: 9rem;
  --logo-md: 3.5rem;
  --logo-sm: 2.75rem;
  --logo-xs: 1.75rem;
  --mark: 2.5rem;

  /* ── radius & rules ───────────────────────────── */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-round: 50%;
  --radius-pill: 999px;
  --rule-hair: 1px;
  --rule-strong: 2px;
  --rule-bezel: 0.16em;    /* the banner button's gold rim: 3px at 19px, 5px at 30px */

  /* ── motion ───────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --blur-glass: 18px;

  /* ── motion · CTA ─────────────────────────────── */
  --dur-glint: 720ms;      /* hover / focus: one pass of light */
  --dur-fanfare: 2200ms;   /* arrival: one beat (thump, shockwave, glint), then rest */
  --dur-sweep: 1400ms;     /* the dock's long pass */
  --dur-spin: 16s;         /* banner button, pointer resting on it: one full turn of the starburst */
  --dur-twinkle: 1600ms;   /* banner button, pointer resting on it: one sparkle cycle */
  --cta-plays: 2;          /* beats per arrival; 2 × 2.2 s stays under WCAG 2.2.2's 5 s. "infinite" loops while in view */
  --stagger: 110ms;        /* cascade down the five picks */
  --lift: -0.1875rem;      /* hover rise, 3px */
  --dart: 0.25rem;         /* arrow nudge, 4px */
  --press-scale: 0.96;
}