/* ============================================================
   Kodama - tokens.css
   The design system. Colors, type, spacing - the single source
   of truth for Kodama's visual identity. Every page imports this
   first; change a value here and it changes everywhere.
   This file is intended to survive the eventual migration off
   static hosting: keep it framework-agnostic.
   ============================================================ */

/* Self-hosted (was Google Fonts) - same files, same latin-only
   subset the site actually uses (verified against every character
   in the current HTML/JS; no latin-ext or vietnamese glyphs appear
   anywhere), just served from this origin instead of Google's. */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/Bitter-Variable.ttf') format('truetype');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/Newsreader-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Newsreader-Italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
}

:root {
  /* --- surfaces (warm paper; never clinical white) --- */
  --paper:      #F6F1E8;  /* base background - warm paper */
  --paper-2:    #EDE6D9;  /* alternating section band */
  --sage:       #E6EFEA;  /* the "settle band" */
  --card:       #FCF9F3;  /* raised card surface - lighter than --paper */

  /* --- ink (near-black, warm; legible first) --- */
  --ink:        #17201C;  /* headings */
  --ink-soft:   #3E463F;  /* body text */
  --muted:      #5E665F;  /* captions, labels, scope text (AA on every surface above) */
  --line:       #DDD4C4;  /* hairlines */

  /* --- accent: the settled deep green (kept from the original identity).
         Structure - buttons, rules, links, active states, dark footer. --- */
  --accent:      #235045;
  --accent-deep: #1B3E36;  /* dark footer, hover states */
  --accent-soft: #2C6152;  /* AA on --paper when used as text; waves, secondary marks */

  /* --- highlight: clay. The one warm color - used sparingly
         for the thing you should look at: the hero turn, eyebrows,
         labels, underlines. Never for large fills. --- */
  --highlight:      #A8542B;  /* clay; AA on paper */
  --highlight-deep: #8E4522;  /* darker clay: eyebrows, small labels, links */
  --highlight-tint: #F3E4DB;  /* soft badge / callout background */

  /* --- type --- */
  --font-display: 'Bitter', Georgia, 'Times New Roman', serif;  /* slab serif, weight 500 for headings */
  --font-body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  /* --- rhythm --- */
  --measure: 38rem;                 /* comfortable reading column */
  --pad-y:   clamp(5rem, 11vw, 9rem); /* vertical section breathing room */
}