/* ==========================================================================
   Storefront base: design tokens, reset, typography, helpers
   ========================================================================== */

:root {
    /* Fonts */
    --font-display: 'Baloo 2', 'Outfit', system-ui, sans-serif;
    --font-body: 'Outfit', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Text */
    --color-text: #1C1530;
    --color-text-muted: #6A6080;
    --color-ink: #2A1052;

    /* Brand */
    --color-primary: #D91E5B;
    --color-primary-dark: #B0124A;
    --color-on-primary: #FFFFFF;
    --color-price: #15803D;
    --color-offer: #5B21B6;

    /* Surfaces */
    --color-page: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-soft: #F6F1FF;
    --color-border: #ECE6F5;
    --color-border-strong: #E2D4F7;

    /* Header (main theme; category themes override these) */
    --header-gradient: linear-gradient(180deg, #E9DBFF 0%, #F4EDFF 62%, #FFFFFF 100%);
    --header-text: #2A1052;

    /* Shape */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Elevation */
    --shadow-raised: 0 3px 10px rgba(42, 16, 82, 0.14);
    --shadow-float: 0 8px 22px rgba(217, 30, 91, 0.40);

    /* Layout */
    --page-max: 1200px;
    --page-gutter: 14px;
    --bottom-nav-height: 68px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
    color: inherit;
}

h1,
h2,
h3,
p {
    margin: 0;
}

/* Icons: size and colour come from the parent */
.icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon--bolt,
.icon--home {
    fill: currentColor;
    stroke: none;
}

/* Typography helpers */
.section-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--color-text);
}

.display-title {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1;
}

.text-muted {
    color: var(--color-text-muted);
}

/* Accessibility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}