/* =========================================================================
   PACE RACE — Design Tokens
   Colors • Typography • Spacing • Effects
   ========================================================================= */

/* ---- Fonts are self-hosted (see ../assets/fonts.css), loaded from index.html.
   The original Google Fonts @import was removed so the CSP can stay 'self'-only. */

:root {
  /* ---------- PRIMARY PALETTE ---------- */
  --pr-black:        #161616;  /* base surface — used full-bleed on hero */
  --pr-pink:         #F11C66;  /* the signature accent */
  --pr-white:        #FFFFFF;

  /* ---------- SECONDARY PALETTE ---------- */
  --pr-neon:         #CCFF00;  /* neon green, high-energy callouts */
  --pr-lilac:        #C879DB;  /* purple accent */
  --pr-pink-2:       #E79AF8;  /* soft pink */
  --pr-grey-100:     #F2F2F2;  /* neutral surface */

  /* ---------- EXTENDED NEUTRALS (black tints for ui) ---------- */
  --pr-grey-900:     #1E1E1E;
  --pr-grey-800:     #2A2A2A;
  --pr-grey-700:     #3D3D3D;
  --pr-grey-500:     #707070;
  --pr-grey-300:     #BFBFBF;
  --pr-grey-200:     #E0E0E0;

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg:              var(--pr-black);
  --bg-alt:          var(--pr-grey-900);
  --bg-inverse:      var(--pr-white);
  --surface:         var(--pr-grey-800);
  --surface-alt:     var(--pr-grey-100);

  --fg:              var(--pr-white);
  --fg-muted:        rgba(255,255,255,0.60);
  --fg-subtle:       rgba(255,255,255,0.40);
  --fg-inverse:      var(--pr-black);
  --fg-inverse-muted:rgba(22,22,22,0.60);

  --accent:          var(--pr-pink);
  --accent-hi:       var(--pr-neon);
  --accent-alt:      var(--pr-lilac);

  --border:          rgba(255,255,255,0.14);
  --border-strong:   rgba(255,255,255,0.30);
  --border-inverse:  rgba(22,22,22,0.14);

  /* ---------- TYPE STACKS ---------- */
  --font-display:    'Special Gothic Expanded One', 'Arial Black', system-ui, sans-serif;
  --font-body:       'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SIZES (rem-scale, 16px base) ---------- */
  --fs-display-xl:   clamp(3.5rem, 8vw, 7.5rem);  /* hero posters */
  --fs-display-lg:   clamp(2.5rem, 5.5vw, 4.75rem);
  --fs-display-md:   clamp(2rem, 4vw, 3.25rem);
  --fs-h1:           2.25rem;   /* 36px */
  --fs-h2:           1.75rem;   /* 28px */
  --fs-h3:           1.375rem;  /* 22px */
  --fs-h4:           1.125rem;  /* 18px */
  --fs-body-lg:      1.125rem;
  --fs-body:         1rem;      /* 16px */
  --fs-body-sm:      0.875rem;  /* 14px */
  --fs-caption:      0.75rem;   /* 12px */
  --fs-micro:        0.6875rem; /* 11px, tracker */

  /* ---------- LINE HEIGHTS ---------- */
  --lh-display:      0.92;   /* tight, bold slabs */
  --lh-heading:      1.1;
  --lh-body:         1.55;
  --lh-ui:           1.3;

  /* ---------- LETTER SPACING ---------- */
  --ls-display:      -0.02em; /* subtle optical tighten */
  --ls-heading:       0em;
  --ls-body:          0em;
  --ls-caps:          0.08em;
  --ls-mono:          0.02em;

  /* ---------- FONT WEIGHTS ---------- */
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semi:         600;
  --fw-bold:         700;
  --fw-black:        900;

  /* ---------- SPACING SCALE (4px base) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- RADII — Pace Race uses very tight corners ---------- */
  --r-0:   0;         /* default — sharp */
  --r-1:   2px;       /* barely there */
  --r-2:   4px;       /* buttons, inputs */
  --r-3:   8px;       /* cards */
  --r-4:   16px;
  --r-full:9999px;    /* pills/capsule */

  /* ---------- SHADOWS — rarely used; brand is mostly flat ---------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:  0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.55);
  --shadow-glow-pink: 0 0 40px rgba(241,28,102,0.35);
  --shadow-glow-neon: 0 0 40px rgba(204,255,0,0.40);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0, 1);     /* punchy ease-out */
  --ease-emphasis: cubic-bezier(0.2, 0.0, 0.1, 1);   /* quick finish */
  --ease-enter:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --dur-fast:      120ms;
  --dur-base:      180ms;
  --dur-slow:      280ms;

  /* ---------- LAYOUT ---------- */
  --container:     min(1280px, 92vw);
  --gutter:        var(--sp-5);
}

/* =========================================================================
   SEMANTIC ELEMENT DEFAULTS
   ========================================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display classes (the brand's voice) --- */
.pr-display-xl, .pr-display-lg, .pr-display-md, .pr-display {
  font-family: var(--font-display);
  font-weight: 400;           /* Special Gothic Expanded One is single-weight */
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.pr-display-xl { font-size: var(--fs-display-xl); }
.pr-display-lg { font-size: var(--fs-display-lg); }
.pr-display-md { font-size: var(--fs-display-md); }

/* Inter-based heavy alternative (what posters actually use most) */
.pr-hero, .pr-hero-lg, .pr-hero-md {
  font-family: var(--font-body);
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.pr-hero-xl { font-size: var(--fs-display-xl); font-family: var(--font-body); font-weight: 900; line-height: .92; text-transform: uppercase; letter-spacing: -.015em; }
.pr-hero-lg { font-size: var(--fs-display-lg); }
.pr-hero-md { font-size: var(--fs-display-md); }

h1, .pr-h1 {
  font-family: var(--font-body);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
h2, .pr-h2 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}
h3, .pr-h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}
h4, .pr-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
}

p, .pr-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.pr-body-lg  { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.pr-body-sm  { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.pr-caption  { font-size: var(--fs-caption); line-height: var(--lh-ui); color: var(--fg-muted); }

/* ---- "Eyebrow" / tracker label — the // divider motif ---- */
.pr-eyebrow, .pr-tracker {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg);
}
.pr-eyebrow::before {
  content: "// ";
  color: var(--accent);
  font-weight: var(--fw-black);
}

/* ---- The double-slash marker used in hero copy ---- */
.pr-slash { color: var(--accent); font-weight: var(--fw-black); }
.pr-slash-neon { color: var(--accent-hi); font-weight: var(--fw-black); }

/* ---- Code / mono ---- */
code, kbd, .pr-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: var(--ls-mono);
}

/* ---- Selection ---- */
::selection { background: var(--accent); color: var(--pr-white); }