/*! rechnung.best v2 — Design Tokens (Light + Dark) */

html[data-css="v2"] {
    /* ========== FONT FAMILIES ========== */
    --font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    /* ========== FONT SIZES (body 16px) ========== */
    --text-xs: 0.75rem;       /* 12 / 16 */
    --text-sm: 0.875rem;      /* 14 / 20 */
    --text-base: 1rem;        /* 16 / 24 */
    --text-lg: 1.125rem;      /* 18 / 28 */
    --text-xl: 1.25rem;       /* 20 / 28 */
    --text-2xl: 1.5rem;       /* 24 / 32 */
    --text-3xl: 1.875rem;     /* 30 / 38 */
    --text-4xl: 2.25rem;      /* 36 / 44 */
    --text-5xl: 3rem;         /* 48 / 56 */

    --leading-xs: 1rem;
    --leading-sm: 1.25rem;
    --leading-base: 1.5rem;
    --leading-lg: 1.75rem;
    --leading-xl: 1.75rem;
    --leading-2xl: 2rem;
    --leading-3xl: 2.375rem;
    --leading-4xl: 2.75rem;
    --leading-5xl: 3.5rem;

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

    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;

    /* ========== SPACING (4px Grid) ========== */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ========== RADIUS ========== */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;

    /* ========== MOTION ========== */
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-slow: 400ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ========== SEMANTIC (Modul-unabhaengig) ========== */
    --success: #10B981;
    --success-soft: #ECFDF5;
    --success-ring: rgba(16, 185, 129, 0.35);
    --warning: #F59E0B;
    --warning-soft: #FFFBEB;
    --warning-ring: rgba(245, 158, 11, 0.35);
    --danger: #EF4444;
    --danger-soft: #FEF2F2;
    --danger-ring: rgba(239, 68, 68, 0.35);
    --info: #3B82F6;
    --info-soft: #EFF6FF;
    --info-ring: rgba(59, 130, 246, 0.35);

    /* ========== Z-INDEX SCALE ========== */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-sidebar: 300;
    --z-topbar: 400;
    --z-modal-backdrop: 1900;
    --z-modal: 2000;
    --z-toast: 2100;
    --z-tooltip: 2200;
}

/* ========================================
   LIGHT MODE (default)
   ======================================== */
html[data-css="v2"][data-theme="light"],
html[data-css="v2"][data-theme="auto"],
html[data-css="v2"]:not([data-theme]) {
    color-scheme: light;

    --bg: #FAFAF9;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-overlay: #FFFFFF;
    --surface-sunken: #F5F5F4;

    --border: #E7E5E4;
    --border-strong: #D6D3D1;

    --text: #1C1917;
    --text-muted: #57534E;
    --text-subtle: #A8A29E;
    --text-inverse: #FAFAF9;

    /* Layered, soft shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.10), 0 8px 16px rgba(0, 0, 0, 0.06);

    /* Default accent (Finanzen-Blue) — overridden per data-page-context in themes.css */
    --accent: #3B82F6;
    --accent-hover: #2563EB;
    --accent-active: #1D4ED8;
    --accent-soft: #EFF6FF;
    --accent-ring: rgba(59, 130, 246, 0.35);
    --accent-on: #FFFFFF;
}

/* ========================================
   DARK MODE (eigene Palette, keine Inversion)
   ======================================== */
html[data-css="v2"][data-theme="dark"] {
    color-scheme: dark;

    --bg: #0C0A09;
    --surface: #1C1917;
    --surface-raised: #292524;
    --surface-overlay: #3C3633;
    --surface-sunken: #0C0A09;

    --border: #292524;
    --border-strong: #44403C;

    --text: #FAFAF9;
    --text-muted: #D6D3D1;
    --text-subtle: #A8A29E;
    --text-inverse: #0C0A09;

    /* Im Dark Mode: keine shadows, Elevation via Helligkeit */
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);

    /* Entsaettigte Accent-Werte */
    --accent: #60A5FA;
    --accent-hover: #93C5FD;
    --accent-active: #3B82F6;
    --accent-soft: rgba(96, 165, 250, 0.10);
    --accent-ring: rgba(96, 165, 250, 0.45);
    --accent-on: #0C0A09;

    /* Dark-spezifische Semantic */
    --success: #34D399;
    --success-soft: rgba(52, 211, 153, 0.10);
    --warning: #FBBF24;
    --warning-soft: rgba(251, 191, 36, 0.10);
    --danger: #F87171;
    --danger-soft: rgba(248, 113, 113, 0.10);
    --info: #60A5FA;
    --info-soft: rgba(96, 165, 250, 0.10);
}