/* Hallmark · tokens · theme: studied-DNA (source: legacy daenischenhagen112.de, Newses theme)
 * paper oklch(93.5% 0.006 265) · accent oklch(52% 0.2 27) crest red · Rubik 700 + Atkinson Hyperlegible Next
 * axes: light / geometric-sans / warm
 */

@font-face {
  font-family: "Rubik";
  src: url("../fonts/rubik-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces: grey page, white cards, navy bars (as on the legacy site) */
  --color-paper:      oklch(93.5% 0.006 265);
  --color-surface:    oklch(99.2% 0.002 265);
  --color-surface-2:  oklch(96.4% 0.006 265);
  --color-rule:       oklch(80% 0.012 265);
  --color-rule-strong: oklch(62% 0.015 265);

  --color-ink:        oklch(21% 0.025 272);
  --color-ink-2:      oklch(37% 0.02 272);

  --color-navy:       oklch(23% 0.05 278);
  --color-navy-2:     oklch(17.5% 0.04 278);
  --color-navy-3:     oklch(31% 0.055 278);
  --color-on-navy:    oklch(97% 0.005 265);
  --color-on-navy-2:  oklch(85% 0.015 265);

  /* Accent: red from the municipal crest. Text-safe on white (≥ 5:1). */
  --color-accent:      oklch(52% 0.2 27);
  --color-accent-deep: oklch(45% 0.18 27);
  --color-accent-wash: oklch(96% 0.02 27);
  --color-on-accent:   oklch(99% 0.004 27);

  /* Focus: crest blue on light surfaces, signal yellow on navy */
  --color-focus:       oklch(47% 0.17 255);
  --color-focus-dark:  oklch(89% 0.17 100);

  --color-scrim:       oklch(17.5% 0.04 278 / 0.82);
  --color-scrim-soft:  oklch(17.5% 0.04 278 / 0.5);
  --color-scrim-clear: oklch(17.5% 0.04 278 / 0);

  /* Type: Rubik for the masthead and headings, Atkinson Hyperlegible Next
     (designed for low-vision readers) for everything people read */
  --font-display: "Rubik", "Arial Black", "Helvetica Neue", sans-serif;
  --font-body:    "Atkinson Hyperlegible Next", "Verdana", "Segoe UI", sans-serif;

  /* Five sizes, ratio 1.25; the base never drops below 18px */
  --text-sm:   1rem;
  --text-base: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-md:   clamp(1.3rem, 1.2rem + 0.4vw, 1.5rem);
  --text-lg:   clamp(1.6rem, 1.4rem + 0.8vw, 2rem);
  --text-xl:   clamp(1.85rem, 1.3rem + 2.4vw, 3rem);

  --leading-body: 1.6;
  --leading-tight: 1.15;
  --measure: 65ch;

  /* 4pt spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;

  --gutter: clamp(1rem, 3vw, 2rem);
  --container: 75rem;
  --tap: 3rem;

  --radius-card: 6px;
  --radius-control: 6px;

  --rule-hair: 1px;
  --rule-heavy: 2px;

  --shadow-card: 0 1px 2px oklch(21% 0.025 272 / 0.06), 0 4px 16px oklch(21% 0.025 272 / 0.05);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
}