/* KOROMAČ - design tokens
   Night service system: deep olive-black rooms, candle-cream type, fennel
   green details, one flour-paper menu card. Vollkorn + Gantari. */
:root {
  /* Surfaces (dark) */
  --color-bg: #181c12;           /* page background, olive near-black */
  --color-bg-2: #212818;         /* raised sections, panels */
  --color-bg-3: #12160d;         /* footer, deepest */
  --color-field: #1d2314;        /* form controls */

  /* Ink on dark */
  --color-ink: #ece7d6;          /* candle-cream text */
  --color-muted: #a5a88f;        /* secondary on dark */

  /* The menu card: flour paper */
  --color-paper: #f6f2e4;
  --color-ink-p: #2b281f;        /* text on paper */
  --color-muted-p: #7c7462;      /* secondary on paper */

  /* Accent: fennel green */
  --color-sage: #a9bd85;         /* on dark */
  --color-sage-deep: #5c6b42;    /* on paper */

  /* Lines */
  --color-line: rgba(236, 231, 214, .14);
  --color-line-strong: rgba(236, 231, 214, .3);
  --color-line-p: #ddd5bf;       /* hairlines on paper */

  /* Error, readable on dark */
  --color-err: #e0937c;

  /* Type */
  --font-display: "Vollkorn", "Georgia", serif;
  --font-body: "Gantari", "Avenir Next", -apple-system, sans-serif;

  --fs-200: .8125rem;
  --fs-300: .9375rem;
  --fs-400: 1.0625rem;
  --fs-500: 1.1875rem;
  --fs-600: clamp(1.3rem, 1.12rem + .55vw, 1.6rem);
  --fs-700: clamp(1.7rem, 1.35rem + 1.2vw, 2.4rem);
  --fs-800: clamp(2.1rem, 1.55rem + 2.1vw, 3.3rem);
  --fs-hero: clamp(2.5rem, 1.7rem + 3vw, 4.3rem);
  --fs-stat: clamp(2.8rem, 2rem + 2.8vw, 4.6rem);

  /* Caps utility */
  --caps-ls: .2em;

  /* Space */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 2.75rem; --s8: 3.5rem; --s9: 4.5rem; --s10: 6rem;

  /* Shape: sharp, table-linen plain */
  --radius: 0px;

  --container: 80rem;
  --header-h: 4.75rem;
}

/* Wide screens: let content breathe on 27"+ displays. Container grows and
   the percentage root scales type + spacing together while respecting user
   font-size preferences. Nothing below 1600px changes. */
@media (min-width: 1600px) {
  :root { --container: 1400px; }
  html { font-size: 106.25%; }
}
@media (min-width: 2000px) {
  :root { --container: 1560px; }
  html { font-size: 112.5%; }
}