/* Tokens: colors, type, spacing. Design changes start here. See docs/DESIGN.md ("Болото"). Pages also link ../fonts/fonts.css. */

:root {
  color-scheme: light dark;

  --font-serif: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* spacing, 4px step */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* type */
  --fs-pill: 1.05rem;
  --fs-small: 0.8125rem;
  --fs-nav: 1.1875rem;
  --fs-body: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
  --fs-lead: clamp(1.375rem, 1.05rem + 1.1vw, 2rem);
  --fs-display: clamp(2.5rem, 0.9rem + 5.2vw, 7rem);
  --fs-title: clamp(2.5rem, 1.2rem + 4.4vw, 4rem);
  --fs-row: clamp(2rem, 1rem + 3.4vw, 4rem);
  --fs-say: clamp(3.5rem, 1rem + 8vw, 6rem);
  --fs-menu: clamp(3.5rem, 2rem + 6vw, 6.25rem);
  --tracking: -0.016em;
  --measure: 62ch;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-mid: 420ms;

  /* shape */
  --r-pill: 9999px;
  --disc: 43px;
  --disc-zone: 59px;

  /* layout */
  --gutter: clamp(20px, 4.5vw, 64px);
  --container: 1280px;
  --section: clamp(64px, 9vw, 160px);

  /* scene geometry */
  --wh: clamp(120px, 24svh, 300px);

  --on-paper: #1F231C; /* ink that stays dark on --paper pills and discs in both themes */
}

/* light (default): fog over a swamp */
:root {
  --ink: #1F231C;
  --ink-soft: #3E433A;
  --paper: #F7F8F2;
  --sheet: #E3E5D3;
  --panel: #EEEFE6;
  --line: #C9CCBC;
  --dim: #B8BBAA;
  --accent: #C9A13B;
  --focus: #8A6A12;
  --sky: #DCE3D6;
  --plaster: #C9CDB4;
  --hill: #A9B48C;
  --mist: #D5D9CC;
  --water: #5E6B55;
  --mold: #3B3D2F;
  --spore: #E9EDCF;
}

/* dark "night bog": system preference unless the user chose explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ECEDE3;
    --ink-soft: #B9BCAD;
    --sheet: #0E100C;
    --panel: #161812;
    --line: #2A2D25;
    --dim: #4A4E43;
    --accent: #D8B24A;
    --focus: #D8B24A;
    --sky: #1A1F18;
    --plaster: #2C3226;
    --hill: #28301F;
    --mist: #20251C;
    --water: #151A13;
    --mold: #0B0D09;
    --spore: #C9D58A;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ECEDE3;
  --ink-soft: #B9BCAD;
  --sheet: #0E100C;
  --panel: #161812;
  --line: #2A2D25;
  --dim: #4A4E43;
  --accent: #D8B24A;
  --focus: #D8B24A;
  --sky: #1A1F18;
  --plaster: #2C3226;
  --hill: #28301F;
  --mist: #20251C;
  --water: #151A13;
  --mold: #0B0D09;
  --spore: #C9D58A;
}

:root[data-theme="light"] { color-scheme: light; }