:root {

    /* Fonts */

    --app-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

    /* Base */
    --app-bg: #f6f7fb;
    --app-surface: #ffffff;
    --app-surface-2: #f2f4f8; /* leicht abgesetzt (z.B. Grid header bg) */
    --app-surface-3: #e9edf5; /* noch etwas mehr Kontrast */

    --app-text: #0f172a; /* slate-900 */
    --app-text-muted: #475569; /* slate-600 */
    --app-border: rgba(15, 23, 42, 0.12);
    
    /* App Chrome (Light) */
    --app-chrome-bg: #f5f7fb;              /* dezente Fläche, nahe Grid-Header */
    --app-chrome-fg: var(--app-text);
    --app-chrome-border: rgba(15, 23, 42, 0.12);
    
    /* Brand */
    --app-primary: #2563eb; /* blue-600 */
    --app-on-primary: #ffffff;
    --app-danger: #c62828;
    --app-on-danger: #ffffff;
    --app-focus: rgba(37, 99, 235, 0.22);
    --app-control-focus-border: color-mix(in srgb, var(--app-primary) 30%, #cbd5e1 70%);
    --app-control-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary) 14%, transparent 86%);
    --app-action-quiet-bg: rgba(255, 255, 255, 0.88);
    --app-action-quiet-border: rgba(148, 163, 184, 0.18);
    --app-action-quiet-hover-bg: rgba(241, 245, 249, 0.96);
    --app-action-quiet-hover-border: rgba(148, 163, 184, 0.24);
    --app-action-quiet-fg: #334155;
    --app-action-toggle-bg: rgba(37, 99, 235, 0.10);
    --app-action-toggle-border: rgba(59, 130, 246, 0.22);
    --app-action-toggle-fg: #1d4ed8;
    --app-action-toggle-hover-bg: rgba(37, 99, 235, 0.16);
    --app-action-warning-bg: rgba(255, 247, 237, 0.96);
    --app-action-warning-border: rgba(245, 158, 11, 0.28);
    --app-action-warning-fg: #9a3412;
    --app-action-warning-hover-bg: rgba(255, 237, 213, 0.98);

    /* Radius */
    --app-radius-sm: 6px;
    --app-radius-md: 10px;
    --app-radius-lg: 14px;

    /* Spacing / Layout */
    --app-section-spacing: 12px;
    --app-field-spacing: 8px;
    --app-field-gap: 4px;
    --app-content-padding: 12px;

    /* Navigation / Drawer  */
    /* Navigation / Drawer (Ocean Blue Light) */
    --app-nav-bg: #0f2a4a;              /* Drawer Hintergrund */
    --app-nav-fg: #e6eef7;              /* Drawer Text */
    --app-nav-muted: rgba(230, 238, 247, 0.75);
    --app-nav-hover-bg: rgba(255, 255, 255, 0.08);
    --app-nav-active-bg: rgba(31, 111, 235, 0.22); /* aus Primary abgeleitet */
    --app-nav-active-fg: #ffffff;

    /* App Header (Topbar) */
    --app-header-bg: #133358;           /* etwas heller als Drawer */
    --app-header-fg: #eef3f9;           /* Header Text */
    --app-header-border: rgba(255,255,255,0.08);


    /* Telerik Grid (zebra + header) */
    /* Grid (LIGHT) */

    --app-grid-header-bg: #f5f7fb;
    --app-grid-header-fg: var(--app-text);
    --app-grid-header-border: rgba(15, 23, 42, 0.16);

    --app-grid-row-odd: #ffffff;
    --app-grid-row-even: #fbfcfe;
    --app-grid-row-hover: rgba(37, 99, 235, 0.06);

    --app-grid-focus-ring-color: rgba(37, 99, 235, 0.35); /* dezent blau */
    --app-grid-focus-ring-width: 2px; /* Stärke */
    --app-grid-focus-ring-shadow: 0 0 0 var(--app-grid-focus-ring-width) var(--app-grid-focus-ring-color) inset;
}

html[data-wcag="true"] {
    /* Nachschärfen der Kontraste für Barrierefreiheit */
    --app-text-muted: #334155;        /* slate-700 statt 600 für > 4.5:1 Kontrast */
    --app-primary: #1e40af;           /* blue-800 statt 600 für besseren Kontrast auf Weiß/Hellgrau */
    
    /* Prominentere Fokus-Indikatoren */
    --app-grid-focus-ring-width: 3px;
    --app-grid-focus-ring-color: #1e3a8a;
    --app-focus: rgba(30, 64, 175, 0.35);
    --app-control-focus-border: color-mix(in srgb, var(--app-primary) 68%, #1e3a8a 32%);
    --app-control-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 20%, transparent 80%);
}

html[data-theme="dark"] {
    --app-bg: #0b0f17;
    --app-surface: #101827;
    --app-surface-2: #121d30;
    --app-surface-3: #16243a;

    --app-text: #e5e7eb;
    --app-text-muted: #a1a9b8;
    --app-border: rgba(229, 231, 235, 0.14);

    --app-primary: #60a5fa; /* blue-400 */
    --app-on-primary: #0b1220;
    --app-danger: #f87171;
    --app-on-danger: #220d0d;
    --app-focus: rgba(96, 165, 250, 0.22);
    --app-control-focus-border: color-mix(in srgb, var(--app-primary) 42%, #cbd5e1 58%);
    --app-control-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary) 18%, transparent 82%);
    --app-action-quiet-bg: rgba(15, 27, 46, 0.74);
    --app-action-quiet-border: rgba(148, 163, 184, 0.24);
    --app-action-quiet-hover-bg: rgba(22, 36, 58, 0.92);
    --app-action-quiet-hover-border: rgba(148, 163, 184, 0.32);
    --app-action-quiet-fg: #d8e2f1;
    --app-action-toggle-bg: rgba(96, 165, 250, 0.18);
    --app-action-toggle-border: rgba(96, 165, 250, 0.34);
    --app-action-toggle-fg: #dbeafe;
    --app-action-toggle-hover-bg: rgba(96, 165, 250, 0.24);
    --app-action-warning-bg: rgba(66, 32, 6, 0.9);
    --app-action-warning-border: rgba(245, 158, 11, 0.38);
    --app-action-warning-fg: #fde68a;
    --app-action-warning-hover-bg: rgba(92, 43, 8, 0.94);


    /* App Chrome (Dark) */
    --app-chrome-bg: #0f1b2e;              /* passend zu eurem Grid-Header-Dark */
    --app-chrome-fg: #e5e7eb;
    --app-chrome-border: rgba(229, 231, 235, 0.14);
    
    /* Navigation / Drawer (Ocean Blue Dark) */
    --app-nav-bg: #0b1629;             /* dunkles Navy */
    --app-nav-fg: #dde6f3;
    --app-nav-muted: rgba(221, 230, 243, 0.75);
    --app-nav-hover-bg: rgba(255, 255, 255, 0.06);
    --app-nav-active-bg: rgba(122, 167, 255, 0.18);
    --app-nav-active-fg: #ffffff;

    /* App Header (Topbar) */
    --app-header-bg: #0e1d36;          /* leicht heller als Drawer */
    --app-header-fg: #e6eef7;
    --app-header-border: rgba(255,255,255,0.10);


    /* Grid (DARK) – WICHTIG: diese Overrides */
    --app-grid-header-bg: #0f1b2e;
    --app-grid-header-fg: #e5e7eb;
    --app-grid-header-border: rgba(229, 231, 235, 0.14);

    --app-grid-row-odd: #0f1625;
    --app-grid-row-even: #101a2b;
    --app-grid-row-hover: rgba(96, 165, 250, 0.10);

    --app-grid-focus-ring-color: rgba(96, 165, 250, 0.50);
    --app-grid-focus-ring-width: 2px;
    --app-grid-focus-ring-shadow: 0 0 0 var(--app-grid-focus-ring-width) var(--app-grid-focus-ring-color) inset;

}