/* ============================================================
   BULLSEYE RED — Foundations: Color + Type
   Bold red on expansive white. Modern retail.
   Import this file to inherit all design tokens.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand / Primary ---------- */
  --red:            #CC0000;  /* Target Red — primary action, brand accent */
  --red-hover:      #A30000;  /* hovered / pressed */
  --red-25:         rgba(204, 0, 0, 0.25); /* focus ring */

  /* ---------- Neutrals ---------- */
  --secondary:      #333333;  /* secondary actions, dark UI */
  --neutral:        #888888;  /* icons, placeholders, disabled, was-price */
  --bg:             #F7F7F7;  /* page background, section dividers */
  --surface:        #FFFFFF;  /* cards, panels, tiles, overlays */
  --border:         #E0E0E0;  /* card borders, input outlines, dividers */

  /* ---------- Text ---------- */
  --text-1:         #212121;  /* headings, body, product names */
  --text-2:         #666666;  /* descriptions, metadata, secondary labels */
  --text-on-red:    #FFFFFF;

  /* ---------- Semantic ---------- */
  --success:        #238636;  /* in stock, confirmed, deal */
  --warning:        #E08600;  /* low stock, limited time */
  --error:          #CC0000;  /* out of stock, errors (== primary, brand unity) */
  --star:           #F5A623;  /* rating stars */

  /* ---------- Type families ---------- */
  --font-display:   'Inter', system-ui, -apple-system, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------- Type scale (size / weight / tracking / leading) ---------- */
  --display-size:   40px;  --display-weight: 700;  --display-track: -0.02em; --display-lh: 1.15;
  --h1-size:        32px;  --h1-weight:      700;  --h1-track:      -0.01em; --h1-lh:      1.25;
  --h2-size:        24px;  --h2-weight:      600;  --h2-track:      -0.01em; --h2-lh:      1.25;
  --h3-size:        20px;  --h3-weight:      600;  --h3-track:       0em;    --h3-lh:      1.3;
  --body-size:      16px;  --body-weight:    400;  --body-track:     0em;    --body-lh:    1.5;
  --body-sm-size:   14px;  --body-sm-weight: 400;
  --caption-size:   12px;  --caption-weight: 500;
  --price-lg-size:  28px;  --price-lg-weight:700;
  --price-sm-size:  18px;  --price-sm-weight:700;

  /* ---------- Spacing scale (base 4px) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px;

  /* ---------- Radius ---------- */
  --r-sm:   4px;   /* checkboxes, small badges, cells */
  --r-md:   8px;   /* cards, inputs, buttons, image containers */
  --r-lg:   12px;  /* panels, dropdowns, drawers */
  --r-xl:   16px;  /* modals, hero banners, promo cards */
  --r-full: 9999px;/* chips, search bar, avatars */

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 4px rgba(33,33,33,0.06);   /* cards/tiles at rest */
  --shadow-2: 0 4px 16px rgba(33,33,33,0.10);  /* hover lift, dropdowns, popovers */
  --shadow-3: 0 12px 32px rgba(33,33,33,0.14); /* modals, drawer, quick-view */

  /* ---------- Layout ---------- */
  --container: 1280px;
  --container-pad: 20px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  200ms;
}

/* ============================================================
   Semantic element helpers — apply directly or @extend in mind
   ============================================================ */

.bx-display {
  font-family: var(--font-display);
  font-size: var(--display-size); font-weight: var(--display-weight);
  letter-spacing: var(--display-track); line-height: var(--display-lh);
  color: var(--text-1);
}
.bx-h1 { font-family: var(--font-display); font-size: var(--h1-size); font-weight: var(--h1-weight); letter-spacing: var(--h1-track); line-height: var(--h1-lh); color: var(--text-1); }
.bx-h2 { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-weight); letter-spacing: var(--h2-track); line-height: var(--h2-lh); color: var(--text-1); }
.bx-h3 { font-family: var(--font-display); font-size: var(--h3-size); font-weight: var(--h3-weight); letter-spacing: var(--h3-track); line-height: var(--h3-lh); color: var(--text-1); }
.bx-body { font-family: var(--font-body); font-size: var(--body-size); font-weight: var(--body-weight); line-height: var(--body-lh); color: var(--text-1); }
.bx-body-sm { font-family: var(--font-body); font-size: var(--body-sm-size); font-weight: var(--body-sm-weight); line-height: 1.5; color: var(--text-2); }
.bx-caption { font-family: var(--font-body); font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: 1.4; color: var(--text-2); }
.bx-price { font-family: var(--font-display); font-size: var(--price-sm-size); font-weight: var(--price-sm-weight); color: var(--text-1); }
.bx-price-lg { font-family: var(--font-display); font-size: var(--price-lg-size); font-weight: var(--price-lg-weight); color: var(--text-1); }
.bx-sale { color: var(--red); font-weight: 700; }
.bx-was { color: var(--neutral); font-weight: 400; text-decoration: line-through; }
.bx-mono { font-family: var(--font-mono); }