/**
 * Liesegang Portal — Design Tokens (tokens.css)
 *
 * Konform zu AGENTS.md §2 (CI, Kontraste & barrierefreie Typografie)
 * Brand Primary Hex: #00656c (Offizielles 2024 Corporate Design)
 * WCAG 2.1 AA konform: >= 4.5:1 Textkontrast, >= 3:1 UI-Elemente
 */

:root {
    /* Typografie (Ausschließlich System-Sans, kein externer Font!) */
    --lg-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --lg-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* Schriftgrößen & Zeilenhöhen */
    --lg-text-xs: 0.75rem;     /* 12px */
    --lg-text-sm: 0.875rem;    /* 14px */
    --lg-text-base: 1rem;      /* 16px */
    --lg-text-lg: 1.125rem;    /* 18px */
    --lg-text-xl: 1.25rem;     /* 20px */
    --lg-text-2xl: 1.5rem;     /* 24px */

    /* Radien & Schatten */
    --lg-radius-sm: 0.25rem;   /* 4px */
    --lg-radius-md: 0.5rem;    /* 8px */
    --lg-radius-lg: 0.75rem;   /* 12px */
    --lg-radius-full: 9999px;

    /* Abstände */
    --lg-space-1: 0.25rem;
    --lg-space-2: 0.5rem;
    --lg-space-3: 0.75rem;
    --lg-space-4: 1rem;
    --lg-space-6: 1.5rem;
    --lg-space-8: 2rem;

    /* Übergänge */
    --lg-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --lg-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   HELLER MODUS (Standard / [data-theme="light"])
   ========================================================================== */
:root,
[data-theme="light"] {
    /* Markenfarben: #00656c auf #ffffff = 6.82:1 (PASS WCAG AA/AAA) */
    --lg-brand: #00656c;
    --lg-brand-hover: #004d52;
    --lg-brand-active: #00363a;
    --lg-brand-subtle: #e6f2f3;
    --lg-brand-contrast: #ffffff;

    /* Neutralfarben & Hintergründe */
    --lg-bg-canvas: #f8fafc;
    --lg-bg-surface: #ffffff;
    --lg-bg-surface-elevated: #ffffff;
    --lg-bg-muted: #f1f5f9;

    /* Text & Iconfarben */
    --lg-text-main: #0f172a;        /* Kontrast 15.8:1 auf Weiß */
    --lg-text-muted: #475569;       /* Kontrast 5.9:1 auf Weiß */
    --lg-text-subtle: #64748b;      /* Kontrast 4.6:1 auf Weiß */

    /* Rahmen & Trennlinien */
    --lg-border-subtle: #e2e8f0;
    --lg-border-focus: #00656c;

    /* Statusfarben (Barrierefrei) */
    --lg-danger: #b91c1c;           /* 5.6:1 */
    --lg-danger-bg: #fef2f2;
    --lg-danger-border: #fecaca;
    --lg-success: #15803d;          /* 4.8:1 */
    --lg-success-bg: #f0fdf4;
    --lg-success-border: #bbf7d0;
    --lg-warning: #b45309;          /* 4.9:1 */
    --lg-warning-bg: #fffbeb;
    --lg-warning-border: #fde68a;

    /* Schatten */
    --lg-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --lg-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
    --lg-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
}

/* ==========================================================================
   DUNKLER MODUS ([data-theme="dark"] oder prefers-color-scheme: dark)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Aufgehelltes Teal für >= 4.5:1 Textkontrast auf dunklen Flächen */
        --lg-brand: #38b2ba;
        --lg-brand-hover: #56c5cc;
        --lg-brand-active: #80d6dc;
        --lg-brand-subtle: #0f2d30;
        --lg-brand-contrast: #0f172a;

        /* Dunkle Oberflächen */
        --lg-bg-canvas: #090d16;
        --lg-bg-surface: #111827;
        --lg-bg-surface-elevated: #1f2937;
        --lg-bg-muted: #1e293b;

        /* Textfarben */
        --lg-text-main: #f8fafc;        /* 15.6:1 auf #111827 */
        --lg-text-muted: #cbd5e1;       /* 9.8:1 */
        --lg-text-subtle: #94a3b8;      /* 5.2:1 */

        /* Rahmen */
        --lg-border-subtle: #334155;
        --lg-border-focus: #38b2ba;

        /* Statusfarben Dark */
        --lg-danger: #f87171;
        --lg-danger-bg: #450a0a;
        --lg-danger-border: #7f1d1d;
        --lg-success: #4ade80;
        --lg-success-bg: #052e16;
        --lg-success-border: #14532d;
        --lg-warning: #fbbf24;
        --lg-warning-bg: #451a03;
        --lg-warning-border: #78350f;

        --lg-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
        --lg-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
        --lg-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.5);
    }
}

[data-theme="dark"] {
    --lg-brand: #38b2ba;
    --lg-brand-hover: #56c5cc;
    --lg-brand-active: #80d6dc;
    --lg-brand-subtle: #0f2d30;
    --lg-brand-contrast: #0f172a;

    --lg-bg-canvas: #090d16;
    --lg-bg-surface: #111827;
    --lg-bg-surface-elevated: #1f2937;
    --lg-bg-muted: #1e293b;

    --lg-text-main: #f8fafc;
    --lg-text-muted: #cbd5e1;
    --lg-text-subtle: #94a3b8;

    --lg-border-subtle: #334155;
    --lg-border-focus: #38b2ba;

    --lg-danger: #f87171;
    --lg-danger-bg: #450a0a;
    --lg-danger-border: #7f1d1d;
    --lg-success: #4ade80;
    --lg-success-bg: #052e16;
    --lg-success-border: #14532d;
    --lg-warning: #fbbf24;
    --lg-warning-bg: #451a03;
    --lg-warning-border: #78350f;

    --lg-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --lg-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --lg-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.5);
}