/**
 * Design-Tokens — einzige Quelle für Farben, Typografie, Abstände.
 * Komponenten und Module referenzieren ausschließlich diese Variablen,
 * niemals Rohwerte.
 *
 * Designsprache „FLX / Blue Horizon": tiefes Navy als Fläche, elektrisches
 * Indigo als Akzent (Links, Navigation, Fokus, Badges), heller Solid-Button
 * als primäre Aktion. Reines Dunkel-System (dark-only) — ein Light-Theme ist
 * bei Bedarf später als [data-theme="light"]-Override additiv nachrüstbar.
 */

/* Geist — selbst gehostet (SIL OFL 1.1, Quelle: vercel/geist-font).
   Variable Fonts, decken alle Gewichte 100–900 ab. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ===== Flächen — tiefes Navy, gestufte Ebenen ===== */
  --color-bg: #111113;             /* Seitenhintergrund (tiefste Ebene) */
  --color-surface: #17171A;        /* Karten / Container */
  --color-surface-muted: #1D1D21;  /* dezente Füllung (Tabellenkopf, Footer) */
  --color-surface-raised: #212127; /* erhöhte Flächen (Buttons, Dropdown, Nav) */
  --color-border: #27272A;         /* Standard-Rahmen für Karten & Container */
  --color-border-strong: #3F3F46;  /* stärkerer Rahmen / Trenner / Hover */
  --color-hover: rgba(255, 255, 255, 0.045);

  /* ===== Text — neutrale Skala ===== */
  --color-text: #FAFAFA;
  --color-text-secondary: #D4D4D8;
  --color-text-tertiary: #A1A1AA;
  --color-text-disabled: #71717A;

  /* ===== Akzent — elektrisches Indigo ===== */
  --color-accent: #8B93FF;              /* interaktive Fokuspunkte, Highlights */
  --color-accent-hover: #3E43F0;        /* Hover-/CTA-Vertiefung */
  --color-accent-active: #3E43F0;
  --color-accent-text: #8B93FF;         /* Links, Badge-Text auf Dunkel */
  --color-accent-soft: rgba(139, 147, 255, 0.12);
  --color-accent-soft-strong: rgba(139, 147, 255, 0.22);
  --color-on-accent: #0A0A0A;           /* Text auf hell-indigo Fläche */

  /* ===== Heller Solid-Button (primäre Aktion, FLX) ===== */
  --color-solid: #FAFAFA;
  --color-solid-hover: #D4D4D8;
  --color-solid-active: #A1A1AA;
  --color-on-solid: #0A0A0A;

  /* ===== Status ===== */
  --color-success: #22C55E;
  --color-success-text: #4ADE80;
  --color-success-soft: rgba(34, 197, 94, 0.15);
  --color-warning: #FCB900;
  --color-warning-text: #FCD34D;
  --color-warning-soft: rgba(252, 185, 0, 0.15);
  --color-danger: #CF2E2E;
  --color-danger-hover: #B91C1C;
  --color-danger-text: #F87171;
  --color-danger-soft: rgba(207, 46, 46, 0.16);

  /* ===== Typografie — Geist (Fallback bis Font-Dateien hinterlegt sind) ===== */
  --font-sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.8125rem;  /* 13 — Standard-Body (FLX) */
  --text-base: 0.875rem; /* 14 */
  --text-md: 0.9375rem;  /* 15 — Kartentitel */
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: 1.375rem;   /* 22 */
  --text-2xl: 1.75rem;   /* 28 — Seitentitel (app-angepasst, nicht Hero-48) */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* ===== Abstände (4px-Raster) ===== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ===== Radien — FLX (8px Bedienelemente, 10px Karten) ===== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* ===== Schatten — naturalistisch, dunkel ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px -1px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.50), 0 2px 4px -1px rgba(0, 0, 0, 0.30);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.55);

  /* ===== Bedienelemente — FLX: 36px Mindesthöhe ===== */
  --control-height-sm: 30px;
  --control-height: 36px;
  --control-height-lg: 40px;
  --focus-ring: 0 0 0 3px rgba(139, 147, 255, 0.20);
  --focus-ring-danger: 0 0 0 3px rgba(207, 46, 46, 0.22);

  /* ===== Bewegung ===== */
  --transition-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
  --transition: 180ms cubic-bezier(0.2, 0, 0, 1);

  /* ===== Ebenen ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-overlay: 1030;
  --z-modal: 1040;
  --z-toast: 1050;

  /* ===== App-Layout ===== */
  --sidebar-width: 248px;
  --topbar-height: 56px;
  --content-max: 1680px;
}