/* ============================================================================
   TRAKERA — runtime theme + component layer
   ----------------------------------------------------------------------------
   Consumes the primitive scale from tokens.css (generated from tokens.json).
   Load order:
       <link rel="stylesheet" href="design-system/tokens.css">   (primitives)
       <link rel="stylesheet" href="design-system/trakera.css">   (this file)

   This file keeps the semantic + component tiers as live var() references so
   theme switching works at runtime. Toggle dark mode with:
       <html data-theme="dark">
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. SEMANTIC TIER  (purpose-named, theme-aware)
   ------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --color-canvas:          var(--primitive-color-white);
  --color-surface:         var(--primitive-color-white);
  --color-surface-subtle:  var(--primitive-color-gray-50);
  --color-surface-muted:   var(--primitive-color-gray-100);
  --color-surface-inverse: var(--primitive-color-ink-900);

  /* Text */
  --color-text:         var(--primitive-color-ink-900);
  --color-text-muted:   var(--primitive-color-ink-400);
  --color-text-subtle:  var(--primitive-color-ink-300);
  --color-text-inverse: var(--primitive-color-white);
  --color-text-link:    var(--primitive-color-blue-600);

  /* Lines */
  --color-border:             var(--primitive-color-gray-200);
  --color-border-strong:      var(--primitive-color-ink-900);
  --color-border-interactive: var(--primitive-color-blue-600);

  /* Primary — electric blue (the fiaformulae.com signature) */
  --color-primary:        var(--primitive-color-blue-600);
  --color-primary-hover:  var(--primitive-color-blue-700);
  --color-primary-active: var(--primitive-color-blue-800);
  --color-primary-subtle: var(--primitive-color-blue-50);
  --color-on-primary:     var(--primitive-color-white);

  /* Accent — volt green pop, use sparingly (≤10% of a view) */
  --color-accent:        var(--primitive-color-volt-500);
  --color-accent-hover:  var(--primitive-color-volt-600);
  --color-accent-subtle: var(--primitive-color-volt-50);
  --color-on-accent:     var(--primitive-color-ink-900);

  --color-focus-ring: var(--primitive-color-blue-500);

  /* Status */
  --color-success:        var(--primitive-color-green-500);
  --color-success-subtle: var(--primitive-color-green-100);
  --color-warning:        var(--primitive-color-amber-500);
  --color-warning-subtle: var(--primitive-color-amber-100);
  --color-danger:         var(--primitive-color-red-600);
  --color-danger-subtle:  var(--primitive-color-red-100);
  --color-live:           var(--primitive-color-red-600);

  /* Spacing roles */
  --spacing-gutter:      var(--primitive-spacing-4);
  --spacing-component:   var(--primitive-spacing-4);
  --spacing-stack:       var(--primitive-spacing-6);
  --spacing-section:     var(--primitive-spacing-20);
  --spacing-page-margin: var(--primitive-spacing-6);

  /* Typography roles */
  --font-display: var(--primitive-fontFamily-display);
  --font-body:    var(--primitive-fontFamily-body);
  --font-data:    var(--primitive-fontFamily-mono);

  /* Radius roles — Trakera is a sharp-cornered system */
  --radius-control: var(--primitive-radius-sm);   /* 2px  buttons, inputs, badges */
  --radius-card:    var(--primitive-radius-md);   /* 4px  cards, panels           */
  --radius-surface: var(--primitive-radius-lg);   /* 8px  modals, sheets          */
  --radius-pill:    var(--primitive-radius-pill); /* chips, status pills          */

  /* Elevation roles — shadows stay whisper-light; borders do the work */
  --elevation-flat:    var(--primitive-shadow-none);
  --elevation-raised:  var(--primitive-shadow-sm);
  --elevation-overlay: var(--primitive-shadow-md);
  --elevation-modal:   var(--primitive-shadow-lg);

  /* Motion roles */
  --motion-hover:        var(--primitive-duration-fast)   var(--primitive-easing-standard);
  --motion-enter:        var(--primitive-duration-normal) var(--primitive-easing-decelerate);
  --motion-exit:         var(--primitive-duration-fast)   var(--primitive-easing-accelerate);

  /* Series identity map — one hue per championship */
  --series-f1:       var(--primitive-color-series-f1);
  --series-f2:       var(--primitive-color-series-f2);
  --series-f3:       var(--primitive-color-series-f3);
  --series-formulae: var(--primitive-color-series-formulae);
  --series-wec:      var(--primitive-color-series-wec);
  --series-imsa:     var(--primitive-color-series-imsa);
  --series-indycar:  var(--primitive-color-series-indycar);
  --series-nascar:   var(--primitive-color-series-nascar);
  --series-motogp:   var(--primitive-color-series-motogp);
  --series-wrc:      var(--primitive-color-series-wrc);
}

/* ---------------------------------------------------------------------------
   2. DARK THEME  (secondary surface — white is the default identity)
   ------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-canvas:          var(--primitive-color-ink-950);
  --color-surface:         var(--primitive-color-ink-900);
  --color-surface-subtle:  var(--primitive-color-ink-800);
  --color-surface-muted:   var(--primitive-color-ink-700);
  --color-surface-inverse: var(--primitive-color-white);

  --color-text:         var(--primitive-color-gray-50);
  --color-text-muted:   var(--primitive-color-ink-300);
  --color-text-subtle:  var(--primitive-color-ink-400);
  --color-text-inverse: var(--primitive-color-ink-900);

  --color-border:        var(--primitive-color-ink-700);
  --color-border-strong: var(--primitive-color-gray-50);

  --color-primary:        var(--primitive-color-blue-400);
  --color-primary-hover:  var(--primitive-color-blue-300);
  --color-primary-active: var(--primitive-color-blue-200);
  --color-primary-subtle: var(--primitive-color-blue-900);
  --color-on-primary:     var(--primitive-color-ink-950);

  --color-on-accent: var(--primitive-color-ink-900);
}

/* ---------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--primitive-fontSize-base);
  line-height: var(--primitive-lineHeight-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--primitive-fontWeight-extrabold);
  letter-spacing: var(--primitive-letterSpacing-tight);
  line-height: var(--primitive-lineHeight-tight);
  margin: 0 0 var(--primitive-spacing-4);
}
h1 { font-size: var(--primitive-fontSize-6xl); text-transform: uppercase; }
h2 { font-size: var(--primitive-fontSize-4xl); text-transform: uppercase; }
h3 { font-size: var(--primitive-fontSize-2xl); }
h4 { font-size: var(--primitive-fontSize-lg); font-weight: var(--primitive-fontWeight-bold); }

a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: var(--primitive-shadow-focus);
  border-radius: var(--radius-control);
}

::selection { background: var(--color-accent); color: var(--color-on-accent); }

/* ---------------------------------------------------------------------------
   4. HELPERS
   ------------------------------------------------------------------------- */
.t-eyebrow {
  font-family: var(--font-display);
  font-size: var(--primitive-fontSize-2xs);
  font-weight: var(--primitive-fontWeight-bold);
  letter-spacing: var(--primitive-letterSpacing-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.t-data {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--primitive-letterSpacing-tight);
}
.t-container {
  max-width: var(--primitive-container-xl);
  margin-inline: auto;
  padding-inline: var(--spacing-page-margin);
}

/* ---------------------------------------------------------------------------
   5. COMPONENTS
   ------------------------------------------------------------------------- */

/* 5.1 Button ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--primitive-spacing-2);
  min-height: 2.75rem;
  padding: var(--primitive-spacing-3) var(--primitive-spacing-5);
  border: var(--primitive-borderWidth-thick) solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: var(--primitive-fontSize-sm);
  font-weight: var(--primitive-fontWeight-bold);
  letter-spacing: var(--primitive-letterSpacing-wider);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--motion-hover), color var(--motion-hover),
              border-color var(--motion-hover), transform var(--motion-hover);
}
.btn:active { transform: translateY(1px); }
.btn:disabled {
  background: var(--primitive-color-gray-200);
  color: var(--primitive-color-gray-500);
  border-color: transparent;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn--primary:hover:not(:disabled)  { background: var(--color-primary-hover); }
.btn--primary:active:not(:disabled) { background: var(--color-primary-active); }

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn--accent:hover:not(:disabled) { background: var(--color-accent-hover); }

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
}
.btn--ghost:hover:not(:disabled) { background: var(--color-primary-subtle); }

/* 5.2 Series badge ----------------------------------------------------------
   Set the series colour once via `style="--series: var(--series-f1)"`
   or a `.series--f1` modifier. */
.series-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-1);
  padding: var(--primitive-spacing-1) var(--primitive-spacing-2);
  border-radius: var(--radius-control);
  background: var(--series, var(--color-primary));
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--primitive-fontSize-2xs);
  font-weight: var(--primitive-fontWeight-bold);
  letter-spacing: var(--primitive-letterSpacing-wider);
  text-transform: uppercase;
  white-space: nowrap;
}
.series-badge--outline {
  background: transparent;
  color: var(--series, var(--color-primary));
  box-shadow: inset 0 0 0 var(--primitive-borderWidth-thick) var(--series, var(--color-primary));
}
.series--f1       { --series: var(--series-f1); }
.series--f2       { --series: var(--series-f2); }
.series--f3       { --series: var(--series-f3); }
.series--formulae { --series: var(--series-formulae); }
.series--wec      { --series: var(--series-wec); }
.series--imsa     { --series: var(--series-imsa); }
.series--indycar  { --series: var(--series-indycar); }
.series--nascar   { --series: var(--series-nascar); }
.series--motogp   { --series: var(--series-motogp); }
.series--wrc      { --series: var(--series-wrc); }
/* NASCAR yellow needs dark ink for AA contrast */
.series-badge.series--nascar { color: var(--primitive-color-ink-900); }

/* 5.3 Race card ------------------------------------------------------------- */
.race-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--primitive-spacing-3);
  padding: var(--primitive-spacing-5);
  padding-left: calc(var(--primitive-spacing-5) + var(--primitive-borderWidth-heavy));
  background: var(--color-surface);
  border: var(--primitive-borderWidth-hairline) solid var(--color-border);
  border-radius: var(--radius-card);
  transition: border-color var(--motion-hover), box-shadow var(--motion-hover),
              transform var(--motion-hover);
}
/* left identity bar carries the series colour */
.race-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--primitive-borderWidth-heavy);
  background: var(--series, var(--color-primary));
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}
.race-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--elevation-overlay);
  transform: translateY(-2px);
}
.race-card__round {
  font-family: var(--font-display);
  font-size: var(--primitive-fontSize-2xs);
  font-weight: var(--primitive-fontWeight-bold);
  letter-spacing: var(--primitive-letterSpacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.race-card__name {
  font-family: var(--font-display);
  font-size: var(--primitive-fontSize-xl);
  font-weight: var(--primitive-fontWeight-extrabold);
  letter-spacing: var(--primitive-letterSpacing-tight);
  text-transform: uppercase;
  line-height: var(--primitive-lineHeight-tight);
  margin: 0;
}
.race-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-spacing-1) var(--primitive-spacing-4);
  font-size: var(--primitive-fontSize-sm);
  color: var(--color-text-muted);
}
.race-card__meta .t-data { color: var(--color-text); }

/* 5.4 Status pill --------------------------------------------------------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-1);
  padding: var(--primitive-spacing-1) var(--primitive-spacing-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--primitive-fontSize-2xs);
  font-weight: var(--primitive-fontWeight-bold);
  letter-spacing: var(--primitive-letterSpacing-wide);
  text-transform: uppercase;
}
.status-pill--live     { background: var(--color-live); color: #fff; }
.status-pill--upcoming { background: var(--primitive-color-blue-50); color: var(--primitive-color-blue-700); }
.status-pill--done     { background: var(--primitive-color-gray-100); color: var(--color-text-muted); }
.status-pill--live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  animation: trakera-pulse 1.4s var(--primitive-easing-standard) infinite;
}
@keyframes trakera-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .status-pill--live::before { animation: none; }
}

/* 5.5 Countdown -------------------------------------------------------------- */
.countdown {
  display: inline-flex;
  gap: var(--primitive-spacing-4);
}
.countdown__unit { display: flex; flex-direction: column; align-items: center; }
.countdown__value {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--primitive-fontSize-3xl);
  font-weight: var(--primitive-fontWeight-bold);
  color: var(--color-text);
  line-height: 1;
}
.countdown__label {
  margin-top: var(--primitive-spacing-1);
  font-size: var(--primitive-fontSize-3xs);
  letter-spacing: var(--primitive-letterSpacing-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* 5.6 Filter chip --------------------------------------------------------- */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-spacing-2);
  padding: var(--primitive-spacing-2) var(--primitive-spacing-4);
  border: var(--primitive-borderWidth-hairline) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--primitive-fontSize-sm);
  font-weight: var(--primitive-fontWeight-semibold);
  cursor: pointer;
  transition: background var(--motion-hover), color var(--motion-hover),
              border-color var(--motion-hover);
}
.filter-chip:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.filter-chip[aria-pressed="true"],
.filter-chip.is-active {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  border-color: var(--color-surface-inverse);
}
.filter-chip__dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--series, var(--color-primary));
}

/* 5.7 Site nav ---------------------------------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--primitive-spacing-8);
  height: 4rem;
  padding-inline: var(--spacing-page-margin);
  background: var(--color-surface);
  border-bottom: var(--primitive-borderWidth-hairline) solid var(--color-border);
}
.site-nav__brand {
  font-family: var(--font-display);
  font-size: var(--primitive-fontSize-lg);
  font-weight: var(--primitive-fontWeight-black);
  letter-spacing: var(--primitive-letterSpacing-tight);
  text-transform: uppercase;
  color: var(--color-text);
}
.site-nav__link {
  position: relative;
  padding-block: var(--primitive-spacing-2);
  font-family: var(--font-display);
  font-size: var(--primitive-fontSize-sm);
  font-weight: var(--primitive-fontWeight-bold);
  letter-spacing: var(--primitive-letterSpacing-wider);
  text-transform: uppercase;
  color: var(--color-text);
}
.site-nav__link:hover { color: var(--color-primary); text-decoration: none; }
.site-nav__link[aria-current="page"] { color: var(--color-primary); }
.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: var(--primitive-borderWidth-thick);
  background: var(--color-primary);
}

/* 5.8 Standings table --------------------------------------------------------- */
.standings {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--primitive-fontSize-sm);
}
.standings thead th {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: var(--primitive-fontSize-2xs);
  font-weight: var(--primitive-fontWeight-bold);
  letter-spacing: var(--primitive-letterSpacing-wider);
  text-transform: uppercase;
  text-align: left;
  padding: var(--primitive-spacing-3) var(--primitive-spacing-4);
}
.standings tbody td {
  padding: var(--primitive-spacing-3) var(--primitive-spacing-4);
  border-bottom: var(--primitive-borderWidth-hairline) solid var(--color-border);
}
.standings tbody tr:hover { background: var(--color-surface-subtle); }
.standings .is-numeric {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.standings .is-pos {
  font-family: var(--font-display);
  font-weight: var(--primitive-fontWeight-extrabold);
}

/* 5.9 Input ------------------------------------------------------------------- */
.input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--primitive-spacing-3) var(--primitive-spacing-4);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--primitive-borderWidth-thick) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--primitive-fontSize-base);
}
.input::placeholder { color: var(--color-text-subtle); }
.input:focus-visible { box-shadow: var(--primitive-shadow-focus); }