/* ==========================================================================
   dnsherold.com – Design-Tokens
   Die einzige Quelle für Farbe, Schrift, Abstand und Bewegung.
   Begründungen und Kontrastwerte stehen in BRIEF.md.
   ========================================================================== */

:root {
  /* Palette aus dem Briefing */
  --sea: #163a40;    /* Hauptfarbe: tragende Flächen, Überschriften auf hell */
  --sand: #f1e9da;   /* Seitenhintergrund */
  --paper: #fbf8f3;  /* zweiter Hintergrund, Karten */
  --brass: #b98b4e;  /* Akzent: Linien, Details, Buttons auf Seeblau. Nie Text auf hell. */
  --ink: #211f1c;    /* Fließtext */

  /* Abgeleitete Töne (Kontrast geprüft) */
  --sea-deep: #102e33;     /* „unter dem Horizont“ */
  --sea-raised: #1e4a51;   /* Hover-Fläche für Seeblau-Buttons */
  --brass-ink: #836337;    /* Messing als Textfarbe auf hell, 4,6:1 auf Sand */
  --brass-light: #cba26a;  /* Hover für Messing-Buttons */
  --sand-soft: #cfc7b8;    /* Sekundärtext auf Seeblau, 7,3:1 */
  --ink-soft: #57524a;     /* Sekundärtext auf hell, 6,4:1 */
  --line-on-light: rgb(33 31 28 / 0.14);
  --line-on-sea: rgb(241 233 218 / 0.18);
  --line-strong-on-light: rgb(33 31 28 / 0.6); /* Rand von Bedienelementen, ~3,9:1 */
  --line-strong-on-sea: rgb(241 233 218 / 0.55);

  /* Feines Korn für Seeblau-Flächen, analog wie Filmkorn */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .92 0 0 0 0 .86 .3 0 0 0 -.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Schrift */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-text: "Switzer", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Skala nach Elements of Typographic Style (14, 18, 21, 24, 36, 48, 72),
     fließend zwischen 360 und 1440 px Breite */
  --step--1: 0.875rem;
  --step-0: clamp(1.0625rem, 1.0417rem + 0.0926vw, 1.125rem);
  --step-1: clamp(1.1875rem, 1.1458rem + 0.1852vw, 1.3125rem);
  --step-2: clamp(1.3125rem, 1.25rem + 0.2778vw, 1.5rem);
  --step-3: clamp(1.75rem, 1.5833rem + 0.7407vw, 2.25rem);
  --step-4: clamp(2.25rem, 2rem + 1.1111vw, 3rem);
  --step-5: clamp(2.75rem, 2.1667rem + 2.5926vw, 4.5rem);
  --step-display: clamp(3.5rem, 1.929rem + 7.857vw, 9rem);

  /* Abstände (großzügig) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --section-pad: clamp(4.5rem, 2.833rem + 7.407vw, 9.5rem);

  /* Raster */
  --header-h: clamp(4rem, 3.4rem + 2.6vw, 6rem);
  --page-max: 88rem;
  --gutter: clamp(1.25rem, 0.5rem + 3.333vw, 3.5rem);
  --measure: 62ch;

  /* Form: rund = anfassbar, Inhaltsflächen fast eckig */
  --radius-touch: 999px;
  --radius-surface: 4px;
  --radius-media: 2px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 160ms;
  --dur-base: 260ms;
  --dur-slow: 600ms;
}

/* Farbwelten: setzen nur Tokens. Den Hintergrund setzt jede Sektion selbst. */
.theme-sea {
  --bg: var(--sea);
  --fg: var(--sand);
  --fg-soft: var(--sand-soft);
  --heading: var(--sand);
  --accent: var(--brass);
  --rule: var(--brass);
  --line: var(--line-on-sea);
  --line-strong: var(--line-strong-on-sea);
  --focus: var(--brass);
  --btn-bg: var(--brass);
  --btn-bg-hover: var(--brass-light);
  --btn-fg: var(--ink);
}

.theme-sand,
.theme-paper {
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --heading: var(--sea);
  --accent: var(--brass-ink);
  --rule: var(--brass);
  --line: var(--line-on-light);
  --line-strong: var(--line-strong-on-light);
  --focus: var(--sea);
  --btn-bg: var(--sea);
  --btn-bg-hover: var(--sea-raised);
  --btn-fg: var(--sand);
}

.theme-sand { --bg: var(--sand); }
.theme-paper { --bg: var(--paper); }