/* Soon Stopwatch — shared brand theme.
   Colors sampled directly from Soon Pitstop print collateral (pricelist, mascot art), not guessed.
   SoonFont is the brand's logotype/display face — reserved for the wordmark and brand-facing hero
   moments (login, tracking, TV display). Everywhere else (forms, tables, buttons, data) uses Work
   Sans as the single UI family, per product-UI convention: a display face in dense tool screens
   reads as decoration, not brand. */

@font-face {
  font-family: 'SoonFont';
  src: url('/fonts/SoonFont.ttf') format('truetype');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('/fonts/WorkSans-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('/fonts/WorkSans-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('/fonts/WorkSans-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('/fonts/WorkSans-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('/fonts/WorkSans-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-display: swap;
}

:root {
  --font-body: 'Work Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'SoonFont', 'Work Sans', system-ui, sans-serif;

  /* Brand — sampled from Soon Pitstop pricelist/mascot art */
  --brand-blue: #025FE2;
  --brand-blue-dark: #0148AD;
  --brand-blue-tint: #EDF3F9;
  --brand-gold: #F5A800;
  --brand-gold-dark: #C98600;
  --brand-cream: #FFF9EB;

  /* Neutrals */
  --ink: #14181F;
  --muted: #5B6472;
  --faint: #8A93A6;
  --border: #E4E7EC;
  --bg: #F4F6F9;
  --surface: #FFFFFF;

  /* Semantic state */
  --success-bg: #E7F6EC;
  --success-fg: #1C8A54;
  --danger-bg: #FDECEA;
  --danger-fg: #D1372A;
  --danger-fg-strong: #B42318;
  --warning-bg: #FFF3D6;
  --warning-fg: #946200;
}

body { font-family: var(--font-body); }

.brand-wordmark { font-family: var(--font-display); }

/* Checkered-flag motif — the brand's own actual racing/motorsport asset (assets/checker-strip.png),
   not a redrawn approximation. Tiles horizontally at native aspect ratio. */
.checker-strip {
  height: 10px;
  background-image: url('/assets/checker-strip.png');
  background-repeat: repeat-x;
  background-size: auto 100%;
  border-radius: 4px;
}