/* hanzen design tokens
   Paper + ink + one jade accent, and three lifted surfaces (card, band, gold
   marker). Every colour on the site derives from these. Hex lives only here. */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.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: "Hanzen Hanzi";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/noto-serif-sc-subset.woff2") format("woff2");
}

:root {
  /* paper theme (default) */
  --paper: #F4F1EA;
  --band: #FBF9F4;
  --card: #FFFDF8;
  --ink: #1C1B18;
  --accent: #1F8A5B;
  --accent-ink: #FFFFFF;
  --gold: #B8933F;
  --grain: .035;
  --grain-blend: multiply;
  --glass: rgba(244, 241, 234, .8);
  --shadow: 0 24px 60px rgba(28, 27, 24, .12), 0 2px 6px rgba(28, 27, 24, .05);
  --shadow-sm: 0 8px 24px rgba(28, 27, 24, .08);
  --shadow-hover: 0 6px 20px -12px rgba(28, 27, 24, .12);
  color-scheme: light;

  /* derived
     --muted   readable secondary text (>= 4.5:1 on paper and card in both themes)
     --faint   decorative only: the "+" between parts, dots. never body text
     --accent-text  the accent when it carries small text */
  --line: color-mix(in oklab, var(--ink) 12%, transparent);
  --line-strong: color-mix(in oklab, var(--ink) 30%, transparent);
  --muted: color-mix(in oklab, var(--ink) 64%, transparent);
  --faint: color-mix(in oklab, var(--ink) 46%, transparent);
  --accent-text: color-mix(in oklab, var(--accent) 80%, var(--ink));
  /* the primary button fill: a hair deeper than the accent so white text clears 4.5:1 */
  --accent-fill: color-mix(in oklab, var(--accent) 86%, var(--ink));
  --accent-on-dark: #3DBA82;
  --accent-soft: color-mix(in oklab, var(--accent) 16%, var(--paper));
  --accent-glow: color-mix(in oklab, var(--accent) 34%, transparent);

  /* type */
  --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-zh: "Hanzen Hanzi", "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", "PingFang SC", serif;

  --t-display: clamp(2.6rem, 1.6rem + 4vw, 5.25rem);
  --t-h1: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --t-h2: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --t-lead: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  --t-body: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  --t-small: .9375rem;
  --t-glyph: clamp(7rem, 2rem + 28vw, 22rem);

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.77, 0, .175, 1);
  --d-fast: 150ms;
  --d-ui: 300ms;
  --d-reveal: 500ms;
  --d-scene: 600ms;
  --d-slow: 1000ms;

  /* layout, 8px base */
  --gutter: clamp(16px, 4vw, 64px);
  --col: 72rem;
  --read: 36rem;
  --r-card: 24px;
  --r-tile: 20px;
  --r-btn: 999px;
  --r-pill: 999px;
  --r-chip: 12px;
  --r-phone: 32px;
  --r-img: 16px;
  --nav-h: 64px;
  --section: clamp(5rem, 11vw, 9rem);
  --head-gap: clamp(2rem, 5vw, 3.5rem);
  --card-pad: 28px;
  --grid-gap: 20px;
}

/* ink theme: system preference unless the visitor chose */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="paper"]) {
    --paper: #131311;
    --band: #181816;
    --card: #1D1D1A;
    --ink: #EDE9E0;
    --accent: #3DBA82;
    --accent-ink: #0F1F17;
    --gold: #D9B96A;
    --grain: .05;
    --grain-blend: screen;
    --glass: rgba(19, 19, 17, .8);
    --shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-hover: 0 6px 20px -12px rgba(0, 0, 0, .6);
    --accent-text: var(--accent);
    --accent-fill: var(--accent);
    color-scheme: dark;
  }
}
:root[data-theme="ink"] {
  --paper: #131311;
  --band: #181816;
  --card: #1D1D1A;
  --ink: #EDE9E0;
  --accent: #3DBA82;
  --accent-ink: #0F1F17;
  --gold: #D9B96A;
  --grain: .05;
  --grain-blend: screen;
  --glass: rgba(19, 19, 17, .8);
  --shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-hover: 0 6px 20px -12px rgba(0, 0, 0, .6);
  --accent-text: var(--accent);
  --accent-fill: var(--accent);
  color-scheme: dark;
}

/* phones: card padding and gaps tighten, the gutter keeps its 16px floor */
@media (max-width: 640px) {
  :root { --card-pad: 20px; --grid-gap: 14px; }
}

/* reduced motion: durations collapse, the stage stops being sticky (see stage.css) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms;
    --d-ui: 0ms;
    --d-reveal: 0ms;
    --d-scene: 150ms;
    --d-slow: 150ms;
  }
}