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

   Seit 12.09.2026 eine durchgehende Fläche: Die ganze Seite liegt im Seeblau,
   wie Anthropic und Ffern ihre eine Grundfarbe durchziehen. Sand und Papierweiß
   sind keine Flächen mehr, sondern die Schrift darauf. Messing bleibt der eine
   Akzent und kommt nur dort vor, wo man etwas tun kann.
   ========================================================================== */

:root {
  /* Palette aus dem Briefing */
  --sea: #163a40;    /* die Fläche, überall */
  --sand: #f1e9da;   /* Fließtext, 10,2:1 auf Seeblau */
  --paper: #fbf8f3;  /* „Weiß“: Überschriften, Logo, 11,6:1 */
  --brass: #b98b4e;  /* Akzent: Buttons, Fokus, Unterstriche. 4,0:1, also nie Fließtext */
  --ink: #211f1c;    /* nur noch Schrift auf Messing, 5,4:1 */

  /* Abgeleitete Töne, alle aus demselben Blau oder Sand gemischt */
  --sea-deep: #102e33;     /* Filmfläche: dasselbe Blau, eine Spur tiefer */
  --brass-light: #cba26a;  /* Hover für Messing, 5,2:1 */
  --sand-soft: #cfc7b8;    /* Sekundärtext, 7,3:1 */

  /* Semantische Tokens: Komponenten benutzen nur diese */
  --bg: var(--sea);
  --fg: var(--sand);
  --fg-soft: var(--sand-soft);
  --heading: var(--paper);
  --accent: var(--brass);
  --rule: rgb(241 233 218 / 0.22);             /* Kapitel-Haarlinie */
  --line: rgb(241 233 218 / 0.16);             /* Trennlinien, Kartenränder */
  --line-strong: rgb(241 233 218 / 0.55);      /* Rand von Bedienelementen, 4,2:1 */
  --focus: var(--brass-light);
  --btn-bg: var(--brass);
  --btn-bg-hover: var(--brass-light);
  --btn-fg: var(--ink);

  /* Feines Korn auf der Fläche, 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;
  --radius-film: clamp(0.5rem, 0.3rem + 0.9vw, 1rem);

  /* 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;
}