/*
 * Design tokens — the machine-readable half of DESIGN.md.
 *
 * DESIGN.md is authority; this file is its transcription. When they disagree,
 * DESIGN.md wins and this file is wrong. Nothing here may be invented: a value
 * that is not in DESIGN.md does not belong in this file, and a surface that
 * needs a value this file does not have needs a DESIGN.md decision first.
 *
 * Loaded before app.css so component rules can consume the variables.
 */

/* ---- Literata ----------------------------------------------------------
 * Same-origin only. The CSP is `default-src 'self'`; a font CDN fails
 * SILENTLY and the page renders in the Georgia fallback with no error.
 * Variable: opsz 7-72, wght 200-900. `tnum` ships for tabular numerals.
 */
@font-face {
  font-family: 'Literata';
  src: url('/vendor/literata/literata-var.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  /* Latin + Latin-Extended-A and the punctuation German and French need. */
  unicode-range: U+0000-00FF, U+0100-017F, U+2013-2014, U+2018-201E, U+2026,
                 U+2039-203A, U+00AB, U+00BB, U+20AC, U+2212;
}

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --c-ground: #FCFBF9;
  --c-surface: #FFFFFF;
  --c-sink: #F4F1EC;
  --c-sink-hover: #F0EBE2;
  --c-skeleton: #EEE9E0;
  --c-ink: #17150F;
  --c-ink-2: #3E3931;
  --c-muted: #6B655B;
  --c-hairline: #E6E1D8;
  --c-hairline-strong: #CEC7B9;
  --c-brown: #5A4A35;
  --c-green: #22503A;
  --c-green-bright: #2E6A4C;
  --c-green-tint: #EBF1EC;
  --c-yellow: #D9A62B;
  --c-yellow-tint: #FAF0D8;
  --c-yellow-ink: #7A5A12;
  --c-info: #39587A;
  --c-info-tint: #EAF0F6;
  --c-alarm: #A5462A;
  --c-alarm-tint: #FAF1ED;

  /* ---- Type ------------------------------------------------------------
   * Serif = editorial content and names read as content.
   * Sans  = controls, form values, metadata, tables, operational data.
   * The scale is CLOSED. A size off it is drift, not a decision.
   */
  --f-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --f-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --t-eyebrow: 0.68rem;
  --t-micro: 0.78rem;
  --t-meta: 0.85rem;
  --t-small: 0.92rem;
  --t-body: 1rem;
  --t-lead: 1.15rem;
  --t-section: 1.32rem;
  --t-page: 1.95rem;
  --t-recipe: 2.3rem;
  /* Headings — and only headings — step down at narrow viewports. */
  --t-section-narrow: 1.4rem;
  --t-page-narrow: 1.6rem;
  --t-recipe-narrow: 1.8rem;

  /* ---- Shape ----------------------------------------------------------- */
  --r-none: 0;
  --r-hairline: 2px;
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---- Space ----------------------------------------------------------- */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 40px;
  /* The comment gutter is permanently reserved so opening a panel never
   * re-lays-out the document and costs the reader their place. */
  --s-gutter: 46px;

  /* Minimum interactive target. No exceptions for "compact" controls. */
  --target: 44px;
}

/* Headings step down together, so the relationship between them holds. */
@media (max-width: 700px) {
  :root {
    --t-section: var(--t-section-narrow);
    --t-page: var(--t-page-narrow);
    --t-recipe: var(--t-recipe-narrow);
  }
}

/* Optical sizing is most of why Literata was chosen: a 2.3rem title and a
 * paragraph of method should be different drawings, not one scaled. */
:root {
  font-optical-sizing: auto;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}