/* OKVIR - design tokens
   Highlighter system: off-white paper, charcoal ink, marker-yellow accents,
   grayscale photography. Sofia Sans (display) + Inter Tight (body). */
:root {
  /* Surfaces */
  --color-bg: #f4f4ef;           /* off-white page */
  --color-card: #fdfdfa;         /* raised cards */
  --color-black: #121316;        /* dark sections */
  --color-black-2: #0c0d10;      /* footer */
  --color-card-d: #1b1c20;       /* cards on dark */

  /* Ink */
  --color-ink: #17181b;          /* text on light */
  --color-muted: #64676d;        /* secondary on light */
  --color-paper: #f0efe9;        /* text on dark */
  --color-muted-d: #989ba2;      /* secondary on dark */

  /* Accent: the highlighter */
  --color-hl: #f2e93c;           /* marker yellow */
  --color-hl-deep: #e5da1f;      /* hover */

  /* Lines */
  --color-line: #dbdad1;
  --color-line-d: rgba(240, 239, 233, .16);

  /* Type */
  --font-display: "Sofia Sans", "Arial Narrow", sans-serif;
  --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-200: .8125rem;
  --fs-300: .9075rem;
  --fs-400: 1rem;
  --fs-500: 1.145rem;
  --fs-600: clamp(1.35rem, 1.15rem + .6vw, 1.75rem);
  --fs-700: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
  --fs-800: clamp(2.3rem, 1.6rem + 2.6vw, 3.9rem);
  --fs-hero: clamp(2.9rem, 1.8rem + 4.6vw, 6rem);
  --fs-giant: clamp(3.4rem, 2.2rem + 5vw, 6.5rem);

  /* 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 */
  --radius-pill: 999px;
  --radius-md: 12px;
  --radius-sm: 6px;

  --container: 74rem;
  --header-h: 4.5rem;
}

/* Wide screens (added 2026-07-13): 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%; }
}