/* =========================================================================
   EPAX Service Platform – Design-Tokens
   Dark Mode First. Alle Farben/Abstände/Radien als CSS-Custom-Properties,
   damit die Oberfläche konsistent und zentral steuerbar bleibt.
   ========================================================================= */

:root {
    /* Marke */
    --epax-blue: #2f6fed;
    --epax-blue-hover: #4a82f0;
    --epax-blue-soft: rgba(47, 111, 237, 0.14);
    --epax-orange: #f7941d;

    /* Typografie */
    --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto,
        Helvetica, Arial, sans-serif;
    --font-mono: "Cascadia Code", "JetBrains Mono", "SF Mono", Consolas, monospace;

    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-md: 0.875rem;
    --fs-lg: 1rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.625rem;
    --fs-3xl: 2rem;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-tight: 1.2;
    --lh-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.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Radien */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;

    /* Layout */
    --sidebar-width: 256px;
    --topbar-height: 60px;
    --content-max: 1200px;

    --transition: 150ms ease;
}

/* ---- Dark Theme (Standard) ---- */
:root,
[data-theme="dark"] {
    --bg: #0b0d10;
    --bg-elevated: #111419;
    --surface: #161a20;
    --surface-hover: #1d222a;
    --surface-active: #232932;

    --border: #262b33;
    --border-strong: #343b46;

    --text: #e7eaee;
    --text-muted: #9aa3af;
    --text-subtle: #6b7280;

    --brand: var(--epax-blue);
    --brand-hover: var(--epax-blue-hover);
    --brand-soft: var(--epax-blue-soft);
    --on-brand: #ffffff;

    --success: #2fb673;
    --success-soft: rgba(47, 182, 115, 0.16);
    --warning: #e0a225;
    --warning-soft: rgba(224, 162, 37, 0.16);
    --danger: #e5484d;
    --danger-soft: rgba(229, 72, 77, 0.16);
    --info: #3b82f6;
    --info-soft: rgba(59, 130, 246, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);

    --overlay: rgba(0, 0, 0, 0.6);
}

/* ---- Light Theme (optional, Dark bleibt Default) ---- */
[data-theme="light"] {
    --bg: #f5f7fa;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-hover: #f0f3f7;
    --surface-active: #e8edf3;

    --border: #e2e8f0;
    --border-strong: #cbd5e1;

    --text: #0f172a;
    --text-muted: #475569;
    --text-subtle: #94a3b8;

    --on-brand: #ffffff;

    --success-soft: rgba(47, 182, 115, 0.12);
    --warning-soft: rgba(224, 162, 37, 0.14);
    --danger-soft: rgba(229, 72, 77, 0.10);
    --info-soft: rgba(59, 130, 246, 0.10);

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);

    --overlay: rgba(15, 23, 42, 0.4);
}