/* AI Værk — tokens.css: Design-Variablen und Fonts. Lade-Reihenfolge: 1/5 */

/* AI Værk — Relaunch stylesheet.
   Warm near-white editorial system. Switzer = brand voice, Onest = editorial voice.
   Sans only. No all-caps. Color lives in restrained pastel plates and the aurora. */

/* ── Fonts ─────────────────────────────────────────────── */
/* Zwei Schnitte je Schrift (scripts/fonts-subset.py, Manifest
   scripts/fonts-subset.json): der Kern (Latin-1, Satzzeichen, €, Pfeile,
   Mathe) wird vorgeladen und deckt DE, EN und SV ab; "-ext" (Latin
   Extended, Kombinationszeichen, Griechisch …) laedt der Browser nur, wenn
   eine Seite eines seiner Zeichen zeigt. Die Ext-Regel steht NACH dem Kern:
   bei gleicher Familie prueft der Browser die zuletzt deklarierte zuerst.
   Die unicode-range muss zum Manifest passen (font-subset-check.php). */
@font-face {
  font-family: "Switzer";
  src: url("/assets/fonts/switzer.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/assets/fonts/switzer-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0137, U+0139-0148, U+014C-0151, U+0154-017E, U+0192, U+0218-021B, U+0237, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0326, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+1EF2-1EF3, U+2113, U+2126, U+212E;
}
@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017E, U+0218-021B, U+0237, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1E9E, U+1EF2-1EF3, U+2117;
}

/* Kein graues Tap-Highlight auf iOS/Android — die Komponenten haben
   eigene Auswahl-/Active-Zustaende. */
html {
  -webkit-tap-highlight-color: transparent;
}

/* ── Tokens ────────────────────────────────────────────── */
:root {
  --paper: #faf8f4;
  --paper-deep: #f2efe8;
  --card: #f4f1ea;
  --ink: #211e1a;
  --ink-soft: #3a362f;
  /* Graue Schrift, beide Stufen mindestens 4.5:1 (WCAG AA) auf jeder Flaeche,
     auf der sie als Text steht: paper, paper-deep, card, die fuenf Tafeln,
     accent-soft. Farbton und Buntheit wie vorher (OKLCH H 82.8, C 0.019),
     nur die Helligkeit ist so wenig wie moeglich gesenkt. Vorher #7c766b
     (4.25:1 auf paper, 3.34:1 auf slate) und #b3ac9f (2.12:1).
     scripts/contrast-check.php rechnet jedes Paar nach. */
  --stone: #676156;
  --stone-faint: #736c5f;
  /* Helle Stufe mit 3:1, so nah am alten #b3ac9f wie moeglich (Entscheidung
     Justus 28.09.2026: Menue und Kontaktformular "fast wie vorher"). Nur fuer
     die nicht gewaehlten Mega-Menue-Eintraege (31 px, grosse Schrift) und die
     Platzhalter im Kontaktformular; scripts/contrast-check.php erlaubt sie
     nirgends sonst. 3.02:1 auf paper, 3.21:1 auf Weiss. */
  --stone-pale: #968f82;
  /* Nur Schmuck, nie Schrift: Pfeile, Chevrons, Trennpunkte, Linien neben
     Text. Behaelt den alten hellen Wert, damit die Zeichen ruhig bleiben. */
  --stone-deco: #b3ac9f;
  --hairline: #e7e2d8;
  --hairline-strong: #d9d3c6;
  --accent: #2e5a78;
  --accent-soft: #e1eaf1;
  --cherry: #a4243b;
  --dark: #191713;

  /* Hero stays deliberately two-hued; the footer draws from the full aurora. */
  --glacier-deep: oklch(0.46 0.08 235);
  --glacier-blue: oklch(0.78 0.13 235);
  --glacier-ice: oklch(0.91 0.07 225);
  --glacier-mist: oklch(0.96 0.03 220);
  --aurora-pink: oklch(0.78 0.14 345);
  --aurora-rose: oklch(0.9 0.065 345);
  --aurora-violet: oklch(0.53 0.17 295);

  --sage: #dbe7d4;
  --slate: #d3e0e6;
  --sand: #ece3cf;
  --clay: #eddbce;
  --lilac: #e3daf2;

  --sage-line: #bccfb2;
  --slate-line: #b2c8d2;
  --sand-line: #d5c8a6;
  --clay-line: #d9bda7;
  --lilac-line: #c6b8dd;

  --lime: #d9f28e;
  --peach: #ffcfa8;
  --sky: #bfe2ff;
  --mint: #c9ecc9;

  /* Die schwedische Flagge in den Stadt-Dioramen (Justus, 28.09.2026),
     nur als Flaeche in der Zeichnung, nie als Schrift. Blau und Gelb der
     Flagge (NCS 4055-R95B, 0580-Y10R, etwa #006aa7 und #fecc02), in OKLCH
     etwas heller und weniger bunt, damit sie neben den Tafeln ruhig
     bleiben: oklch(0.54 0.10 245) und oklch(0.86 0.13 90). */
  --se-blue: #3674a5;
  --se-yellow: #f2cd64;
  /* Die Landesflaggen Schleswig-Holsteins und Brandenburgs (Justus,
     28.09.2026), ebenso nur als Flaeche: das Blau Schleswig-Holsteins
     (etwa #0039ad, oklch 0.40 0.19 262) und das Rot beider Flaggen (etwa
     #d61810 und #e60000, oklch 0.56 bis 0.58, 0.22 bis 0.24, 29), gleich
     gedaempft wie Blau und Gelb Schwedens: oklch(0.44 0.13 263) und
     oklch(0.58 0.17 29). Weiss ist das Papier der Zeichnung. */
  --sh-blue: #2a4e99;
  --flag-red: #cb473a;

  /* Compact hero trail: vivid enough to read, soft enough to remain ambient. */
  --trail-lime: oklch(0.9 0.14 120);
  --trail-pink: oklch(0.84 0.14 350);
  --trail-sky: oklch(0.87 0.1 220);
  --trail-peach: oklch(0.88 0.12 60);
  --trail-lilac: oklch(0.83 0.12 300);
  --trail-yellow: oklch(0.92 0.13 95);
  --trail-mint: oklch(0.88 0.11 160);

  --font-brand: "Switzer", system-ui, sans-serif;
  --font-body: "Onest", system-ui, sans-serif;

  --shell: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 12px;

  /* Formen (Justus, 28.09.2026): die heutige Mehrheit als Standard.
     Bedienelemente 10, kleine Etiketten als Kapsel, Felder 12 (grosse
     Suchfelder 16), Karten in drei Stufen. Verschachtelt gilt innen =
     aussen - Abstand, wo der Abstand klein ist. scripts/css-check.php
     prueft, dass Pillen, Knoepfe, Felder und Karten diese Tokens nutzen. */
  --r-control: 10px;
  --r-pill: 999px;
  --r-field: 12px;
  --r-field-l: 16px;
  --r-sm: 12px; /* Platten, Zeilen, Kacheln in Karten */
  --r-md: 16px; /* Karten */
  --r-lg: 20px; /* grosse Flaechen, Baender, Menue-Platten, Dialoge */

  --shadow-card: 0 8px 24px rgba(33, 30, 26, 0.07);
  --shadow-float: 0 10px 30px rgba(33, 30, 26, 0.08);
  /* Nur Karten, die als Ganzes ein Link sind, heben sich: 1 px mit diesem
     weichen Schatten, 0.35 s var(--ease) hinein wie hinaus. */
  --shadow-hover: 0 6px 18px rgba(33, 30, 26, 0.07);
  --ease: cubic-bezier(0.33, 1, 0.4, 1);
  --ease-exit: cubic-bezier(0.55, 0, 1, 0.45);
  /* Oeffnen von Blaettern und Menues (Mega-Menue, Laender-Menue): faengt
     schneller an als --ease und laeuft laenger aus. Frueher nur in nav.css. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}