/* ============================================
   CSS Variablen - Omnia Design System
   Light & Dark Mode mit korrekten Kontrasten
   Basierend auf LAYOUT_DESIGN_SYSTEM.md
   ============================================ */

/* ===== GEMEINSAME VARIABLEN ===== */
:root {
  /* Spacing */
  --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;
  
  /* Section Padding - Einheitliche Abstände */
  --section-padding: var(--space-6);
  --section-padding-mobile: var(--space-5);
  --container-padding: var(--space-4);
  --container-max-width: 1900px;
  
  /* Einheitliche Abstände für alle Abschnitte */
  --section-gap: var(--space-6);
  --element-gap: var(--space-4);
  --content-gap: var(--space-4);
  
  /* Typography */
  --font-family: 'Lexend Deca', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Cascadia Code', monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-2xl: 1.375rem;
  --font-size-3xl: 1.625rem;
  --font-size-4xl: 1.875rem;
  --font-size-5xl: 2.25rem;
  --font-size-6xl: 2.75rem;
  
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  
  /* Ecken
     ------
     Ein Wert steuert jede Ecke der Oberflaeche. Wer die App straffer oder
     weicher will, aendert --radius und sonst nichts. Vorher standen hier
     sechs Stufen (4/6/8/10/12/14) und daneben 104 fest eingetragene Werte
     in 16 verschiedenen Groessen - das sah man nicht bewusst, es machte die
     Oberflaeche nur unruhig.

     Darunter stehen die Bauteile einzeln. Sie zeigen alle auf --radius und
     sind genau dafuer da, spaeter abweichen zu koennen: soll das Eingabefeld
     runder sein als der Knopf, aendert man --input-radius und nichts sonst. */
  --radius: 4px;

  /* Keine Ecke, sondern eine Form - diese beiden folgen --radius nicht. */
  --radius-full: 50%;    /* Quadratisches wird zum Kreis: Avatar, Spinner, Punkt */
  --radius-pill: 9999px; /* Kapseln: Status, Filter, Fortschrittsbalken */

  /* Die Bauteile */
  --button-radius: var(--radius);
  --input-radius: var(--radius);
  --card-radius: var(--radius);
  --card-radius-mobile: var(--radius);
  --menu-radius: var(--radius);   /* Klappmenues, Auswahllisten */
  --modal-radius: var(--radius);  /* Dialoge, Seitenblaetter */
  --sheet-radius: var(--radius);  /* Blatt von unten (Telefon), obere Kante */
  --badge-radius: var(--radius-pill);

  /* Allgemeine Stufen fuer alles, was kein benanntes Bauteil ist.
     Sie zeigen bewusst alle auf denselben Wert - die Abstufung war der
     Grund, warum benachbarte Elemente unterschiedlich rund aussahen. */
  --radius-sm: var(--radius);
  --radius-md: var(--radius);
  --radius-lg: var(--radius);
  
  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout */
  --sidebar-width: 260px;
  --sidebar-width-laptop: 232px;
  --sidebar-width-collapsed: 52px;
  --sidebar-logo-max-height: 50px;
  --topbar-height: 60px;
  --content-padding: var(--space-5);
  
  /* Sidebar Animations */
  --sidebar-item-hover-translate: 2px;
  
  /* Grössen */
  /* Eine Hoehe fuer alles, was man bedient: Eingabefeld, Auswahlliste,
     Knopf. Vorher waren es drei (38 / 37 / 36) - nebeneinander in einer
     Zeile sah das aus wie drei verschiedene Bauteile. */
  --control-height: 36px;
  /* Kopfzeile einer Karte, Tabelle oder Spalte: hoch genug fuer ein
     Bedienelement (36px) plus Polster - und immer gleich hoch, ob ein
     Knopf darin steht oder nur eine Zeile Text. */
  --header-row-height: 52px;
  --control-height-sm: 30px;
  --control-height-lg: 40px;
  --size-button-height: var(--control-height);
  --size-avatar: 24px;
  --size-avatar-menu: 36px;
  --size-nav-icon: 18px;
  
  /* Borders */
  --border-width: 1px;
  --border-style: solid;
  
  /* Z-Index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-modal-over-sidepanel: 1060;
  --z-modal-file-preview: 1100;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1200;

  /* Blätter und Leisten des Rahmens. Müssen über --z-sticky (Seitenkopf) und
     --z-fixed (Kopfleiste) liegen, sonst scheinen diese durch ein Blatt, das
     den ganzen Schirm einnimmt. Unter --z-modal, damit ein Dialog aus dem
     Blatt heraus weiterhin darüber steht. */
  --z-tabbar: 1035;
  --z-sheet-scrim: 1040;
  --z-sheet: 1045;
  
  /* Polsterung einer Karte. Aus dem Abstandssatz, nicht daneben: 18px und
     13px lagen zwischen den Schritten und passten damit zu keinem Abstand,
     den die Karte innen verwendet. */
  --card-padding: var(--space-4);          /* 16px */
  --card-padding-mobile: var(--space-4);   /* 16px */
  --card-padding-small: var(--space-3);    /* 12px */
  
  /* Kontextspalte (Werkbank) */
  --rail-width: 300px;
  --rail-width-laptop: 288px;
  --rail-width-overlay: 340px;
  /* Registerliste im Kundendossier, senkrecht ab 1180px */
  --dossier-nav-width: 196px;

  /* Responsive Breakpoints */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1920px;

  /* Haltepunkte der Werkbank - als Kommentar, nicht als Token: in @media
     lässt sich var() nicht verwenden, ein Token wäre hier nur Zierde und
     würde von den Zahlen in den Stilblättern wegdriften.
       ab 1360px  volle Werkbank
       ab 1180px  Kontextspalte fest neben dem Inhalt, sonst als Blatt
       ab 1024px  Tablet quer
       bis 640px  Telefon (einschliesslich, daher max-width: 640px) */
}

/* ===== LIGHT MODE (Default) ===== */
:root,
[data-theme="light"],
html[data-theme="light"],
html[data-theme="light"] body {
  /* Hintergrund */
  --bg: #eff2f6;
  --panel: #ffffff;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f5f7fa;
  --bg-hover: #e9edf3;
  --bg-active: #dde3ec;
  
  /* Primärfarbe (Dunkelblau) */
  --primary: #1d5a91;
  --primary-rgb: 29, 90, 145;
  --primary-600: #2f79ba;
  --primary-700: #16456f;
  --primary-hover: #16456f;
  --primary-light: rgba(29, 90, 145, 0.10);
  
  /* Akzentfarbe (Helles Blau) */
  --accent: #2f79ba;
  --accent-light: #5a9bd4;
  --accent-lighter: rgba(29, 90, 145, 0.10);
  
  /* Text - mit korrekten Kontrasten (WCAG AA) */
  --text: #111a26; /* Kontrast 17.5:1 auf weiss */
  --text-light: #465364; /* Kontrast 7.8:1 auf weiss */
  --text-muted: #5f6b7a; /* Kontrast 5.4:1 - traegt Datums-, Label- und Kopfzeilentexte */
  --text-inverse: #ffffff;
  
  /* Status-Farben */
  --success: #0c7a58;
  --warning: #8f5b00;
  /* Schrift auf Warn-Flaechen: Amber traegt weissen Text nicht (Kontrast unter 3:1),
     darum in beiden Themes dunkle Tinte. */
  --warning-ink: #1f1503;
  --danger: #c93a31;
  --info: #1d5a91;
  
  /* Borders */
  --border: #e2e7ef;
  --border-light: #eef1f6;
  --border-dark: #cfd7e2;
  /* Rand von Eingabefeldern, Auswahllisten und Schaltern. Bewusst kraeftiger
     als --border: WCAG 1.4.11 verlangt fuer die Umrandung von Bedienelementen
     3:1 gegen den Grund. --border liegt bei 1.24:1 - richtig fuer eine ruhige
     Trennlinie, zu schwach fuer ein Feld, das man finden koennen muss.
     #8a93a8 auf #ffffff = 3.08:1, auf #eff2f6 = 2.76:1 (Felder sitzen auf
     Karten, nicht auf dem Seitengrund). */
  --border-input: #8a93a8;
  
  /* Header Background */
  --header-bg: rgba(29, 90, 145, 0.10);
  
  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.2);
  --card-shadow: none;
  --card-shadow-hover: 0 2px 10px rgba(16, 24, 40, 0.07);
  --card-shadow-large: 0 20px 60px rgba(0, 0, 0, 0.15);
  --button-shadow: none;
  --scrim: rgba(16, 24, 40, 0.34);
}

/* ===== DARK MODE ===== */
[data-theme="dark"],
html[data-theme="dark"],
html[data-theme="dark"] body {
  /* Hintergrund - Dunkel mit korrekten Kontrasten */
  --bg: #0c111c;
  --panel: #141b28;
  --bg-secondary: #141b28;
  --bg-tertiary: #1a2331;
  --bg-hover: #212c3d;
  --bg-active: #2a3648;
  
  /* Primärfarbe - Heller für Dark Mode */
  --primary: #6aa9e0; /* Kontrast 6.9:1 auf --panel */
  --primary-rgb: 106, 169, 224;
  --primary-600: #8bc0ec;
  --primary-700: #4a8ec7;
  --primary-hover: #8bc0ec;
  --primary-light: rgba(106, 169, 224, 0.15);
  
  /* Akzentfarbe */
  --accent: #8bc0ec;
  --accent-light: #b3d6f2;
  --accent-lighter: rgba(106, 169, 224, 0.15);
  
  /* Text - Hell für Dark Mode mit korrekten Kontrasten */
  --text: #e9eef6; /* Kontrast 14.8:1 auf --panel */
  --text-light: #9aa8ba; /* Kontrast 7.1:1 auf --panel */
  --text-muted: #8391a6; /* Kontrast 5.4:1 - traegt Datums-, Label- und Kopfzeilentexte */
  --text-inverse: #071120;
  
  /* Status-Farben - Heller für Dark Mode */
  --success: #3ec99b;
  --warning: #e4a844;
  --warning-ink: #1f1503;
  --danger: #f2726a;
  --info: #6aa9e0;
  
  /* Borders */
  --border: #232e40;
  --border-light: #1c2635;
  --border-dark: #324054;
  /* siehe hellen Satz: #626877 auf #141b28 = 3.09:1 */
  --border-input: #626877;
  
  /* Header Background */
  --header-bg: rgba(106, 169, 224, 0.15);
  
  /* Schatten - Stärker für Dark Mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.7);
  --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.8);
  --card-shadow: none;
  --card-shadow-hover: 0 2px 12px rgba(0, 0, 0, 0.45);
  --card-shadow-large: 0 20px 60px rgba(0, 0, 0, 0.6);
  --button-shadow: none;
  --scrim: rgba(6, 10, 18, 0.52);
}