/*
 * shERPa Design-Tokens („Alpenblau“). Einzige Quelle für Farben, Typografie, Abstände und Radien.
 * Bootstrap 5.3 und das DevExpress-Theme „bootstrap-external“ lesen die --bs-*-Variablen; eigene Komponenten
 * verwenden die --s-*-Tokens. Hell/Dunkel über data-bs-theme am <html>-Element (gesetzt vor dem ersten Rendern).
 */

/* Inter (variable Schrift, SIL Open Font License – siehe fonts/inter/LICENSE.txt), lokal ausgeliefert */
@font-face {
    font-family: "InterVariable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "InterVariable";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

:root,
[data-bs-theme=light] {
    color-scheme: light;

    /* Flächen */
    --s-canvas: #F6F7F9;
    --s-surface: #FFFFFF;
    --s-surface-2: #F1F3F6;
    --s-surface-hover: #EEF1F5;
    --s-elevated: #FFFFFF;
    --s-border: #E2E6EC;
    --s-border-strong: #CBD2DB;

    /* Text */
    --s-text: #1A1F29;
    --s-text-2: #4B5563;
    --s-text-muted: #646C7A;

    /* Marke */
    --s-primary: #1F5FD1;
    --s-primary-rgb: 31, 95, 209;
    --s-primary-hover: #1A50B3;
    --s-primary-fill: #1F5FD1;
    --s-primary-subtle: #E8EFFC;
    --s-primary-text: #1A4AA6;

    /* Status (nur mit Bedeutung verwenden, immer mit Symbol oder Text) */
    --s-success: #137A3A;
    --s-success-rgb: 19, 122, 58;
    --s-success-subtle: #E7F6EC;
    --s-warning: #A84C08;
    --s-warning-rgb: 168, 76, 8;
    --s-warning-subtle: #FEF3E2;
    --s-danger: #C62828;
    --s-danger-rgb: 198, 40, 40;
    --s-danger-subtle: #FDECEC;
    --s-info: #0C6A84;
    --s-info-rgb: 12, 106, 132;
    --s-info-subtle: #E3F4F8;
    --s-neutral-subtle: #EEF0F3;

    /* Diagramme: feste kategoriale Reihenfolge */
    --s-chart-1: #2A78D6;
    --s-chart-2: #EB6834;
    --s-chart-3: #1BAF7A;

    --s-shadow-pop: 0 8px 24px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .08);
    --s-shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
    --s-focus: 0 0 0 3px rgba(31, 95, 209, .35);
}

[data-bs-theme=dark] {
    color-scheme: dark;

    --s-canvas: #0E1116;
    --s-surface: #161A21;
    --s-surface-2: #1D222B;
    --s-surface-hover: #222833;
    --s-elevated: #232934;
    --s-border: #2A313C;
    --s-border-strong: #3A4350;

    --s-text: #E6E9EE;
    --s-text-2: #A7B0BD;
    --s-text-muted: #8A94A3;

    --s-primary: #6E9BF2;
    --s-primary-rgb: 110, 155, 242;
    --s-primary-hover: #8DB1F5;
    --s-primary-fill: #2F67D8;
    --s-primary-subtle: #1C2A44;
    --s-primary-text: #A9C4F8;

    --s-success: #3FB96F;
    --s-success-rgb: 63, 185, 111;
    --s-success-subtle: #12291C;
    --s-warning: #E3A008;
    --s-warning-rgb: 227, 160, 8;
    --s-warning-subtle: #2E2410;
    --s-danger: #F0645A;
    --s-danger-rgb: 240, 100, 90;
    --s-danger-subtle: #341A1A;
    --s-info: #38B2D1;
    --s-info-rgb: 56, 178, 209;
    --s-info-subtle: #10272F;
    --s-neutral-subtle: #232934;

    --s-chart-1: #3987E5;
    --s-chart-2: #D95926;
    --s-chart-3: #199E70;

    --s-shadow-pop: 0 8px 24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4);
    --s-shadow-card: none;
    --s-focus: 0 0 0 3px rgba(110, 155, 242, .45);
}

/* ---------- Typografie, Abstände, Radien (modusunabhängig) ---------- */
:root {
    --s-font: "InterVariable", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --s-font-display: "InterVariable", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --s-text-xs: .75rem;    /* 12 */
    --s-text-sm: .8125rem;  /* 13 */
    --s-text-base: .875rem; /* 14 */
    --s-text-md: 1rem;      /* 16 */
    --s-text-lg: 1.25rem;   /* 20 */
    --s-text-xl: 1.5rem;    /* 24 */
    --s-text-2xl: 1.875rem; /* 30 */

    --s-space-1: 4px;
    --s-space-2: 8px;
    --s-space-3: 12px;
    --s-space-4: 16px;
    --s-space-5: 20px;
    --s-space-6: 24px;
    --s-space-8: 32px;

    --s-radius-sm: 6px;
    --s-radius: 8px;
    --s-radius-lg: 12px;

    --s-sidebar-width: 248px;
    --s-sidebar-collapsed: 64px;
    --s-topbar-height: 56px;
}

/* ---------- Abbildung auf Bootstrap 5.3 (wirkt auch auf DevExpress „bootstrap-external“) ---------- */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bs-font-sans-serif: var(--s-font);
    --bs-body-font-family: var(--s-font);
    --bs-body-font-size: var(--s-text-base);
    --bs-body-line-height: 1.5;
    --bs-body-bg: var(--s-surface);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: var(--s-text);
    --bs-emphasis-color: var(--s-text);
    --bs-secondary-color: var(--s-text-2);
    --bs-tertiary-color: var(--s-text-muted);
    --bs-secondary-bg: var(--s-surface-2);
    --bs-tertiary-bg: var(--s-surface-2);
    --bs-border-color: var(--s-border);
    --bs-border-color-translucent: var(--s-border);
    --bs-border-radius: var(--s-radius-sm);
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: var(--s-radius);
    --bs-heading-color: var(--s-text);

    --bs-primary: var(--s-primary-fill);
    --bs-primary-rgb: var(--s-primary-rgb);
    --bs-primary-text-emphasis: var(--s-primary-text);
    --bs-primary-bg-subtle: var(--s-primary-subtle);
    --bs-primary-border-subtle: var(--s-primary-subtle);
    --bs-link-color: var(--s-primary);
    --bs-link-color-rgb: var(--s-primary-rgb);
    --bs-link-hover-color: var(--s-primary-hover);
    --bs-link-hover-color-rgb: var(--s-primary-rgb);

    --bs-success: var(--s-success);
    --bs-success-rgb: var(--s-success-rgb);
    --bs-success-text-emphasis: var(--s-success);
    --bs-success-bg-subtle: var(--s-success-subtle);
    --bs-success-border-subtle: var(--s-success-subtle);
    --bs-warning: var(--s-warning);
    --bs-warning-rgb: var(--s-warning-rgb);
    --bs-warning-text-emphasis: var(--s-warning);
    --bs-warning-bg-subtle: var(--s-warning-subtle);
    --bs-warning-border-subtle: var(--s-warning-subtle);
    --bs-danger: var(--s-danger);
    --bs-danger-rgb: var(--s-danger-rgb);
    --bs-danger-text-emphasis: var(--s-danger);
    --bs-danger-bg-subtle: var(--s-danger-subtle);
    --bs-danger-border-subtle: var(--s-danger-subtle);
    --bs-info: var(--s-info);
    --bs-info-rgb: var(--s-info-rgb);
    --bs-info-text-emphasis: var(--s-info);
    --bs-info-bg-subtle: var(--s-info-subtle);
    --bs-info-border-subtle: var(--s-info-subtle);
    --bs-secondary: var(--s-text-2);
    --bs-secondary-text-emphasis: var(--s-text-2);
    --bs-secondary-bg-subtle: var(--s-neutral-subtle);
    --bs-secondary-border-subtle: var(--s-border);
    --bs-light: var(--s-surface-2);
    --bs-dark: var(--s-text);
    --bs-focus-ring-color: rgba(var(--s-primary-rgb), .35);
}

[data-bs-theme=dark] {
    --bs-body-bg-rgb: 22, 26, 33;
    /* DevExpress nutzt die Grauskala für Rahmen (hell) und Text (dunkel) – im Dunkelmodus gespiegelt */
    --bs-gray-100: #1D222B;
    --bs-gray-200: #232934;
    --bs-gray-300: #2A313C;
    --bs-gray-400: #3A4350;
    --bs-gray-500: #5B6573;
    --bs-gray-600: #8A94A3;
    --bs-gray-700: #A7B0BD;
    --bs-gray-800: #C9CFD8;
    --bs-gray-900: #E6E9EE;
    --bs-white: #FFFFFF;
}