/* Giovision design tokens — Phase 3 / DESIGN-SYSTEM.md */
:root {
  /* Colour — brand lock: one Giovision blue for UI chrome (no darker navy) */
  --gv-color-blue: #1f2a7c;
  --gv-color-navy: #1f2a7c;
  --gv-color-red: #e31b23;
  --gv-color-green: #00a651;
  --gv-color-whatsapp: #25d366;
  --gv-color-text: #1a1a1a;
  --gv-color-text-secondary: #4a5568;
  --gv-color-text-muted: #6b7280;
  --gv-color-bg: #ffffff;
  --gv-color-bg-subtle: #f5f7fb;
  --gv-color-border: rgba(31, 42, 124, 0.16);
  --gv-color-border-strong: rgba(31, 42, 124, 0.3);
  --gv-color-success: #0f7a3a;
  --gv-color-warning: #b45309;
  --gv-color-error: #b91c1c;
  --gv-color-overlay: rgba(31, 42, 124, 0.42);

  /* Beat theme / Elementor darker “primary” so ATC, Search, prices match logo blue */
  --ts-primary-color: #1f2a7c;
  --theme-color: #1f2a7c;
  --e-global-color-primary: #1f2a7c;

  /* Legacy aliases (existing CSS) */
  --gio-blue: var(--gv-color-blue);
  --gv-blue: var(--gv-color-blue);
  --gv-green: var(--gv-color-green);
  --gv-red: var(--gv-color-red);
  --gvc-navy: var(--gv-color-blue);
  --gvc-white: var(--gv-color-bg);
  --gio-border: rgba(31, 42, 124, 0.22);
  --gio-border-soft: rgba(31, 42, 124, 0.15);
  --gvc-border: var(--gv-color-border);
  --gvc-line-soft: rgba(31, 42, 124, 0.14);
  --gvc-line-strong: rgba(31, 42, 124, 0.3);

  /* Type */
  --gv-font-weight-regular: 400;
  --gv-font-weight-medium: 600;
  --gv-font-weight-bold: 700;
  --gv-text-xs: clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);
  --gv-text-sm: clamp(0.8125rem, 0.76rem + 0.2vw, 0.875rem);
  --gv-text-md: clamp(0.9375rem, 0.88rem + 0.25vw, 1rem);
  --gv-text-lg: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  --gv-text-xl: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  --gv-text-hero: clamp(1.6rem, 1rem + 2.4vw, 2.75rem);
  /* Product-card prices — smaller than --gv-text-lg so R18k+R24k fits one row */
  --gv-card-price: clamp(0.9rem, 0.82rem + 0.35vw, 1.05rem);
  --gv-card-price-old: clamp(0.6875rem, 0.64rem + 0.15vw, 0.75rem);
  --gv-leading-tight: 1.2;
  --gv-leading-normal: 1.5;
  --gv-leading-relaxed: 1.65;

  /* Space */
  --gv-space-1: 4px;
  --gv-space-2: 8px;
  --gv-space-3: 12px;
  --gv-space-4: 16px;
  --gv-space-5: 24px;
  --gv-space-6: 32px;
  --gv-space-7: 48px;
  --gv-space-8: 64px;
  --gv-section-y: clamp(32px, 4vw, 56px);
  --gv-section-y-tight: clamp(20px, 2.5vw, 32px);
  --gv-gutter: clamp(12px, 2.5vw, 24px);

  /* Layout */
  --gv-container: min(1170px, calc(100% - 2 * var(--gv-gutter)));
  --gv-header-max: 1200px;
  --gio-header-max: var(--gv-header-max);
  --gv-boxed: 1170px;
  --gv-radius-sm: 4px;
  --gv-radius-md: 6px;
  --gv-radius-lg: 12px;
  --gio-radius: var(--gv-radius-md);
  --gv-shadow-sm: 0 1px 2px rgba(15, 31, 74, 0.08);
  --gv-shadow-md: 0 8px 20px rgba(15, 31, 74, 0.1);
  --gio-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  --gv-transition: 150ms ease;
  --gv-touch: 44px;
  --gio-mobile-touch: var(--gv-touch);
  --gv-header-logo-h: 56px;
  --gio-header-logo-h: var(--gv-header-logo-h);
  --gv-mobile-logo-h: clamp(40px, 12vw, 48px);
  --gio-mobile-logo-h: var(--gv-mobile-logo-h);
  /* Catalog thumbs — slightly taller than 3/2, still shorter than classic 4/3 */
  --gv-product-image-ratio: 11 / 8;
  --gv-ig-ratio: 4 / 5;
  --gio-ig-aspect: var(--gv-ig-ratio);

  /* Z-index scale — never use 99999999 */
  --gv-z-base: 1;
  --gv-z-sticky: 200;
  --gv-z-dropdown: 300;
  /* Overlay/drawer/sheet must clear WP admin bar (99999) + Select2 */
  --gv-z-overlay: 100030;
  --gv-z-drawer: 100040;
  --gv-z-sheet: 100050;
  --gv-z-toast: 100060;
  --gv-z-float: 100;
  --gv-z-float-suppressed: 50;
}

@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --gv-gutter: 12px;
  }
}