/**
 * @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_summertheme.theme) überschreiben.
 */

:root {
  /* --- Farbpalette (Rohwerte) --- */
  --color-white: #ffffff;
  --color-black: #1a1a1a;
  --color-grey-100: #f5f5f5;
  --color-grey-200: #e6e6e6;
  --color-grey-400: #b3b3b3;
  --color-grey-600: #6b6b6b;
  --color-grey-800: #333333;

  /* --- Markenfarben (über Theme-Einstellungen überschreibbar) --- */
  --color-primary: #01aaa0;
  --color-accent: #d12d68;
  --color-highlight: #5a2a68;

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

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

  /* 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-height: 4rem;
  --z-header: 100;
  --z-drawer: 200;
}