/* ==========================================================================
   VINTAGE: design tokens. Copy this file into the project unchanged.
   --------------------------------------------------------------------------
   Rules:
   1. Never hardcode a value that exists here. Never add a token in a
      component file. If something is missing, add it HERE and nowhere else.
   2. Every variable is prefixed --vt-. Nothing un-prefixed is ours.
   3. --vt-gold means one thing only: "proven older than block H".
      See SKILL.md, Law 1. It is not a brand colour, button colour or link colour.
   4. Fonts are self-hosted from /assets/fonts. No Google Fonts, no CDN, ever.
   5. No em dashes in any copy the site shows. Use a full stop, a comma or a colon.
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL-1.1) ---------- */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../assets/fonts/big-shoulders-display-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Big Shoulders Stencil";
  src: url("../assets/fonts/big-shoulders-stencil-900.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans";  src: url("../assets/fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans";  src: url("../assets/fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans";  src: url("../assets/fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* ---------- Type ---------- */
  --vt-font-hero:    "Big Shoulders Stencil", "Big Shoulders Display", Impact, sans-serif; /* the hero headline ONLY */
  --vt-font-display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif; /* section heads, verdicts, counter, seal */
  --vt-font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace; /* labels, heights, txids, buttons */
  --vt-font-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif; /* paragraphs only */

  /* Display text is ALWAYS uppercase, weight 800 (hero 900), tracking 0.01em. */
  --vt-display-weight: 800;
  --vt-display-tracking: 0.01em;

  /* Scale (px): 12 · 14 · 16 · 20 · 24 · 32 · 48 · 72 · 112 */
  --vt-text-xs:   0.75rem;   /* 12: micro labels, ALWAYS mono caps */
  --vt-text-sm:   0.875rem;  /* 14: UI text, buttons */
  --vt-text-md:   1rem;      /* 16: body */
  --vt-text-lg:   1.25rem;   /* 20: lead paragraphs */
  --vt-text-xl:   1.5rem;    /* 24: window titles */
  --vt-text-2xl:  2rem;      /* 32: section heads */
  --vt-text-3xl:  3rem;      /* 48: page heads */
  --vt-text-4xl:  4.5rem;    /* 72: hero */
  --vt-text-5xl:  7rem;      /* 112: the counter, desktop only */

  --vt-leading-tight: 1.05;
  --vt-leading-snug:  1.25;
  --vt-leading-body:  1.6;
  --vt-tracking-caps: 0.14em; /* every mono caps label */

  /* ---------- Grid: every dimension is a multiple of 4 ---------- */
  --vt-1: 4px;  --vt-2: 8px;  --vt-3: 12px; --vt-4: 16px; --vt-5: 20px;
  --vt-6: 24px; --vt-8: 32px; --vt-10: 40px; --vt-12: 48px; --vt-16: 64px;
  --vt-20: 80px; --vt-24: 96px; --vt-32: 128px;

  --vt-content-max: 1184px; /* 296 × 4 */
  --vt-gutter: 16px;        /* mobile side gutter */
  --vt-gutter-lg: 32px;

  /* ---------- Geometry: the signature ---------- */
  --vt-radius:      12px;   /* windows, cards, inputs */
  --vt-radius-sm:   8px;    /* buttons, chips */
  --vt-radius-pill: 999px;  /* status pills and the seal only */
  --vt-notch:       16px;   /* ticket-button punch notch diameter */
  --vt-stub:        52px;   /* ticket-button stub width */
  --vt-border:      2px;    /* structural lines: every panel, every button */
  --vt-hairline:    1px;    /* dividers INSIDE a panel only */
  --vt-shadow-x:    4px;
  --vt-shadow-y:    4px;
  --vt-shadow-press: 1px;   /* offset while :active */

  /* ---------- Motion ---------- */
  --vt-ease:       cubic-bezier(.2, .8, .2, 1);  /* everything */
  --vt-ease-stamp: cubic-bezier(.3, 1.5, .5, 1); /* the seal ONLY */
  --vt-dur-1: 120ms;  /* press, hover */
  --vt-dur-2: 240ms;  /* reveal, swap */
  --vt-dur-3: 480ms;  /* window open, ruler scan step */
  --vt-dur-4: 900ms;  /* seal stamp, counter roll */
}

/* ---------- Colour: LIGHT ("paper"): default ---------- */
:root,
:root[data-theme="light"] {
  --vt-ground:   #E6D9BC;  /* page: manila archive folder, never white. Always under --vt-tex-paper */
  --vt-surface:  #FFFBF1;  /* windows, cards: bright card stock that lifts off the manila */
  --vt-sunk:     #DCCCA8;  /* inputs, wells, title bars at rest */
  --vt-ink:      #1C1A17;  /* text + every structural line. 12.41:1 on ground */
  --vt-ink-2:    #57503F;  /* secondary text. 5.72:1 on ground, 7.74:1 on surface. Minimum 14px */
  --vt-line:     #1C1A17;  /* = ink. Borders are ink-coloured, not grey */
  --vt-shadow:   #1C1A17;  /* hard offset colour */
  --vt-grid:     rgba(28, 26, 23, 0.09); /* blueprint rules in the background */
  --vt-grain-op: 0.22;                   /* paper fibre strength */

  --vt-gold:     #F4B728;  /* THE ONE IDEA. 1.29:1 on ground: FILL ONLY in light. Ink on gold = 9.63:1 */
  --vt-gold-ink: #7A5200;  /* gold-meaning TEXT on light ground, 4.95:1, 14px minimum. Only beside a gold fill */
  --vt-on-gold:  #1C1A17;  /* text placed on a gold fill */

  --vt-focus:    #1C1A17;
  color-scheme: light;
}

/* ---------- Colour: DARK ("darkroom") ---------- */
:root[data-theme="dark"] {
  --vt-ground:   #13120F;  /* warm near-black, never #000 */
  --vt-surface:  #1C1A16;
  --vt-sunk:     #26231E;
  --vt-ink:      #EFE9DC;  /* 15.48:1 on ground */
  --vt-ink-2:    #A39B8C;  /* 6.80:1 on ground */
  --vt-line:     #CFC6B4;  /* 11.05:1: softer than ink so panels don't glare */
  --vt-shadow:   #3B362D;  /* a raised ledge, lighter than ground */
  --vt-grid:     rgba(239, 233, 220, 0.05);
  --vt-grain-op: 0.10;

  --vt-gold:     #F4B728;  /* in dark, gold MAY be text: 10.39:1 on ground */
  --vt-gold-ink: #F4B728;
  --vt-on-gold:  #13120F;

  --vt-focus:    #F4B728;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vt-ground: #13120F; --vt-surface: #1C1A16; --vt-sunk: #26231E;
    --vt-ink: #EFE9DC; --vt-ink-2: #A39B8C; --vt-line: #CFC6B4; --vt-shadow: #3B362D;
    --vt-grid: rgba(239, 233, 220, 0.05); --vt-grain-op: 0.10;
    --vt-gold: #F4B728; --vt-gold-ink: #F4B728; --vt-on-gold: #13120F;
    --vt-focus: #F4B728; color-scheme: dark;
  }
}

/* ---------- Composite tokens (derived: do not override per component) ---------- */
:root {
  --vt-shadow-hard:  var(--vt-shadow-x) var(--vt-shadow-y) 0 0 var(--vt-shadow);
  --vt-shadow-small: 2px 2px 0 0 var(--vt-shadow);
  --vt-shadow-press: var(--vt-shadow-press) var(--vt-shadow-press) 0 0 var(--vt-shadow);
  --vt-edge:         var(--vt-border) solid var(--vt-line);
  --vt-edge-dashed:  var(--vt-border) dashed var(--vt-line);
  --vt-rule:         var(--vt-hairline) dashed var(--vt-ink-2);

  /* ---------- Textures: the only way to signal state besides gold ---------- */
  /* PENDING: a 2px ordered dither. "We are still checking." */
  --vt-tex-dither: radial-gradient(var(--vt-ink-2) 0.8px, transparent 0.9px) 0 0 / 4px 4px;
  /* NOT PROVABLE: 45° hatch. "This deposit cannot be dated before H." */
  --vt-tex-hatch: repeating-linear-gradient(135deg, var(--vt-ink-2) 0 1px, transparent 1px 6px);
  /* BLUEPRINT: page background rules, 24px grid */
  --vt-tex-grid:
    linear-gradient(var(--vt-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--vt-grid) 1px, transparent 1px) 0 0 / 24px 24px;
  /* PAPER: fibre grain from an inline SVG filter. No image request, nothing external. */
  --vt-tex-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .08  0 0 0 0 .05  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* STIPPLE: the cast shadow under line illustrations (ZecHub-style) */
  --vt-tex-stipple: radial-gradient(var(--vt-ink) 0.7px, transparent 0.8px) 0 0 / 5px 5px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --vt-dur-1: 0ms; --vt-dur-2: 0ms; --vt-dur-3: 0ms; --vt-dur-4: 0ms; }
}