/* ============================================================
   variables.css – Design-Tokens (Light/Dark Mode)
   Wird sowohl vom Frontend als auch vom Adminbereich genutzt.
   ============================================================ */

:root {
    /* Typografie: native Systemschriften -> keine Web-Font-Ladezeit */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Radien & Abstände (Apple-Style: großzügig gerundet) */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    --container-max: 1280px;

    /* Übergänge */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 150ms var(--ease);
    --transition-base: 250ms var(--ease);
    --transition-slow: 450ms var(--ease);

    /* Schatten */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.16);

    /* Glassmorphism */
    --glass-blur: saturate(180%) blur(20px);

    /* Markenfarbe (Akzent) – kann pro Shop angepasst werden */
    --color-accent: #0071e3;
    --color-accent-hover: #0077ed;
    --color-accent-rgb: 0, 113, 227;
    --color-success: #12a454;
    --color-danger: #e0393e;
    --color-warning: #d98c00;

    /* Light Mode (Standard) */
    --color-bg: #ffffff;
    --color-bg-secondary: #f5f5f7;
    --color-bg-tertiary: #fbfbfd;
    --color-surface: #ffffff;
    --color-surface-glass: rgba(255, 255, 255, 0.72);
    --color-border: rgba(0, 0, 0, 0.08);
    --color-text: #1d1d1f;
    --color-text-secondary: #6e6e73;
    --color-text-muted: #86868b;
    --color-overlay: rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] {
    --color-bg: #000000;
    --color-bg-secondary: #111113;
    --color-bg-tertiary: #161618;
    --color-surface: #1c1c1e;
    --color-surface-glass: rgba(28, 28, 30, 0.72);
    --color-border: rgba(255, 255, 255, 0.12);
    --color-text: #f5f5f7;
    --color-text-secondary: #a1a1a6;
    --color-text-muted: #86868b;
    --color-overlay: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #000000;
        --color-bg-secondary: #111113;
        --color-bg-tertiary: #161618;
        --color-surface: #1c1c1e;
        --color-surface-glass: rgba(28, 28, 30, 0.72);
        --color-border: rgba(255, 255, 255, 0.12);
        --color-text: #f5f5f7;
        --color-text-secondary: #a1a1a6;
        --color-text-muted: #86868b;
        --color-overlay: rgba(0, 0, 0, 0.6);
    }
}