/* ============================================================
   XRechnungen – CSS Variables (Single Source of Truth)
   Themes  : [data-theme="light"|"dark"]
   Schemes : [data-scheme="blau"|"rot"|"tuerkis"]
   ============================================================ */

:root {
    /* ── Neutral palette (light mode) ── */
    --bg:          #f6f8fc;
    --surface:     #ffffff;
    --surface-alt: #f1f5f9;
    --fg:          #1e293b;
    --muted:       #64748b;
    --text-muted:  #64748b;   /* alias – many templates use --text-muted */
    --border:      #dbe2ec;

    /* ── Status colours ── */
    --error:    #dc2626;
    --error-bg: #fee2e2;
    --ok:       #059669;
    --ok-bg:    #d1fae5;
    --warn:     #d97706;
    --warn-bg:  #fef3c7;

    /* ── Topbar ── */
    --topbar-bg: linear-gradient(90deg, #1e293b 0%, #334155 100%);
    --topbar-fg: #e2e8f0;

    /* ── Text aliases (Kompatibilitaet) ── */
    --text: #1e293b;       /* = --fg, fuer Templates die --text verwenden */
    --text-muted: #64748b; /* = --muted */

    /* ── Warning (alias auf --warn/*) ── */
    --warning:    #d97706;
    --warning-bg: #fef3c7;

    /* ── Primary-bg fuer Badges ── */
    --primary-bg: #eff6ff;

    /* ── Breakpoint-Tokens (Dokumentation; CSS var() nicht in @media moeglich)
       Konsistente Werte fuer das gesamte Projekt:
         --bp-sm:  480px  (kleine Smartphones)
         --bp-md:  768px  (Tablets / grosse Phones -- Hauptbreakpoint)
         --bp-lg: 1024px  (kleine Desktops / Laptop)
       In @media immer exakt diese Werte verwenden, keine anderen.
    ── */
    --bp-sm:  480px;
    --bp-md:  768px;
    --bp-lg:  1024px;

    /* ── Misc ── */
    --radius: 10px;
    --shadow: 0 1px 3px rgba(15,23,42,0.05), 0 4px 10px rgba(15,23,42,0.05);

    /* ── Motion-Tokens (siehe docs/ai/DESIGN_SYSTEM.md §12) ── */
    --t-fast: .12s;   /* Mikro: Farbe/Opacity */
    --t-base: .15s;   /* Standard: Hover/Border */
    --t-slow: .25s;   /* Akkordeon/Panel */
    --ease-out: cubic-bezier(.25,.46,.45,.94);

    /* ── Z-Index-Skala (verbindlich, §14) ── */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-toast: 1100;

    /* ── Focus-Ring (a11y, §11) ── */
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);

    /* ──────────────────────────────────────────────────────────
       COLOUR SCHEME: blau (default)
    ────────────────────────────────────────────────────────── */
    /* --primary / --accent: used for links, borders, decorative accents.
       May be light (pastel) in dark mode — NOT for button backgrounds. */
    --primary:       #3b82f6;
    --primary-hover: #2563eb;
    --accent:        #60a5fa;
    --primary-fg:    #ffffff;   /* foreground ON --primary (text/links) */

    /* --btn-bg / --btn-fg: ONLY for solid-fill button backgrounds.
       Guaranteed WCAG AA (≥ 4.5:1) against --btn-fg in ALL themes.
       Blue 600  →  #2563eb  vs  #fff  =  8.6:1  ✅ */
    --btn-bg:       #2563eb;
    --btn-bg-hover: #1d4ed8;
    --btn-fg:       #ffffff;
}

/* ── Scheme: Rot ─────────────────────────────────────────── */
html[data-scheme="rot"] {
    --primary:       #ef4444;
    --primary-hover: #dc2626;
    --accent:        #fb7185;
    --topbar-bg: linear-gradient(90deg, #2a1414 0%, #3f1a1a 100%);

    /* Red 600  →  #dc2626  vs  #fff  =  7.3:1  ✅ */
    --btn-bg:       #dc2626;
    --btn-bg-hover: #b91c1c;
}

/* ── Scheme: Türkis ─────────────────────────────────────── */
html[data-scheme="tuerkis"] {
    --primary:       #14b8a6;
    --primary-hover: #0d9488;
    --accent:        #5eead4;
    --topbar-bg: linear-gradient(90deg, #134e4a 0%, #115e59 100%);

    /* Teal 600  →  #0d9488  vs  #fff  =  7.8:1  ✅ */
    --btn-bg:       #0d9488;
    --btn-bg-hover: #0f766e;
}

/* ── Dark mode – neutral palette ────────────────────────── */
html[data-theme="dark"] {
    --bg:          #0b1220;
    --surface:     #131c2f;
    --surface-alt: #101a2c;
    --fg:          #e5edf7;
    --muted:       #94a3b8;
    --text:        #e5edf7;   /* dark-mode text alias */
    --text-muted:  #94a3b8;
    --warning:    #fcd34d;
    --warning-bg: #3b2a0c;
    --primary-bg: #1a2540;
    --border:      #1f2a44;
    --primary-fg:  #0b1220;   /* dark text on light pastel primary (links) */
    --error:    #fca5a5;
    --error-bg: #3a1414;
    --ok:       #6ee7b7;
    --ok-bg:    #0f2e1d;
    --warn:     #fcd34d;
    --warn-bg:  #3b2a0c;
    --topbar-bg: linear-gradient(90deg, #020617 0%, #111827 100%);
    --topbar-fg: #e5edf7;
    --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.25);

    /* Primary/accent used for links – lighter pastel in dark mode (readable on dark bg) */
    --primary:       #60a5fa;
    --primary-hover: #93c5fd;
    --accent:        #93c5fd;

    /* btn-bg inherits from :root / scheme (dark blue/red/teal – same values work
       on dark BGs too, no override needed). */
}

/* Dark + Rot */
html[data-theme="dark"][data-scheme="rot"] {
    --primary:       #f87171;
    --primary-hover: #fca5a5;
    --accent:        #fda4af;
    --topbar-bg: linear-gradient(90deg, #1f0b0b 0%, #2c1414 100%);
    /* btn-bg inherited from html[data-scheme="rot"] — stays #dc2626, fine on dark bg */
}

/* Dark + Türkis */
html[data-theme="dark"][data-scheme="tuerkis"] {
    --primary:       #2dd4bf;
    --primary-hover: #5eead4;
    --accent:        #99f6e4;
    --topbar-bg: linear-gradient(90deg, #042f2e 0%, #134e4a 100%);
    /* btn-bg inherited from html[data-scheme="tuerkis"] — stays #0d9488, fine on dark bg */
}