/* ============================================================
   Riddell SpeedFlex Helmets — CSS Design System Variables
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Brand Colors ─────────────────────────────────────── */
  --clr-primary:        #0a0a0a;
  --clr-primary-light:  #1a1a1a;
  --clr-accent:         #e8292a;
  --clr-accent-hover:   #c41f20;
  --clr-accent-light:   rgba(232,41,42,0.10);
  --clr-white:          #ffffff;
  --clr-off-white:      #fafafa;
  --clr-surface:        #f4f4f5;
  --clr-surface-2:      #e4e4e7;
  --clr-border:         #e5e7eb;
  --clr-border-dark:    #d1d5db;

  /* ── Text Colors ──────────────────────────────────────── */
  --clr-text:           #111111;
  --clr-text-secondary: #4b5563;
  --clr-text-muted:     #9ca3af;
  --clr-text-inverse:   #ffffff;

  /* ── Status Colors ────────────────────────────────────── */
  --clr-success:        #16a34a;
  --clr-success-bg:     #f0fdf4;
  --clr-warning:        #d97706;
  --clr-warning-bg:     #fffbeb;
  --clr-error:          #dc2626;
  --clr-error-bg:       #fef2f2;
  --clr-info:           #2563eb;
  --clr-info-bg:        #eff6ff;

  /* ── Typography ───────────────────────────────────────── */
  --font-heading:       'Barlow Condensed', sans-serif;
  --font-body:          'Inter', sans-serif;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px */

  /* ── Spacing ──────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Border Radius ────────────────────────────────────── */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.25);
  --shadow-accent: 0 4px 14px rgba(232,41,42,0.35);

  /* ── Layout ───────────────────────────────────────────── */
  --container:        1280px;
  --container-narrow: 900px;
  --container-wide:   1440px;
  --header-height:    110px;
  --sidebar-width:    280px;

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index ──────────────────────────────────────────── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}