/* Hallmark tokens · Etalonplus · genre: editorial · theme: Vitrin (photographic + fixed rail)
 * Brand palette from logo — blue #305090/#5080C0 + amber #F09000. Dark-blue rail, light content.
 * Layout is the differentiator: fixed left rail + full-bleed photographic main column.
 * Display: Familjen Grotesk · Body: Figtree · Mono: IBM Plex Mono
 */
:root {
  --color-paper:      oklch(97.6% 0.006 82);
  --color-paper-2:    oklch(94.5% 0.009 80);
  --color-paper-3:    oklch(91% 0.011 78);
  --color-blue:       oklch(38% 0.10 264);      /* rail + headings (deep) */
  --color-blue-2:     oklch(58% 0.108 260);
  --color-blue-ink:   oklch(97% 0.01 250);
  --color-orange:     oklch(73% 0.163 62);
  --color-orange-2:   oklch(66% 0.165 55);
  --color-orange-ink: oklch(22% 0.03 60);
  --color-ink:        oklch(26% 0.018 70);
  --color-ink-2:      oklch(45% 0.02 262);
  --color-ink-3:      oklch(58% 0.018 68);
  --color-line:       oklch(88% 0.012 78);
  --color-line-2:     oklch(80% 0.016 76);
  --color-focus:      oklch(73% 0.163 62);

  --font-display: "Familjen Grotesk", system-ui, sans-serif;
  --font-body:    "Figtree", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --text-display: clamp(3rem, 7.5vw + 0.5rem, 7rem);
  --text-4xl:     clamp(2.25rem, 4vw + 0.6rem, 3.75rem);
  --text-3xl:     clamp(1.7rem, 2.2vw + 0.6rem, 2.6rem);
  --text-2xl:     clamp(1.4rem, 1.1vw + 0.7rem, 1.85rem);
  --text-xl:      1.3rem;
  --text-lg:      1.075rem;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;
  --text-2xs:     0.6875rem;

  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;
  --space-4xl: 8rem;

  --rail: 300px;
  --rule: 1px;
  --radius: 4px;
  --radius-lg: 10px;
  --wrap: 1040px;

  --dur-fast: 140ms;
  --dur-mid:  280ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.20, 1);
  --ease-in:  cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
}