/* ==========================================================================
   Design tokens (spec §3). Everything else in this project should read
   from these custom properties instead of hardcoding colors/spacing, so
   that changing a theme is a matter of editing values here (or, for a
   store-specific theme, see assets/js/theme.js applyStoreTheme()).

   Palette: a 2026-leaning indigo/teal palette, tuned first for
   WCAG AA contrast, then for trend (spec §3 explicitly orders it that
   way: "don't sacrifice contrast/accessibility for trend").
   ========================================================================== */

:root {
    /* Brand colors — overridden per-store server-side (inline <style> in
       layout head) and can be further overridden at runtime by
       assets/js/theme.js when a store's theme arrives from an API. */
    --color-primary: #5B5BF6;
    --color-primary-hover: #4747d6;
    --color-secondary: #0EA5A5;
    --color-accent: #F97316;

    --color-background: #FFFFFF;
    --color-surface: #F7F7FB;
    --color-surface-alt: #EFEFF7;
    --color-text: #16161D;
    --color-text-muted: #6B6B7B;
    --color-border: #E4E4EE;

    --color-success: #12B76A;
    --color-warning: #F79009;
    --color-danger: #F04438;
    --color-info: #0BA5EC;
    --color-sale: #E11D48;

    --color-on-primary: #FFFFFF;
    --color-overlay: rgba(15, 15, 25, 0.55);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(20, 20, 35, 0.06);
    --shadow-md: 0 6px 20px rgba(20, 20, 35, 0.08);
    --shadow-lg: 0 20px 48px rgba(20, 20, 35, 0.14);

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

    --font-family-base: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
    --container-max: 1280px;

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    --header-height: 72px;
    --header-height-mobile: 60px;

    color-scheme: light;
}

/* Dark theme overrides — toggled via [data-theme="dark"] on <html>
   (spec §4: user choice stored in localStorage, no reload needed). */
:root[data-theme="dark"] {
    --color-background: #101018;
    --color-surface: #17171F;
    --color-surface-alt: #1D1D28;
    --color-text: #F2F2F7;
    --color-text-muted: #A2A2B3;
    --color-border: #2B2B38;

    --color-overlay: rgba(0, 0, 0, 0.65);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
}

/* Respect OS preference on first visit, before JS has a chance to read
   localStorage (spec §4: detect system theme if no stored choice). This
   media-query fallback is intentionally overridden by the explicit
   [data-theme] attribute JS sets as soon as it runs. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --color-background: #101018;
        --color-surface: #17171F;
        --color-surface-alt: #1D1D28;
        --color-text: #F2F2F7;
        --color-text-muted: #A2A2B3;
        --color-border: #2B2B38;
        --color-overlay: rgba(0, 0, 0, 0.65);
        color-scheme: dark;
    }
}