/* ============================================================
   Zarf — design tokens
   Single source of truth for runtime CSS. Mirrors theme.json.
   Loaded before zarf.css and any block stylesheet.
   ============================================================ */

:root {
  /* --- Palette: ground --- */
  --bg-0: #0a0a0d;
  --bg-1: #111114;
  --bg-2: #16161a;

  /* --- Palette: ink --- */
  --ink-100:  #f5f1e8;
  --ink-60:   #8e8878;
  --ink-line: #2a2a30;

  /* --- Palette: gold --- */
  --gold-1: #b88a3e;
  --gold-2: #e6c987;
  --gold-3: #fff4cf;
  --gold-4: #8c6320;

  /* --- Foil: applied as background-image, animated via @keyframes zarf-foil --- */
  --gold-foil: linear-gradient(
    100deg,
    var(--gold-4) 0%,
    var(--gold-1) 20%,
    var(--gold-2) 40%,
    var(--gold-3) 50%,
    var(--gold-2) 60%,
    var(--gold-1) 80%,
    var(--gold-4) 100%
  );

  /* --- Type families --- */
  --ff-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* --- Type scale (fluid clamp; mirror theme.json) --- */
  --fs-xs:  clamp(0.75rem, 0.7vw + 0.6rem, 0.85rem);
  --fs-sm:  clamp(0.875rem, 0.4vw + 0.78rem, 1rem);
  --fs-md:  clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
  --fs-lg:  clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --fs-xl:  clamp(1.5rem, 2vw + 1rem, 2.25rem);
  --fs-2xl: clamp(2rem, 3vw + 1rem, 3.25rem);
  --fs-3xl: clamp(2.75rem, 5vw + 1rem, 5rem);
  --fs-4xl: clamp(3.5rem, 7vw + 1rem, 7rem);

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.6;

  --tracking-tight: -0.01em;
  --tracking-body:   0.005em;
  --tracking-wide:   0.18em;

  /* --- Space scale (4px base) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 128px;

  /* --- Radii (sharp luxe) --- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;

  /* --- Layout --- */
  --container:   1200px;
  --container-w: 1440px;
  --gutter:      clamp(20px, 4vw, 48px);

  /* --- Motion --- */
  --ease-out:  cubic-bezier(.2, .7, .2, 1);
  --ease-in:   cubic-bezier(.6, .04, .9, .4);
  --dur-fast:  180ms;
  --dur-base:  300ms;
  --dur-slow:  600ms;
  --dur-foil:  12s;

  /* --- Elevation --- */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* --- Focus ring --- */
  --focus-color:  var(--gold-1);
  --focus-offset: 2px;
  --focus-width:  2px;
}

/* --- Reduced motion: kill durations + foil animation --- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-foil: 0ms;
  }
}