/* ==========================================================================
   Design Tokens — the ONLY place raw values (colors, sizes) are declared.
   Every other stylesheet must reference these via var(--token).
   The ThemeProvider injects a :root override for the per-shop subset, so
   switching a theme later means changing tokens here or the injected values,
   never the component styles.
   ========================================================================== */

:root {
    /* ---- Brand & semantic colors ---- */
    --color-primary: #C0446A;
    --color-primary-dark: #9E2F52;
    --color-primary-soft: #FBECF1;
    --color-secondary: #3C2A34;
    --color-accent: #D4A02A;
    --color-accent-soft: #F8EFD6;

    --color-success: #3E7D5A;
    --color-warning: #C08A2D;
    --color-danger: #C0392B;

    /* ---- Surfaces & text ---- */
    --color-bg: #FBF7F4;
    --color-surface: #FFFFFF;
    --color-card: #FFFFFF;
    --color-border: #EFE7E2;
    --color-border-strong: #DED4CD;

    --color-text: #2A2024;
    --color-text-secondary: #6E6360;
    --color-muted: #9C938E;
    --color-on-primary: #FFFFFF;

    /* ---- Radius ---- */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* ---- Spacing scale (4px base) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* ---- Soft shadows ---- */
    --shadow-xs: 0 1px 2px rgba(38, 32, 31, 0.05);
    --shadow-sm: 0 2px 8px rgba(38, 32, 31, 0.06);
    --shadow-md: 0 12px 30px rgba(38, 32, 31, 0.08);
    --shadow-lg: 0 24px 60px rgba(38, 32, 31, 0.12);
    --shadow-focus: 0 0 0 4px var(--color-primary-soft);

    /* ---- Typography ---- */
    --font-family-base: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    --font-family-heading: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;

    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-base: 1.0625rem;
    --fs-md: 1.1875rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fs-3xl: 3rem;
    --fs-4xl: 3.75rem;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
    --fw-black: 900;

    --lh-tight: 1.2;
    --lh-normal: 1.6;

    /* ---- Layout ---- */
    --container-max: 1240px;
    --container-pad: var(--space-5);
    --header-height: 76px;

    /* ---- Motion ---- */
    --transition-fast: 150ms;
    --transition: 260ms;
    --transition-slow: 500ms;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* ---- Z-index ---- */
    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 300;
}