/* ==========================================================================
   LOCAL FONTS (IBM Plex Sans Arabic)
   ========================================================================== */

/* IBM Plex Sans Arabic (Primary — Arabic frontend) */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/ibm-plex-sans-arabic-500.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');
}

:root {
    /* Brand Colors */
    --color-primary: #E62E2E;         /* OSTORE Red */
    --color-primary-hover: #305e43;
    --color-primary-light: #edf2ef;
    
    /* Neutral Colors */
    --color-text-main: #111111;
    --color-text-muted: #5d5d5d;
    --color-text-light: #767676;
    --color-bg-white: #ffffff;
    --color-bg-gray: #f7f7f7;
    --color-bg-cream: #faf5ee;       /* Savings cards and promo backgrounds */
    --color-bg-beige: #f9f6f2;
    --color-border: #d6d6d6;
    --color-border-light: #e8e8e8;
    
    /* Status Colors */
    --color-sale: #cc0000;
    --color-success: #008a00;
    --color-warning: #ff8a00;
    --color-bestseller-bg: #333333;
    --color-bestseller-text: #ffd700; /* Gold */

    /* Typography — Arabic-first frontend (IBM Plex Sans Arabic only) */
    --font-heading: 'IBM Plex Sans Arabic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body: 'IBM Plex Sans Arabic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
    /* Layout Sizes */
    --container-width: 1400px;
    --header-height: 80px;

    /* Spacing Scale (Target-inspired uniform layout spacing) — rem so it scales with user font-size/zoom */
    --space-xxs: 0.25rem;  /* 4px */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 0.75rem;   /* 12px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-xxl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 9999px;
    --radius-circle: 50%;
    --theme-radius: var(--radius-md);

    /* Unified button component (.ostore-btn) — aliased to brand tokens */
    --ostore-primary: var(--color-primary);
    --ostore-primary-hover: var(--color-primary-hover);
    --ostore-button-bg: var(--ostore-primary);
    --ostore-button-bg-hover: var(--ostore-primary-hover);
    --ostore-button-bg-pressed: color-mix(in srgb, var(--ostore-primary) 82%, black);
    --ostore-button-edge: var(--ostore-primary);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);

    /* Purpose-specific shadows — named because the exact same value was
       already duplicated identically across many components (glossy icon
       buttons, focus rings, slide-in drawers/panels); naming them here
       keeps that repetition as one source of truth instead of copies. */
    --shadow-button: inset 0 0.75px 0 rgb(255 255 255 / 0.2), 0 1px 2px rgb(0 0 0 / 0.16);
    --shadow-focus-ring: 0 0 0 3px var(--color-primary-light, #fff0f0);
    --shadow-drawer: -4px 0 24px rgba(0, 0, 0, 0.1);

    /* ==========================================================================
       RESPONSIVE FLUID UNITS SYSTEM
       Fixed → Scalable → Fluid. See design-system/FLUID-UNITS.md for usage rules.
       ========================================================================== */

    /* Fixed tokens — precise UI details that must not scale (borders, icon strokes, min touch target) */
    --unit-border: 1px;
    --unit-icon: 1.25rem;
    --unit-control-min: 2.75rem; /* WCAG minimum touch target (~44px) */

    /* Scalable typography — rem, matches the .fs-* utility scale in critical-base.css */
    --text-xxs: 0.75rem;
    --text-xs: 0.875rem;
    --text-sm: 1rem;
    --text-md: 1.25rem;
    --text-lg: 1.5rem;
    --text-xl: 2rem;
    --text-2xl: 2.5rem;
    --text-3xl: 3rem;

    /* Fluid spacing — for section padding, container gutters, hero/product-grid gaps */
    --space-fluid-sm: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
    --space-fluid-md: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
    --space-fluid-lg: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    --space-fluid-xl: clamp(1.5rem, 1rem + 1.2vw, 2rem);
    --space-fluid-2xl: clamp(2rem, 1.4rem + 2vw, 3rem);
    --space-fluid-section: clamp(2.5rem, 1.8rem + 2.8vw, 5rem);

    /* Fluid typography — headings scale smoothly, body-range values keep a readable floor */
    --text-fluid-sm: clamp(0.875rem, 0.825rem + 0.2vw, 1rem);
    --text-fluid-md: clamp(1rem, 0.925rem + 0.3vw, 1.125rem);
    --text-fluid-lg: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
    --text-fluid-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    --text-fluid-2xl: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    --text-fluid-3xl: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);

    /* Fluid container — gutter scales with viewport, max-width mirrors --container-width in rem */
    --ostore-gutter: clamp(1rem, 2vw, 1.5rem);
    --ostore-container: 87.5rem; /* 1400px */
}