/* ────────────────────────────────────────────────────────────────
   wetterstein-reisen · design tokens
   Single Source of Truth (Schritt 01 · claude.ai/design)
   ──────────────────────────────────────────────────────────────── */
:root {
  /* brand red ─────────────────────────────────────────────── */
  --red-700: #8d171b;
  --red-600: #b11f24;   /* primary, Wetterstein-Rot */
  --red-500: #cf2a30;
  --red-100: #fbeaeb;
  --red-050: #fdf5f5;

  /* neutrals · warm getönt ──────────────────────────────── */
  --ink-1000: #0d0c0b;  /* hero / cover backgrounds */
  --ink-900:  #16140f;  /* body text on light */
  --ink-700:  #2a2620;
  --ink-500:  #5b554b;
  --ink-300:  #9a9389;
  --ink-200:  #c5beb2;
  --ink-100:  #e7e1d4;
  --ink-050:  #f2ede1;
  --ink-025:  #f8f4ea;
  --paper:    #f6f2e7;  /* default body bg, warm offwhite */
  --paper-pure: #ffffff;

  /* akzent · eis-blau (sparsam, nur Linien-Welt) ───────── */
  --ice-700: #2b3f4a;
  --ice-500: #4d6c7e;

  /* typo stacks ───────────────────────────────────────────── */
  --font-sans:  "Switzer", "Helvetica Neue", "Noto Sans SC", system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, "Noto Serif SC", serif;
  --font-mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* fluid scale · clamp(min, fluid, max) ─────────────────── */
  --fs-display-xl: clamp(3.25rem, 2.0rem + 5.5vw, 7.5rem);
  --fs-display-l:  clamp(2.5rem,  1.6rem + 3.8vw, 5.25rem);
  --fs-h1:         clamp(2.0rem,  1.4rem + 2.4vw, 3.75rem);
  --fs-h2:         clamp(1.5rem,  1.15rem + 1.4vw, 2.5rem);
  --fs-h3:         clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  --fs-lead:       clamp(1.125rem, 1.0rem + 0.4vw, 1.3125rem);
  --fs-body:       1.0625rem;   /* 17 px */
  --fs-small:      0.9375rem;
  --fs-mono:       0.8125rem;
  --fs-kicker:     0.75rem;

  --lh-display: 1.02;
  --lh-h:       1.12;
  --lh-body:    1.55;

  /* spacing · 4 px base ───────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* radii ─────────────────────────────────────────────────── */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 14px;
  --r-pill: 999px;

  /* shadows · funktional, nicht dekorativ ───────────────── */
  --sh-1: 0 1px 0 rgb(22 20 15 / .05), 0 1px 2px rgb(22 20 15 / .04);
  --sh-2: 0 1px 0 rgb(22 20 15 / .06), 0 8px 24px -10px rgb(22 20 15 / .12);
  --sh-3: 0 24px 60px -20px rgb(22 20 15 / .25);

  /* layout ────────────────────────────────────────────────── */
  --measure:   68ch;
  --container: 1280px;
  --gutter:    clamp(20px, 4vw, 56px);

  /* focus ring ───────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgb(177 31 36 / .35);

  /* ── Kompatibilitäts-Aliase ──────────────────────────────
     Mappt die alten --ws-* Namen der seiten-spezifischen
     Inline-Styles (Unterseiten) auf die kanonischen Tokens,
     damit alles dieselbe warme Palette nutzt. */
  --ws-red:        var(--red-600);
  --ws-red-dark:   var(--red-700);
  --ws-black:      var(--ink-1000);
  --ws-charcoal:   var(--ink-900);
  --ws-gray-900:   var(--ink-900);
  --ws-gray-700:   var(--ink-500);
  --ws-gray-500:   var(--ink-300);
  --ws-gray-300:   var(--ink-200);
  --ws-gray-100:   var(--ink-050);
  --ws-white:      var(--paper-pure);

  --radius-sm:   var(--r-3);
  --radius-md:   var(--r-4);
  --radius-pill: var(--r-pill);

  --shadow-sm:   var(--sh-1);
  --shadow-md:   var(--sh-2);
  --shadow-dark: var(--sh-3);

  --border-soft:      1px solid var(--ink-100);
  --border-soft-dark: 1px solid rgb(255 255 255 / .12);
}