/* ==========================================================================
   TOKENS — the only place raw values live.
   Concept: «Два ритма» — the site has two palettes, one per rhythm of the
   family's life. VILLAGE = day, cream + tomato. CITY = night, ink + window light.
   Semantic tokens below are remapped by html[data-rhythm].
   ========================================================================== */

:root {
  /* ---- Raw palette: VILLAGE (day) ---- */
  --v-bg: oklch(0.965 0.02 88);
  --v-surface: oklch(0.93 0.03 84);
  --v-raised: oklch(0.99 0.01 88);
  --v-text: oklch(0.25 0.035 50);
  --v-muted: oklch(0.42 0.035 55);
  --v-accent: oklch(0.52 0.19 33);
  --v-on-accent: oklch(0.985 0.01 88);
  --v-line: oklch(0.86 0.03 82);
  --v-edge: oklch(0.6 0.04 70);
  --v-hill-far: oklch(0.87 0.06 120);
  --v-hill-mid: oklch(0.79 0.09 128);
  --v-hill-near: oklch(0.67 0.11 135);
  --v-wall: oklch(0.95 0.025 85);
  --v-roof: oklch(0.52 0.19 33);
  --v-glow: oklch(0.86 0.14 88);
  --v-orb: oklch(0.8 0.15 68);

  /* ---- Raw palette: CITY (night) ---- */
  --c-bg: oklch(0.175 0.035 265);
  --c-deep: oklch(0.135 0.035 265);
  --c-surface: oklch(0.225 0.04 265);
  --c-raised: oklch(0.285 0.045 265);
  --c-text: oklch(0.95 0.012 90);
  --c-muted: oklch(0.8 0.025 265);
  --c-accent: oklch(0.86 0.16 88);
  --c-on-accent: oklch(0.2 0.035 265);
  --c-line: oklch(0.33 0.045 265);
  --c-edge: oklch(0.6 0.04 265);
  --c-tower-far: oklch(0.255 0.05 265);
  --c-tower-mid: oklch(0.225 0.05 268);
  --c-tower-near: oklch(0.2 0.045 270);
  --c-glow: oklch(0.86 0.16 88);
  --c-orb: oklch(0.94 0.03 90);

  /* ---- Semantic tokens (default = village / day) ---- */
  --bg: var(--v-bg);
  --surface: var(--v-surface);
  --raised: var(--v-raised);
  --text: var(--v-text);
  --muted: var(--v-muted);
  --accent: var(--v-accent);
  --on-accent: var(--v-on-accent);
  --line: var(--v-line);
  --edge: var(--v-edge);
  --ill-far: var(--v-hill-far);
  --ill-mid: var(--v-hill-mid);
  --ill-near: var(--v-hill-near);
  --ill-glow: var(--v-glow);
  --orb: var(--v-orb);
  --orb-x: 0px;
  --orb-y: 0px;
  --shadow-hue: 50;

  /* ---- Type ---- */
  --font-display: "Unbounded", "Onest", system-ui, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.35rem, min(10.4vw, 14svh), 7.25rem);
  --fs-h1: clamp(1.85rem, 4.6vw, 3.5rem);
  --fs-h2: clamp(1.4rem, 2.6vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-body-lg: clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-button: 1rem;
  --fs-numeral: clamp(2.6rem, 5vw, 4rem);
  --lh-tight: 1.04;
  --lh-head: 1.15;
  --lh-body: 1.55;

  /* ---- Spacing ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 62ch;
  --maxw: 76rem;
  --nav-h: 4.5rem;

  /* ---- Shape ---- */
  --r-sm: 0.625rem;
  --r-md: 1.125rem;
  --r-lg: 1.75rem;
  --r-pill: 999px;

  /* ---- Elevation (hue-tinted, never black) ---- */
  --shadow-1: 0 1px 2px oklch(0.3 0.05 var(--shadow-hue) / 0.12), 0 4px 14px oklch(0.3 0.05 var(--shadow-hue) / 0.08);
  --shadow-2: 0 2px 4px oklch(0.3 0.05 var(--shadow-hue) / 0.14), 0 14px 34px oklch(0.3 0.05 var(--shadow-hue) / 0.16);

  /* ---- Motion ---- */
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 700ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.6, 0, 0.8, 0.3);
}

/* ---- CITY / night remap ---- */
html[data-rhythm="city"] {
  color-scheme: dark;
  --bg: var(--c-bg);
  --surface: var(--c-surface);
  --raised: var(--c-raised);
  --text: var(--c-text);
  --muted: var(--c-muted);
  --accent: var(--c-accent);
  --on-accent: var(--c-on-accent);
  --line: var(--c-line);
  --edge: var(--c-edge);
  --ill-far: var(--c-tower-far);
  --ill-mid: var(--c-tower-mid);
  --ill-near: var(--c-tower-near);
  --ill-glow: var(--c-glow);
  --orb: var(--c-orb);
  --orb-x: -62vw;
  --orb-y: 0px;
  --shadow-hue: 265;
  --shadow-1: 0 1px 2px oklch(0.05 0.04 265 / 0.4), 0 4px 14px oklch(0.05 0.04 265 / 0.3);
  --shadow-2: 0 2px 4px oklch(0.05 0.04 265 / 0.45), 0 14px 34px oklch(0.05 0.04 265 / 0.4);
}

html[data-rhythm="village"] {
  color-scheme: light;
}

@media (max-width: 40rem) {
  :root { --nav-h: 4rem; }
  html[data-rhythm="city"] { --orb-x: -58vw; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}