/**
 * Design Tokens & CSS Custom Properties
 * Extracted and systematized from XStore Elementor Grocery Mega Market
 * https://xstore.8theme.com/elementor3/grocery-mega-market/
 */

@font-face {
  font-family: 'Onest';
  src: url('../fonts/Onest-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================================================
     1. COLOR PALETTE (ERSAG Turquoise Cyan & Deep Ocean Navy)
     ========================================================================== */
  /* Primary & Dark Tones */
  --color-primary: #16324f;            /* Deep ocean navy - brand base & dark text */
  --color-primary-rgb: 22, 50, 79;
  --color-primary-dark: #0f2236;
  --color-primary-light: #244b72;

  /* Accent & Action Blues */
  --color-accent: #05a4cc;             /* Signature vibrant turquoise cyan */
  --color-accent-rgb: 5, 164, 204;
  --color-accent-hover: #038bb0;
  --color-accent-dark: #027393;
  --color-accent-soft: #e1f4fb;        /* Soft icy cyan tint for tags & badges */

  /* Highlights & Special Accents */
  --color-highlight-yellow: #fdcd49;   /* Warm golden amber for promo headlines */
  --color-ticker-yellow: #fdcd49;      /* Marquee background - warm amber */
  --color-star-yellow: #ffcd00;        /* Review star rating */
  --color-sale-red: #d51243;           /* Discount sale price & hot tags */
  --color-sale-red-bg: #dd3333;

  /* Neutrals & Surfaces */
  --color-bg-white: #ffffff;
  --color-bg-soft: #f5f5f3;            /* Neutral surface behind white cards */
  --color-bg-muted: #fafaf9;
  --color-bg-input: #f2f3f1;           /* Neutral input background */
  --color-bg-footer: #ffffff;

  /* Borders & Dividers */
  --color-border: #e3e5e2;
  --color-border-light: #ececec;
  --color-border-dark: #cccccc;

  /* Text Colors */
  --color-text-main: #55585b;          /* Body copy */
  --color-text-heading: #292f33;       /* Headings & bold titles */
  --color-text-dark: #292f33;
  --color-text-muted: #85898b;
  --color-text-light: #a6aaac;
  --color-text-white: #ffffff;

  /* ==========================================================================
     2. TYPOGRAPHY SYSTEM
     ========================================================================== */
  --font-heading: 'Onest', sans-serif;
  --font-body: 'Onest', sans-serif;
  --font-accent: 'Courgette', cursive;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Font Size Scale */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.8125rem;   /* 13px */
  --fs-caption: 0.875rem; /* 14px */
  --fs-base: 0.9375rem; /* 15px */
  --fs-body: 1.0625rem; /* 17px - base body font */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.1875rem;   /* 19px - product titles */
  --fs-xl: 1.25rem;     /* 20px */
  --fs-2xl: 1.3125rem;  /* 21px - feature titles */
  --fs-3xl: 1.5rem;     /* 24px - script accent / h4 */
  --fs-4xl: 1.875rem;   /* 30px - blog title / h3 */
  --fs-5xl: 2.125rem;   /* 34px - section heading / h2 */
  --fs-6xl: 2.375rem;   /* 38px - banner title */
  --fs-7xl: 2.625rem;   /* 42px - deal hero title / h1 */
  --fs-display: 3.75rem;/* 60px - big lookbook title */

  /* Semantic roles: all matching components share these values. */
  --color-banner-surface: #0b2a45;
  --title-page-size: clamp(1.625rem, 1.2rem + 1vw, 2rem);
  --title-section-size: clamp(1.375rem, 1.125rem + .6vw, 1.75rem);
  --title-banner-size: clamp(1.625rem, 1.25rem + 1vw, 2rem);
  --title-feature-size: 1.375rem;
  --title-card-size: 1rem;
  --title-product-size: .9375rem;
  --title-label-size: .9375rem;
  --title-weight: 700;
  --title-product-weight: 600;
  --title-line-height: 1.2;
  --section-gap: 56px;
  --section-heading-gap: 24px;
  --card-gap: 20px;

  /* Line Heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.4;
  --lh-relaxed: 1.6;
  --lh-loose: 1.76;

  /* ==========================================================================
     3. SPACING SYSTEM
     ========================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 15px;
  --space-5: 20px;
  --space-6: 25px;
  --space-7: 30px;
  --space-8: 40px;
  --space-10: 50px;
  --space-12: 60px;
  --space-14: 70px;
  --space-16: 80px;
  --space-20: 90px;

  /* ==========================================================================
     4. BORDER RADIUS
     ========================================================================== */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;     /* Core XStore standard radius */
  --radius-lg: 8px;
  --radius-pill: 50px;
  --radius-round: 300px;
  --radius-circle: 50%;

  /* ==========================================================================
     5. SHADOWS & ELEVATION
     ========================================================================== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-tooltip: 0 0 10px rgba(0, 0, 0, 0.18);
  --shadow-hotspot: 0 0 0 8px rgba(255, 255, 255, 0.4);

  /* ==========================================================================
     6. CONTAINER & LAYOUT DIMENSIONS
     ========================================================================== */
  --site-max-width: 1680px;
  --container-max-width: 1650px;
  --header-top-height: 42px;
  --header-main-height: 92px;
  --header-nav-height: 52px;
  --transition-fast: 0.18s ease-in-out;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-modal: 1000;
}

@media (max-width: 767px) {
  :root {
    --section-gap: 40px;
    --section-heading-gap: 20px;
  }
}