/* Design-Tokens „Navy · Gold · Paper" — Design-System aus dem Claude-Design-
   Projekt miriamalthaler.at, von Miriam abgenommen (Grilling 11.07.2026),
   portiert im Token-Flip (Umbau 2, Slice #28). Die Roh-Palette lebt NUR hier;
   Komponenten verwenden ausschließlich die semantischen Tokens darunter. */

:root {
  /* Roh-Palette — Navy · Gold · Paper (eingefroren, freigegeben) */
  --palette-navy-900: #0f1930; /* tiefstes Nachtblau — Kopf, Schutz-Schleier */
  --palette-navy-800: #14203c; /* dunkle Flächen (Hero, Panels) */
  --palette-navy-700: #1d2c4c; /* Marke & Aktion auf Hell (Links, Fokus) */
  --palette-navy-ink: #0b142a; /* tiefstes Nachtblau — Footer-Grund */

  --palette-gold: #e4c08e; /* warmes Gold — Akzent/Text auf Dunkel */
  --palette-gold-strong: #e8ab6a; /* kräftiges Gold — CTA-Fläche */

  --palette-paper: #f7f4ee; /* warmes Papier — Grundfläche */
  --palette-paper-2: #efe9df; /* getönte Sekundärfläche & Hairlines */
  --palette-white: #fffefb;

  --palette-ink: #182238; /* Fließtext auf Hell */
  --palette-ink-soft: #4d566b; /* gedämpfter Text auf Hell */
  /* Gedämpfter Text auf Dunkel (Kontrast auf Nachtblau geprüft, ≥ 4,5:1) */
  --palette-hell-auf-dunkel: #aab6ce;
  /* Neutrales Grau für Eingabe-Ränder (Kontrast auf Papier ≥ 3:1) */
  --palette-grau-rand: #767e8f;

  /* Warnrot für Formular-Fehler (Kontrast auf Papier geprüft, ≥ 4,5:1) */
  --palette-warnrot: #b3261e;
  --palette-warnrot-tief: #8c1d18;

  /* Flächen */
  --color-bg: var(--palette-paper);
  --color-surface-dark: var(--palette-navy-800);
  --color-surface-darker: var(--palette-navy-900);
  --color-footer: var(--palette-navy-ink);
  --color-tint-cool: var(--palette-paper-2);
  --color-tint-warm: var(--palette-paper-2);

  /* Text */
  --color-ink: var(--palette-ink);
  --color-text-muted: var(--palette-ink-soft);
  --color-text-on-dark: var(--palette-white);
  --color-text-muted-on-dark: var(--palette-hell-auf-dunkel);

  /* Marke & Aktion — Gold nie als große Fläche, nur Akzent/CTA */
  --color-primary: var(--palette-navy-700);
  --color-accent: var(--palette-gold-strong);
  --color-accent-soft: var(--palette-gold);
  --color-on-accent: var(--palette-navy-900);

  /* Formularfelder & Fehler */
  --color-border-input: var(--palette-grau-rand);
  --color-error: var(--palette-warnrot);
  --color-error-text: var(--palette-warnrot-tief);

  /* Fokus */
  --focus-ring-light: 3px solid var(--palette-navy-700);
  --focus-ring-dark: 3px solid var(--palette-gold-strong);

  /* Typografie — Manrope (Sans/Fließtext), Cormorant Garamond (Display &
     Kursiv-Akzent), Lora (Serif für Zitate). */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-accent: var(--font-display); /* betonte Kernworte: Display-Kursive */
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --text-display: clamp(2.125rem, 1.4rem + 3.6vw, 3.5rem);
  --leading-body: 1.65;
  --leading-tight: 1.15;

  /* Raum (4-px-Raster) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Interaktions-Flächen (hover/press) */
  --color-tint-cool-hover: color-mix(in srgb, var(--palette-paper-2) 86%, var(--palette-navy-700));
  --overlay-on-dark: color-mix(in srgb, var(--palette-white) 10%, transparent);

  /* Schutz-Schleier hinter Hero-Text (Kanäle von navy-900 #0f1930 = 15 25 48,
     damit rgb(... / alpha) möglich ist) */
  --scrim-channels: 15 25 48;

  /* Schatten — weich und navy-getönt (Design-System) */
  --shadow-rest: 0 1px 2px -1px rgb(15 25 48 / 16%);
  --shadow-lift: 0 18px 40px -24px rgb(15 25 48 / 45%);

  /* Sticky-Header (Design-System) — transluzentes Nachtblau mit Gold-Haarlinie.
     --header-h ist zugleich Kopfhöhe und der Überlapp, um den der Kopf den
     dunklen Seitenanfang überdeckt (negativer Rand), damit kein Seiten-Layout
     nach unten rückt. */
  --header-h: 4.625rem; /* 74 px */
  --header-bg: rgb(var(--scrim-channels) / 0.86);
  --hairline-gold: color-mix(in srgb, var(--palette-gold) 14%, transparent);

  /* Komponenten-Tokens für die Design-System-Portage der Startseite (Umbau 4,
     Slice #30). Editorial-Titelgröße zwischen Fließtext und Hero, größere
     Kartenradien, weiße Kartenfläche auf Papier, feine Ink-/Gold-Haarlinien und
     zwei weiche, navy-getönte Karten-/Medienschatten. Additiv — bestehende
     Seiten nutzen sie noch nicht. */
  --text-titel: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;
  --color-surface-card: var(--palette-white);
  --hairline-ink: color-mix(in srgb, var(--palette-ink) 8%, transparent);
  --hairline-gold-stark: color-mix(in srgb, var(--palette-gold) 28%, transparent);
  --shadow-card: 0 1.6rem 3.4rem -2rem rgb(15 25 48 / 50%);
  --shadow-soft: 0 1.9rem 3.8rem -2.1rem rgb(15 25 48 / 55%);

  /* Form & Bewegung */
  --radius-md: 0.875rem;
  --radius-pill: 999px;
  --container-max: 68rem;
  --hero-measure: 52rem; /* Textbreite im Hero; auch Anker fürs Desktop-Morgenlicht */
  --tap-min: 2.75rem; /* 44 px */
  --dur-quick: 180ms;
  --dur-calm: 280ms;
  --dur-entrance: 1000ms; /* langsame, ruhige Erst-Choreografie beim Laden */
  --ease-out: cubic-bezier(0.22, 0.65, 0.24, 1);
}