/* f1-tokens.css — colors, typography, spacing tokens + @font-face
 *
 * Two typefaces are used in the UI:
 *   • F1 (Formula1 Wide) — display face. Page titles, hero numbers,
 *     button labels, brand wordmark, race/package names. Matches F1's
 *     on-screen broadcast identity.
 *   • Titillium Web — F1's official secondary/UI face. Used for small
 *     labels, metadata, form field labels, table-style rows, anything
 *     below ~12 px where Formula1 Wide gets cramped. Paired directly
 *     to echo the way F1 themselves pair these typefaces in graphics.
 */

@font-face {
  font-family: 'F1';
  src: url('../../fonts/Formula1-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'F1';
  src: url('../../fonts/Formula1-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'F1';
  src: url('../../fonts/Formula1-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Titillium';
  src: url('../../fonts/TitilliumWeb-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Titillium';
  src: url('../../fonts/TitilliumWeb-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Titillium';
  src: url('../../fonts/TitilliumWeb-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette */
  --f1-red: #E10600;
  --f1-carbon: #15151E;
  --f1-slate: #38383F;
  --f1-titanium: #949498;
  --f1-chalk: #E5E5E7;
  --f1-paper: #FFFFFF;
  --f1-bg: #F4F4F6;
  --f1-tint: #FFF5F5;

  /* Typography */
  --f1-font:    'F1', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f1-font-ui: 'Titillium', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f1-track-label: 0.14em;
  --f1-track-micro: 0.12em;
  --f1-track-display: -0.01em;

  /* Spacing */
  --f1-gap-xs: 4px;
  --f1-gap-sm: 8px;
  --f1-gap-md: 14px;
  --f1-gap-lg: 22px;
  --f1-gap-xl: 32px;

  /* Shape */
  --f1-clip-card: 14px;
  --f1-clip-btn: 10px;
}

/* Minimal reset / base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  /* Default UI type is Titillium — clean, legible at small sizes.
     Display elements (page titles, hero numbers, race names,
     buttons, etc.) opt back into F1 via the rule block below. */
  font-family: var(--f1-font-ui);
  font-weight: 400;
  color: var(--f1-carbon);
  background: var(--f1-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* F1 Experiences "Explore More" chevron motif, fixed behind all content.
   The SVG fill (#303037) is pre-tuned to sit on carbon (#15151e) at full
   strength, so no opacity trickery is needed on dark surfaces. On light
   backgrounds (rightsholder) the login/body rule cuts opacity so the
   dark strokes don't dominate. Single instance, cover, no repeat. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/public/img/pattern-explore-more.svg') center center / cover no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: -1;
}
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ───── Display + button elements that stay on Formula1 ─────
   Everything here carries a racing / broadcast character that the UI
   face would flatten. All buttons and button-like affordances live on
   Formula1 so the "action" layer of the tool feels consistently
   branded. Everything else — labels, field values, metadata — defaults
   to Titillium from the body rule above. */
.page-h,
.page-kicker,
.login-headline,
.login-wordmark-text,
.pbig,
.preview-total-value,
.rc-name,
.pr-name,
.pr-price,
.pr-inv,
.deck-title,
.deck-chip-soon,
.topbar .logo,
.section-title,
.preview-panel .plabel,
.quote-counter,
.quote-race-name,
.quote-total .plab,
.quote-line .ql-qty,
.quote-line .ql-line-total,
.preview-package-cat,
/* Buttons */
.f1-btn,
button,
.topbar .sync-btn,
.topbar-link,
.topbar .sync-status,
.pr-btn,
.pr-visit,
.ql-visit,
.pr-visit-label,
.pr-visit-arrow {
  font-family: var(--f1-font);
}

/* Utility page-title / subtitle (used on both pages) */
.page-h { font-weight: 900; text-transform: uppercase; font-size: 36px; line-height: 1.02; letter-spacing: var(--f1-track-display); margin: 0 0 8px; }
.page-sub { color: var(--f1-titanium); font-size: 13px; margin: 0 0 24px; max-width: 560px; line-height: 1.5; }

/* Broadcast-style kicker above the page title — tiny caps, red dot
   separator, year chip on the left. Gives the hero a chyron feel
   without crowding the h1. */
.page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--f1-slate);
}
.page-kicker .pk-year {
  display: inline-block;
  padding: 3px 8px 2px;
  background: var(--f1-red);
  color: #fff;
  letter-spacing: 0.12em;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.page-kicker .pk-sep {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--f1-carbon);
}
.page-kicker .pk-title { color: var(--f1-carbon); }