/* =========================================================================
   FLT Telefon-KI – Design-Tokens
   Einzige Quelle für Farben, Abstände, Radien, Schatten, Schrift, Ebenen.
   Komponenten und Seiten verwenden ausschließlich diese Variablen –
   keine Hex-Werte in pages/*.css. Referenz: DESIGN.md (Abschnitt Tokens).
   ========================================================================= */

:root {
    /* --- Marke: FLT-Navy ------------------------------------------------- */
    --navy-950: #07142e;
    --navy-900: #0a1f47;
    --navy-800: #0f2b5f;
    --navy-700: #163a7a;
    --navy-600: #1f4c99;
    --navy-500: #3563b5;
    --navy-300: #9db3dc;
    --navy-200: #c9d6ee;
    --navy-100: #e3eaf7;
    --navy-50: #f2f5fb;

    /* --- Interaktionsblau (Links, Fokus) ---------------------------------- */
    --blue-700: #1d4ed8;
    --blue-600: #2563eb;
    --blue-500: #3b82f6;
    --blue-200: #bfd5fe;
    --blue-100: #dbe7fe;
    --blue-50: #eff5ff;

    /* --- Neutral (kühles Grau) -------------------------------------------- */
    --gray-0: #ffffff;
    --gray-25: #fcfcfd;
    --gray-50: #f8f9fb;
    --gray-75: #f3f4f7;
    --gray-100: #eef0f4;
    --gray-150: #e7e9ee;
    --gray-200: #e1e4ea;
    --gray-300: #cfd4dc;
    --gray-350: #b9c0cb;
    --gray-400: #98a1b2;
    --gray-500: #636c80;                    /* ≥ 4.5:1 auf Weiß, --color-bg, gray-75 und gray-100 */
    --gray-600: #4b5565;
    --gray-700: #364152;
    --gray-800: #202939;
    --gray-900: #111827;

    /* --- Statusfarben ----------------------------------------------------- */
    --green-50: #ecfdf3;
    --green-100: #d1fadf;
    --green-200: #a6f4c5;
    --green-500: #12b76a;
    --green-600: #039855;
    --green-700: #027a48;
    --green-800: #05603a;

    --amber-50: #fffaeb;
    --amber-100: #fef0c7;
    --amber-200: #fedf89;
    --amber-500: #f79009;
    --amber-600: #dc6803;
    --amber-700: #b54708;
    --amber-800: #93370d;

    --red-50: #fef3f2;
    --red-100: #fee4e2;
    --red-200: #fecdca;
    --red-300: #fda29b;
    --red-500: #f04438;
    --red-600: #d92d20;
    --red-700: #b42318;
    --red-800: #912018;

    --sky-50: #eff8ff;
    --sky-100: #d1e9ff;
    --sky-200: #b2ddff;
    --sky-500: #2e90fa;
    --sky-600: #1570ef;
    --sky-700: #175cd3;
    --sky-800: #1849a9;

    /* --- Semantische Farben ------------------------------------------------ */
    --color-bg: #f6f7f9;                    /* App-Hintergrund (off-white) */
    --color-surface: #ffffff;               /* Karten, Tabellen, Sidebar */
    --color-surface-subtle: #fafbfc;        /* Tabellenkopf, Kartenfuß */
    --color-surface-muted: var(--gray-75);  /* eingelassene Flächen */
    --color-surface-hover: #f7f8fa;         /* Zeilen-Hover */
    --color-border: #e4e7ec;                /* Haarlinie */
    --color-border-subtle: #eef0f3;         /* Trenner innerhalb von Karten */
    --color-border-strong: var(--gray-300); /* Sekundär-Buttons, Trenner mit Gewicht */
    --color-control-border: #848d9f;        /* Rand von Eingabefeldern, Checkboxen, Radios, Schalter-Spur: ≥ 3:1 (WCAG 1.4.11) auf Weiß und --color-bg */
    --color-control-border-hover: var(--gray-500);

    --color-text: var(--gray-900);
    --color-text-secondary: var(--gray-600);
    --color-text-tertiary: var(--gray-500);   /* AA (≥ 4.5:1) auf Weiß, --color-bg, gray-75 und gray-100 */
    --color-text-disabled: var(--gray-400);
    --color-text-inverse: #ffffff;
    --color-placeholder: #6b7385;           /* ≥ 4.5:1 auf Weiß und gray-50 */

    --color-primary: var(--navy-800);
    --color-primary-hover: var(--navy-900);
    --color-primary-active: var(--navy-950);
    --color-primary-soft: var(--navy-50);
    --color-primary-soft-border: var(--navy-100);

    --color-accent: var(--blue-600);
    --color-accent-hover: var(--blue-700);
    --color-link: var(--blue-700);
    --color-focus: var(--blue-600);
    --focus-ring: 0 0 0 3px rgb(37 99 235 / 0.2);
    --focus-ring-danger: 0 0 0 3px rgb(240 68 56 / 0.18);

    /* Töne: -bg Fläche, -fg Text/Icon auf -bg (AA), -text Fließtext in Alerts, -border, -solid Punkt/Akzent */
    --success-bg: var(--green-50);
    --success-fg: var(--green-700);
    --success-text: var(--green-800);
    --success-border: var(--green-200);
    --success-solid: var(--green-500);

    --warning-bg: var(--amber-50);
    --warning-fg: var(--amber-700);
    --warning-text: var(--amber-800);
    --warning-border: var(--amber-200);
    --warning-solid: var(--amber-500);

    --danger-bg: var(--red-50);
    --danger-fg: var(--red-700);
    --danger-text: var(--red-800);
    --danger-border: var(--red-200);
    --danger-solid: var(--red-500);

    --info-bg: var(--sky-50);
    --info-fg: var(--sky-700);
    --info-text: var(--sky-800);
    --info-border: var(--sky-200);
    --info-solid: var(--sky-500);

    --neutral-bg: var(--gray-100);
    --neutral-fg: var(--gray-700);
    --neutral-text: var(--gray-800);
    --neutral-border: var(--gray-200);
    --neutral-solid: var(--gray-400);

    --brand-bg: var(--navy-50);
    --brand-fg: var(--navy-700);
    --brand-text: var(--navy-900);
    --brand-border: var(--navy-100);
    --brand-solid: var(--navy-600);

    /* --- Abstände (4-px-Raster) ---------------------------------------- */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* --- Radien ------------------------------------------------------------ */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* --- Schatten (sehr dezent) ------------------------------------------- */
    --shadow-xs: 0 1px 2px rgb(16 24 40 / 0.04);
    --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.06);
    --shadow-md: 0 2px 4px -2px rgb(16 24 40 / 0.06), 0 4px 8px -2px rgb(16 24 40 / 0.08);
    --shadow-lg: 0 4px 6px -2px rgb(16 24 40 / 0.03), 0 12px 16px -4px rgb(16 24 40 / 0.08);
    --shadow-xl: 0 8px 8px -4px rgb(16 24 40 / 0.03), 0 20px 24px -4px rgb(16 24 40 / 0.1);
    --shadow-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
    --shadow-sticky-bottom: 0 -8px 16px -12px rgb(16 24 40 / 0.18);   /* am unteren Rand haftende Leisten */

    /* --- Schrift ------------------------------------------------------------ */
    --font-sans: 'InterVariable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 30px;
    --text-5xl: 36px;

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --tracking-tight: -0.011em;
    --tracking-tighter: -0.02em;
    --tracking-caps: 0.06em;

    /* --- Bedienelemente --------------------------------------------------- */
    --control-h-sm: 32px;
    --control-h: 36px;
    --control-h-lg: 44px;
    --touch-min: 40px;      /* Mindestgröße von Touch-Zielen (mobil / grober Zeiger) */

    /* --- Layout ------------------------------------------------------------ */
    --sidebar-w: 252px;
    --topbar-h: 64px;
    --mobilebar-h: 56px;
    --page-px: clamp(16px, 2.4vw, 40px);
    --page-gap: 20px;
    --form-max: 720px;
    --prose-max: 70ch;
    --sticky-top: 0px;      /* Abstand haftender Tabellenköpfe; Desktop: Höhe der Kopfleiste */

    /* --- Ebenen ------------------------------------------------------------ */
    --z-raised: 1;
    --z-sticky: 10;
    --z-topbar: 20;
    --z-mobilebar: 30;
    --z-backdrop: 40;
    --z-sidebar: 50;
    --z-skip: 100;

    /* --- Bewegung ---------------------------------------------------------- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --duration-fast: 120ms;
    --duration: 180ms;
    --duration-slow: 280ms;
}

/* Breakpoints (nur Referenz, CSS-Variablen sind in @media nicht nutzbar):
     sm 640px · md 768px · lg 1024px (Sidebar ↔ Drawer) · xl 1280px · 2xl 1600px */
@media (min-width: 1024px) {
    :root {
        --sticky-top: var(--topbar-h);
    }
}

/* Touch: Bedienelemente mindestens 40 px hoch (Buttons, Eingabefelder, Filter) */
@media (max-width: 767.98px), (pointer: coarse) {
    :root {
        --control-h-sm: var(--touch-min);
        --control-h: 44px;
    }
}