/* ============================================================
   FANATICS DESIGN SYSTEM — Colors & Typography
   Source: fanaticsbrand.com (official brand guidelines)
   ============================================================ */

/* ---------- FONT IMPORTS ----------
   Fanatics proprietary fonts are NOT publicly available:
     - Fan Impact   (display, ALL CAPS, bold, condensed-ish w/ rounded corners)
     - Fan Serif    (editorial / refined headlines)
     - Fan Sans     (body — the brand book also names Inter as the body face)
   We substitute the closest Google Fonts. SUBSTITUTE — replace ASAP if you have the real .ttf/.otf files.
     - Fan Impact  → Anton (free, condensed, high-impact)
     - Fan Serif   → DM Serif Display (refined display serif with character)
     - Fan Sans / Body → Inter (officially used by the brand for body)
*/
@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ----- BRAND COLORS ----- */
  /* Family Red — the thread that ties the brand family together (human connection) */
  --fan-red:           #E5253D; /* primary brand red */
  --fan-red-deep:      #B5172A;
  --fan-red-soft:      #FCE5E8;

  /* Official Blue — authenticity & consistency (the navy used in the wordmark / nav) */
  --fan-blue:          #0A2240; /* deep navy — primary surface */
  --fan-blue-2:        #14315A; /* slightly lifted navy */
  --fan-blue-deep:     #061528; /* near-black navy for footers */
  --fan-blue-soft:     #E5ECF5;

  /* Black & White — strength and simplicity (supplementary) */
  --fan-black:         #0A0A0A;
  --fan-white:         #FFFFFF;

  /* Neutral / utility grays */
  --neutral-50:        #F7F7F8;
  --neutral-100:       #EDEDF0;
  --neutral-200:       #DCDCE2;
  --neutral-300:       #C2C2CC;
  --neutral-400:       #8E8E99;
  --neutral-500:       #6B6B75;
  --neutral-600:       #4A4A52;
  --neutral-700:       #2E2E34;
  --neutral-800:       #1A1A1F;

  /* Semantic colors */
  --semantic-success:  #1F8A4D; /* in-stock / shipped */
  --semantic-warning:  #F2A03D; /* low stock */
  --semantic-danger:   #E5253D; /* sale / urgency — re-uses Family Red */
  --semantic-info:     #1F6FE5;

  /* Commerce accents */
  --price-tag:         #E5253D;  /* sale price */
  --price-strike:      #8E8E99;  /* original price */

  /* Foreground tokens (semantic) */
  --fg-1:              #0A0A0A;  /* primary text */
  --fg-2:              #4A4A52;  /* secondary text */
  --fg-3:              #8E8E99;  /* tertiary / meta */
  --fg-inverse:        #FFFFFF;  /* text on navy/red */
  --fg-link:           #0A2240;
  --fg-link-hover:     #E5253D;

  /* Background tokens */
  --bg-1:              #FFFFFF;  /* page */
  --bg-2:              #F7F7F8;  /* subdued surface */
  --bg-3:              #EDEDF0;  /* sunken / card behind */
  --bg-navy:           #0A2240;  /* nav, hero, footer */
  --bg-red:            #E5253D;  /* promo strip */

  /* Borders */
  --border-1:          #DCDCE2;
  --border-2:          #C2C2CC;
  --border-strong:     #0A0A0A;

  /* ----- RIPPLE GRADIENTS ----- */
  /* Inspired by the movement of a waving flag — Fanatics' signature treatment */
  --ripple-red:    linear-gradient(115deg, #E5253D 0%, #B5172A 28%, #6E0D1A 55%, #2A0509 80%, #0A0203 100%);
  --ripple-blue:   linear-gradient(115deg, #2E69B5 0%, #14315A 30%, #0A2240 55%, #061528 80%, #020912 100%);
  --ripple-radial-red:  radial-gradient(circle at 30% 30%, #E5253D 0%, #B5172A 35%, #2A0509 80%);
  --ripple-radial-blue: radial-gradient(circle at 30% 30%, #2E69B5 0%, #14315A 35%, #061528 80%);

  /* ----- TYPE FAMILIES ----- */
  --font-impact: 'Anton', 'Fan Impact', 'Impact', 'Oswald', sans-serif;
  --font-serif:  'DM Serif Display', 'Fan Serif', 'Playfair Display', Georgia, serif;
  --font-sans:   'Inter', 'Fan Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ----- TYPE SCALE ----- */
  /* Display (Fan Impact) — ALL CAPS, short impactful statements */
  --display-1: 800 clamp(64px, 9vw, 144px)/0.9 var(--font-impact);
  --display-2: 800 clamp(48px, 7vw, 96px)/0.92 var(--font-impact);
  --display-3: 800 clamp(36px, 5vw, 64px)/0.95 var(--font-impact);

  /* Editorial (Fan Serif) — refined, welcoming */
  --serif-1:   400 clamp(40px, 5vw, 72px)/1.05 var(--font-serif);
  --serif-2:   400 clamp(28px, 3.5vw, 48px)/1.1  var(--font-serif);
  --serif-3:   400 clamp(22px, 2.5vw, 32px)/1.2  var(--font-serif);

  /* UI / body (Inter) */
  --h1:        700 32px/1.15 var(--font-sans);
  --h2:        700 24px/1.2  var(--font-sans);
  --h3:        600 20px/1.3  var(--font-sans);
  --h4:        600 16px/1.3  var(--font-sans);
  --body-lg:   400 18px/1.5  var(--font-sans);
  --body:      400 15px/1.5  var(--font-sans);
  --body-sm:   400 13px/1.45 var(--font-sans);
  --caption:   500 11px/1.4  var(--font-sans);
  --eyebrow:   700 12px/1.2  var(--font-sans);

  /* Letter spacing & casing */
  --ls-display: -0.01em;
  --ls-eyebrow: 0.14em;
  --ls-nav:     0.02em;

  /* ----- SPACING ----- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ----- RADII ----- */
  /* Fanatics is a hard-edged commerce brand — corners are largely square,
     with mild rounding on chips, cards, and buttons. */
  --radius-0:  0px;
  --radius-1:  2px;
  --radius-2:  4px;   /* chips, inputs */
  --radius-3:  8px;   /* cards */
  --radius-4:  12px;  /* large cards */
  --radius-pill: 999px;

  /* ----- SHADOWS ----- */
  --shadow-sm: 0 1px 2px rgba(10,10,10,0.06), 0 1px 1px rgba(10,10,10,0.04);
  --shadow-md: 0 4px 12px rgba(10,10,10,0.08), 0 2px 4px rgba(10,10,10,0.04);
  --shadow-lg: 0 12px 32px rgba(10,10,10,0.12), 0 4px 12px rgba(10,10,10,0.06);
  --shadow-pop: 0 16px 48px rgba(10,34,64,0.22);

  /* ----- DURATIONS / EASING ----- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); }
body { font: var(--body); }

.display-1, .h-display { font: var(--display-1); text-transform: uppercase; letter-spacing: var(--ls-display); }
.display-2 { font: var(--display-2); text-transform: uppercase; letter-spacing: var(--ls-display); }
.display-3 { font: var(--display-3); text-transform: uppercase; letter-spacing: var(--ls-display); }

.serif-1 { font: var(--serif-1); }
.serif-2 { font: var(--serif-2); }
.serif-3 { font: var(--serif-3); }
.serif-italic { font-style: italic; }

h1, .h1 { font: var(--h1); }
h2, .h2 { font: var(--h2); }
h3, .h3 { font: var(--h3); }
h4, .h4 { font: var(--h4); }
p, .body { font: var(--body); }
small, .body-sm { font: var(--body-sm); }
.body-lg { font: var(--body-lg); }
.caption { font: var(--caption); color: var(--fg-3); }
.eyebrow { font: var(--eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--fg-link-hover); }