/* ============================================================
   CR Sport — Colors & Type tokens
   Brand: Navy blue (logo) + electric yellow accent
   ============================================================ */

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

:root {
  /* ---------- Brand colors ---------- */
  --brand-navy: #1E2A8C;          /* primary, from logo */
  --brand-navy-deep: #141E6B;     /* hover / pressed */
  --brand-navy-ink: #0B1240;      /* darkest navy, near-text */
  --brand-yellow: #FFD60A;        /* electric accent */
  --brand-yellow-deep: #F5C400;   /* hover */
  --brand-yellow-soft: #FFF3B0;   /* tint backgrounds */

  /* ---------- Neutrals ---------- */
  --white: #FFFFFF;
  --paper: #FAFAF7;               /* off-white page bg */
  --bg-1: #F2F3F7;                /* surface 1 */
  --bg-2: #E6E8F0;                /* surface 2 */
  --line: #D9DCE6;                /* hairline borders */
  --line-strong: #B7BCCC;
  --ink-1: #0E1330;               /* primary text */
  --ink-2: #3D4566;               /* secondary text */
  --ink-3: #6B7390;               /* muted */
  --ink-4: #9AA0B6;               /* placeholder */

  /* ---------- Semantic ---------- */
  --success: #1B8F4A;
  --warn:    #F5A623;
  --danger:  #D7263D;
  --info:    #1E2A8C;

  --price:   #D7263D;             /* sale / price tag red */
  --rating:  #FFB800;             /* star rating */

  /* ---------- Foreground roles ---------- */
  --fg-on-navy:   #FFFFFF;
  --fg-on-yellow: #0B1240;
  --fg-on-paper:  #0E1330;

  /* ---------- Type families ---------- */
  --font-display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --font-sans:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---------- Type scale ---------- */
  --fs-display: clamp(56px, 8vw, 112px); /* @kind font */
  --fs-h1: clamp(36px, 6vw, 56px);
  --fs-h2: clamp(30px, 5vw, 40px);
  --fs-h3: clamp(24px, 3.5vw, 28px);
  --fs-h4: clamp(20px, 2.5vw, 22px);
  --fs-lg: 18px;
  --fs-md: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-eyebrow: 12px;

  --lh-tight: 1.02; /* @kind other */
  --lh-snug: 1.15; /* @kind other */
  --lh-base: 1.5; /* @kind other */
  --lh-loose: 1.65; /* @kind other */

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.14em;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- Shadows / elevation ---------- */
  --sh-1: 0 1px 2px rgba(11, 18, 64, 0.06), 0 1px 1px rgba(11, 18, 64, 0.04);
  --sh-2: 0 4px 12px rgba(11, 18, 64, 0.08), 0 1px 2px rgba(11, 18, 64, 0.04);
  --sh-3: 0 12px 32px rgba(11, 18, 64, 0.14), 0 2px 6px rgba(11, 18, 64, 0.06);
  --sh-pop: 0 18px 48px rgba(11, 18, 64, 0.22);
  --sh-inset-ring: inset 0 0 0 1px var(--line);
  --sh-focus: 0 0 0 3px rgba(255, 214, 10, 0.55);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1); /* @kind other */
  --dur-1: 120ms; /* @kind other */
  --dur-2: 200ms; /* @kind other */
  --dur-3: 320ms; /* @kind other */
}

/* ============================================================
   Semantic typography
   ============================================================ */

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-sans);
  color: var(--ink-1);
  background: var(--paper);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

.display, .display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--ink-2);
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--ink-2);
}

.small, small { font-size: var(--fs-sm); color: var(--ink-3); }
.micro       { font-size: var(--fs-xs); color: var(--ink-3); }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-navy);
}

.price {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}

code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; }