/* ===========================================================
   tokens.css — fonts, type scale, colors
   The whole design system, in one place. Edit cautiously.
   =========================================================== */

/* -- Valkyrie A (serif body) ------------------------------------- */
@font-face {
  font-family: 'Valkyrie A';
  src: url('../fonts/valkyrie_a_regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Valkyrie A';
  src: url('../fonts/valkyrie_a_italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Valkyrie A';
  src: url('../fonts/valkyrie_a_bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Valkyrie A';
  src: url('../fonts/valkyrie_a_bold_italic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Valkyrie A Caps';
  src: url('../fonts/valkyrie_a_caps_regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Valkyrie A Caps';
  src: url('../fonts/valkyrie_a_caps_bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* -- Concourse (sans, for chrome) -------------------------------- */
@font-face {
  font-family: 'Concourse';
  src: url('../fonts/concourse_4_regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Concourse';
  src: url('../fonts/concourse_4_italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Concourse';
  src: url('../fonts/concourse_4_bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Concourse';
  src: url('../fonts/concourse_4_bold_italic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Concourse Caps';
  src: url('../fonts/concourse_4_caps_regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Concourse Caps';
  src: url('../fonts/concourse_4_caps_bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* -- Triplicate (mono, for code) --------------------------------- */
@font-face {
  font-family: 'Triplicate';
  src: url('../fonts/triplicate_a_code_regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Triplicate';
  src: url('../fonts/triplicate_a_code_italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Triplicate';
  src: url('../fonts/triplicate_a_code_bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Triplicate';
  src: url('../fonts/triplicate_a_code_bold_italic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* -- Design tokens ----------------------------------------------- */
:root {
  font-size: 20px;

  /* Font stacks. Three families, two of them in caps variants. */
  --font-serif:      'Valkyrie A', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-serif-caps: 'Valkyrie A Caps', 'Valkyrie A', 'EB Garamond', Garamond, serif;
  --font-sans:       'Concourse', system-ui, sans-serif;
  --font-sans-caps:  'Concourse Caps', 'Concourse', system-ui, sans-serif;
  --font-mono:       'Triplicate', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale. Three sizes plus a footnote mini — see CLAUDE.md. */
  --size-heading: 1.4rem;  /* h1 only */
  --size-body:    1.2rem;
  --size-chrome:  0.9rem;
  --size-mini:    0.75em;  /* footnote superscripts + backlinks (em, relative) */

  /* Letterspacing values, used across multiple elements. */
  --track-caps:   0.04em;  /* serif caps: headings, dt, th, etc. */
  --track-chrome: 0.08em;  /* sans caps chrome: masthead, toggles */
  --track-kicker: 0.14em;  /* sans caps eyebrow labels */

  /* Color — light theme (default): OS1 by sashimacs, after the films
     Her and Paris, Texas. Warm cream paper, espresso ink. The accent is
     RED — the emblem the two films share (the red shirt, Travis's cap, the
     neon) — NOT OS1's blue link face: blue is the pairing's field (Wenders'
     sky and motel glow), not its figure. Links rest on the red and cross to
     the blue on hover. Do not "restore" blue as the accent — that mistakes
     the source's link *function* for the films' emblem. */
  --bg:           #f8ede2;  /* base03 — warm cream */
  --bg-soft:      #f3e0ce;  /* base02 — code block tint */
  --ink:          #140705;  /* base3 — espresso, near-black */
  --ink-soft:     #514c48;  /* base1 — secondary text (dates, captions) */
  --accent:       #c3040f;  /* red — the films' shared emblem */
  --accent-hover: #325892;  /* blue — hover crosses to the Paris, Texas field */
  --rule:         #c8b9b6;  /* middle — hairlines, dividers */
}

/* Color — dark theme: Thetasigma dark (high contrast) by Skye, the
   successor to TransSide. Trans-flag colors, WCAG AAA faces: pink
   links that turn blue on hover. */
[data-theme="dark"] {
  --bg:           #04040C;  /* background — near-black, blue cast */
  --bg-soft:      #14142C;  /* bg-overlay — code block tint */
  --ink:          #FFD9FF;  /* foreground — pale pink-white */
  --ink-soft:     #8A87AA;  /* subtle — secondary text */
  --accent:       #FEA0DF;  /* interact-0 — pink, links */
  --accent-hover: #84BEFF;  /* static-0 — blue, link hover */
  --rule:         #24142C;  /* bg-overlay of the low-contrast sibling — hairlines */
}

/* Color — gray theme: Grey Paper by Kang-min Liu, an eink look.
   Greyscale plus one muted green for links. --ink-soft is the one
   derived value: a blend of the theme's fg and fg-light, because
   fg-light (#909090) fails text contrast on this bg. */
[data-theme="gray"] {
  --bg:           #d0d1d0;  /* bg — eink gray */
  --bg-soft:      #c0c0c0;  /* bg-dark — code block tint */
  --ink:          #111a22;  /* fg-dark — near-black slate */
  --ink-soft:     #4f545a;  /* fg↔fg-light blend — secondary text */
  --accent:       #224022;  /* fg-alt — muted green, links */
  --accent-hover: #111a22;  /* fg-dark — link hover sinks to ink */
  --rule:         #909090;  /* fg-light — hairlines (decorative only) */
}

/* No-JS fallback: honor the OS dark preference when toggles.js never
   ran to stamp data-theme. Values mirror [data-theme="dark"] above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:           #04040C;
    --bg-soft:      #14142C;
    --ink:          #FFD9FF;
    --ink-soft:     #8A87AA;
    --accent:       #FEA0DF;
    --accent-hover: #84BEFF;
    --rule:         #24142C;
  }
}