/* VituraWeb-Design-Tokens — synchron mit DESIGN.md (Bezug: Spec, nicht
   Handpflege). Kontrastwerte in DESIGN.md neu gemessen. */

/* Lato 400/700 lokal gehostet (DSGVO: kein externer Font-Request). */
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-v23-latin-regular-CzNc_Ij.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-v23-latin-700-5CmM-eX.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Colors (DESIGN.md) */
  --color-primary: #004c6d;
  --color-bg: #ffffff;
  --color-text: #14181b;
  --color-accent: #0077a8;
  --color-accent-contrast: #ffffff;
  --color-border: #8a979e;

  /* Text-Rolle von accent/primary getrennt: in Light Mode identisch zu den
     Flächenfarben (kein visueller Unterschied), in Dark Mode eigene Werte
     (siehe :root[data-theme="dark"] unten) — Begründung: docs/superpowers/
     specs/2026-09-02-dark-mode-design.md, Abschnitt "Kontext". */
  --color-accent-text: var(--color-accent);
  --color-accent-text-hover: var(--color-primary);
  --color-surface-strong: var(--color-primary);

  /* Abgeleitete Töne (DESIGN.md „Colors / Abgeleitet") */
  --color-muted: #3a444a;
  --color-label: #46525a;
  --color-hairline: color-mix(
    in srgb,
    var(--color-border) 45%,
    var(--color-bg)
  );
  --color-band: #f2f6f8;
  --color-on-primary: #dce9f0;
  --color-on-primary-strong: #bce3f5;

  /* Logo (VituraLogo.astro): Markenfarben aus dem SVG, im Dark Mode
     einheitlich Weiß (siehe :root[data-theme="dark"] unten — entspricht der
     bisherigen invertierten Logo-Datei, die komplett weiß war). */
  --color-logo-mark: #009fe3;
  --color-logo-text: #666665;

  /* Typography */
  --font-family-base: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;

  /* Spacing (DESIGN.md: 4/5 angehoben für den editorialen Rhythmus) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 2rem;
  --space-5: 4rem;

  /* Shapes: quadratisch, durchgehend */
  --radius-base: 0rem;

  /* Focus */
  --focus-ring-color: var(--color-accent);
  --focus-ring-width: 3px;

  /* Layout-Maße aus dem Design (Nicht-Token) */
  --wrap-max: 1320px;
  --gutter: 60px;
  --breakpoint: 700px;
}

/* Dark Mode — Werte und Kontrastmessung: docs/superpowers/specs/
   2026-09-02-dark-mode-design.md, Abschnitt "Farbpalette". Nicht gelistete
   Tokens (--color-primary, --color-accent, --color-accent-contrast,
   --color-on-primary, --color-on-primary-strong) bleiben unverändert. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #14181b;
  --color-text: #e7ebed;
  --color-muted: #b7c0c6;
  --color-label: #9aa5ac;
  --color-border: #5a6570;
  --color-band: #1b2226;
  --color-accent-text: #009ee2;
  --color-accent-text-hover: #6dcbf2;
  --color-surface-strong: #0077a8;
  --color-logo-mark: #ffffff;
  --color-logo-text: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
  margin: 0;
}

a {
  color: var(--color-accent-text);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-accent-text-hover);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Auf dunklen Flächen (primary) weißer Fokus */
.on-primary :focus-visible {
  outline-color: var(--color-accent-contrast);
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: var(--color-accent-contrast);
  padding: var(--space-2) var(--space-3);
  z-index: 100;
  border-radius: var(--radius-base);
  font-weight: 700;
}

.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}