/**
 * @file tokens.css
 * Design-Tokens – Single Source of Truth.
 *
 * Alle Komponenten referenzieren AUSSCHLIESSLICH diese Custom Properties.
 * Pro Konferenz lassen sich die Werte über die Theme-Einstellungen
 * (Inline-:root-Override, siehe x10_sn8_2026.theme) überschreiben.
 */

:root {
  /* --- Farbpalette (Rohwerte) --- */
  --color-white: #f4f7f6;     /* leicht entsättigtes Weiß = Seiten-Hintergrund */
  --color-pure-white: #ffffff;
  --color-black: #1c1c1c;
  --color-grey-100: #f5f5f5;
  --color-grey-200: #e6e6e6;
  --color-grey-400: #b3b3b3;
  --color-grey-600: #555555;
  --color-grey-800: #333333;

  /* --- SN8-Markenpalette (Rohwerte) --- */
  --color-dark: #2e2e2e;       /* dunkle Flächen */
  --color-dark-2: #262626;     /* Footer */
  --color-header: #222222;     /* Header-Balken/Welle */
  --color-mint: #dffeff;       /* helle Mint-Sektionen */
  --color-mint-deep: #b6f0e6;
  --color-green: #2ee636;      /* Signalgrün (Akzent) */
  --color-green-soft: #7ef07a;
  --color-blue: #2b35e8;       /* Markenblau */
  --color-salmon: #f4b9b9;
  --color-lavender: #c6c6f2;
  --color-card-green: #c2f0c8;

  /* --- Markenfarben (über Theme-Einstellungen überschreibbar) --- */
  --color-primary: var(--color-blue);     /* Links, Fokus – guter Kontrast auf Weiß */
  --color-accent: var(--color-green);      /* Highlights, Nav-Unterstrich, Hamburger */
  --color-highlight: var(--color-dark);    /* dunkle Button-/Akzentflächen */

  /* --- Semantische Farben --- */
  --color-text: var(--color-black);
  --color-text-muted: var(--color-grey-600);
  --color-bg: var(--color-white);
  --color-bg-muted: var(--color-mint);
  --color-border: var(--color-grey-200);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-black);
  --color-focus: var(--color-primary);

  /* --- Typografie --- */
  /* Space Mono ist die Designschrift (mono); self-hosted via css/fonts.css.
     Noto Sans bleibt als neutraler Sans-Fallback verfügbar (--font-sans).
     System-Fonts greifen, bis die Schrift geladen ist (font-display: swap). */
  --font-mono: "Space Mono", ui-monospace, "SF Mono", "Cascadia Mono", menlo, consolas, monospace;
  --font-sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
  --font-body: var(--font-mono);
  --font-heading: var(--font-mono);

  /* Fließende Schriftgrößen (mobile-first; skaliert mit Viewport). */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-h3: clamp(1.25rem, 1rem + 1.2vw, 1.5rem);
  --font-size-h2: clamp(1.5rem, 1.1rem + 2vw, 2rem);
  --font-size-h1: clamp(1.875rem, 1.2rem + 3.4vw, 3rem);

  --line-height-base: 1.6;
  --line-height-heading: 1.15;

  /* --- Abstände (Spacing-Skala) --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;

  /* --- Layout --- */
  --layout-width: 1200px;
  --layout-width-narrow: 768px;
  --container-padding: var(--space-sm);

  /* --- Breakpoints (Referenz; CSS-Media-Queries benötigen echte px-Werte) --- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* --- Sonstiges --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --transition-base: 0.2s ease;

  /* --- Header-Geometrie (FIX – skaliert bewusst nicht mit dem Viewport) ---
     Die markante Header-Form besteht aus einem hohen linken und einem
     niedrigen rechten Balken, zwischen denen die Wellen-SVG sitzt. */
  --header-h: 120px;          /* rechter Balken / Nav-Höhe (niedriger) */
  --wave-h: 184px;            /* linker Balken / Wellenhöhe (höher) */
  --wave-w: 121px;            /* feste Breite der Wellen-SVG */
  --wave-left: 30%;           /* horizontale Position der Welle */
  --header-c: 62px;           /* kompakte Höhe beim Scrollen */
  --header-height: var(--header-h);   /* Alias für bestehende Bezüge */

  --z-header: 100;
  --z-drawer: 200;
}