/**
 * Dripex design system — CSS custom properties.
 * Phase 1: Foundation & Design System | Phase 7: Dark Mode & Motion Accessibility.
 *
 * @package storefront-child
 */
:root {
  /* ===== Brand colors ===== */
  --color-navy: #0D1B3E;
  --color-red: #E63946;
  /* White text on --color-red is only 4.17:1 (WCAG AA needs 4.5:1 below 18.66px bold). Use this for filled buttons. */
  --color-red-strong: #D32F3D;
  --color-blue: #2F6FED;
  --color-green: #22C55E;
  --color-orange: #F59E0B;
  --color-white: #FFFFFF;

  /* ===== Neutral scale ===== */
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  /* ===== Spacing — 4px base grid ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ===== Border radius ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ===== Shadows — multi-layer ===== */
  --shadow-sm: 0 1px 2px rgba(13, 27, 62, .06);
  --shadow-md: 0 4px 6px -1px rgba(13, 27, 62, .08), 0 2px 4px -2px rgba(13, 27, 62, .05);
  --shadow-lg: 0 10px 15px -3px rgba(13, 27, 62, .1), 0 4px 6px -4px rgba(13, 27, 62, .05);
  --shadow-xl: 0 20px 25px -5px rgba(13, 27, 62, .12), 0 8px 10px -6px rgba(13, 27, 62, .06);

  /* ===== Transitions ===== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ===== Z-index scale ===== */
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-modal: 1300;
  --z-toast: 1400;

  /* ===== Layout ===== */
  --container-max: 1280px;
}

/* ==========================================================================
   MOTION ACCESSIBILITY (WCAG 2.1 AA)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}