/**
 * Royal Zhick Shop — Design Tokens
 * Phase 2: single source of truth for the storefront redesign.
 * Consumed by shop.css and future component styles (Phases 3+).
 */

:root {
    /* ── Surfaces ── */
    --color-bg: #F2F2F2;
    --color-surface: #FFFFFF;
    --color-border: #E7E0D3;

    /* ── Commerce accent (shop, cart, product CTAs) ── */
    --color-accent: #FCB433;
    --color-accent-hover: #E3A11A;

    /* ── Auth accent (login/register primary buttons only) ── */
    --color-auth: #433FCB;
    --color-auth-hover: #3A38B0;

    /* ── Text ── */
    --color-text: #222222;
    --color-text-muted: #B6B6B6;

    /* ── Semantic ── */
    --color-error: #DC2626;
    --color-success: #16A34A;

    /* ── Qty controls (charcoal icons, not Bootstrap blue) ── */
    --color-qty-icon: #222222;

    /* ── Overlay ── */
    --color-overlay: rgba(34, 34, 34, 0.4);

    /* ── Spacing (4px base) ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;
    --space-10: 64px;
    --space-12: 96px;

    /* ── Border radius ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ── Shadows (minimal — prefer borders on cards) ── */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px rgba(34, 34, 34, 0.06);
    --shadow-md: 0 4px 12px rgba(34, 34, 34, 0.08);
    --shadow-auth: 0 2px 8px rgba(34, 34, 34, 0.06);
    --shadow-focus: 0 0 0 3px rgba(252, 180, 51, 0.35);
    --shadow-focus-auth: 0 0 0 3px rgba(67, 63, 203, 0.35);

    /* ── Typography ── */
    --font-family-base: Shabnam, Tahoma, sans-serif;
    --font-size-body: 16px;
    --font-size-meta: 13px;
    --font-size-product-title: 14px;
    --font-size-section-title: 20px;
    --font-size-hero: 28px;
    --font-size-price: 16px;
    --line-height-base: 1.5;
    --line-height-tight: 1.25;

    /* ── Layout ── */
    --container-padding-mobile: 16px;
    --container-padding-tablet: 24px;
    --container-padding-desktop: 32px;
    --touch-target-min: 44px;
    --drawer-row-height: 52px;

    /* ── Motion ── */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-drawer: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Breakpoints (for reference in JS; CSS uses min-width queries) ── */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-xxl: 1440px;
}

@media (min-width: 768px) {
    :root {
        --font-size-product-title: 16px;
        --font-size-section-title: 24px;
        --font-size-hero: 40px;
        --font-size-price: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-drawer: 0ms;
    }
}