/* Perfect Start — brand tokens.
 *
 * The one place the palette and the typefaces are written down for the web.
 * Everything here is traceable to assets/brand/source/perfect-start-style-guide.png
 * (documented in docs/BRAND.md); page-level styling belongs in styles.css and
 * should reach for these tokens rather than restating a hex.
 *
 * The rule that keeps the brand tight: green carries meaning (go, ready, the
 * product working), the start-light amber and red carry the countdown, and
 * nothing else is a colour. Off-palette values are permitted only as hairlines
 * and washes — the --ps-line-* and --ps-wash-* tokens below — never as fills,
 * type or icons.
 */

/* ---------------------------------------------------------------- type --- */
/* Self-hosted: the site must not fetch a byte from a third party (the page is
 * a shop window during club validation, and tests/test_site.py pins it). */

@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/rajdhani-400.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/rajdhani-500.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/rajdhani-600.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/rajdhani-700.woff2") format("woff2");
}

:root {
  /* Rajdhani for anything that should read as Perfect Start: headings, labels,
   * numbers, navigation. The style guide's other face, Bank Gothic, is a
   * licensed font we cannot redistribute — it lives in the logo artwork, which
   * ships as artwork (web/brand/ps-mark.png), not as live text. */
  --ps-font-display: "Rajdhani", "Segoe UI", Roboto, system-ui, sans-serif;
  --ps-font-ui: "Rajdhani", "Segoe UI", Roboto, system-ui, sans-serif;
  /* Paragraphs stay in the system face. Rajdhani is a condensed display family
   * and reading three sentences of it is work. */
  --ps-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --------------------------------------------------------- palette --- */
  /* Start green. The single accent, and the only colour that means "go". */
  --ps-green: #2ec94b;
  --ps-green-deep: #1b7d30;   /* pressed states, gradient tails */
  --ps-green-dim: #22993a;    /* green on green, dividers inside green panels */

  /* Start lights. Reserved for the countdown and for status that genuinely
   * maps onto it — never decoration. */
  --ps-red: #e73335;
  --ps-yellow: #f9d61e;
  --ps-orange: #fa900c;

  /* Neutrals. The artwork sits on true black; the page uses it too. */
  --ps-black: #000000;
  --ps-carbon: #0a0a0a;       /* page ground, one step off black to kill banding */
  --ps-panel: #1a1a1a;        /* palette dark — raised surfaces */
  --ps-panel-2: #121212;      /* between ground and panel */
  --ps-grey: #3e3e3e;         /* palette mid grey — inactive lamps, rules */
  --ps-silver: #a1a1a0;       /* palette silver — secondary text */
  --ps-white: #ffffff;
  --ps-bone: #e8e9e8;         /* body copy: white is too hot at paragraph size */

  /* Hairlines and washes. The only sanctioned off-palette values: they exist
   * at 1px or at low alpha, so they read as edges and light, not as colour. */
  --ps-line: #232323;
  --ps-line-soft: rgba(255, 255, 255, 0.08);
  --ps-line-green: rgba(46, 201, 75, 0.32);
  --ps-wash-green: rgba(46, 201, 75, 0.12);
  --ps-wash-green-faint: rgba(46, 201, 75, 0.05);
  --ps-glow-green: 0 0 24px rgba(46, 201, 75, 0.45);

  /* The podium. Three places, and the palette already had all three: the two
   * amber lamps of the countdown, either side of the guide's own silver. Green
   * is not one of them and must not become one — green means *go*, and a medal
   * is not a state of the product. Nothing is minted here; these are names for
   * colours that already exist, so a place on the podium gets written down once
   * rather than sampled off a screenshot the next time somebody needs it.
   *
   * A medal is an *edge* — the ring and the wash below are the whole of it, and
   * the figure inside the cell stays white. That is the rule that keeps a gold
   * cell from reading as the yellow JUMP verdict two rows above it: yellow as
   * type is a verdict, yellow as a hairline is first place. Silver is the
   * palette's own --ps-silver; it needs no alias to be the second lamp. */
  --ps-gold: var(--ps-yellow);
  /* Third place, held back to three-quarters. At full strength the start
   * light's orange is brighter than the guide's silver, which puts bronze
   * above silver in the one ordering a podium must never get wrong. */
  --ps-bronze: rgba(250, 144, 12, 0.78);
  --ps-wash-gold: rgba(249, 214, 30, 0.07);
  --ps-wash-silver: rgba(161, 161, 160, 0.08);
  --ps-wash-bronze: rgba(250, 144, 12, 0.06);

  /* ------------------------------------------------------ proportion --- */
  --ps-radius: 18px;
  --ps-radius-lg: 26px;
  --ps-tracking: 0.14em;      /* uppercase Rajdhani needs air */
}

/* ------------------------------------------------------------ marks ---- */

.ps-mark {
  display: block;
  width: auto;
  height: 1em;
}

/* The four start lamps, as a component. Add .is-armed to light the green one;
 * .ps-lights--stack runs them vertically like the jersey artwork. */
.ps-lights {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.ps-lights--stack {
  flex-direction: column;
}
.ps-lights i {
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--ps-grey);
}
.ps-lights i:nth-child(1) { background: var(--ps-red); }
.ps-lights i:nth-child(2) { background: var(--ps-yellow); }
.ps-lights i:nth-child(3) { background: var(--ps-orange); }
.ps-lights i:nth-child(4) {
  width: 0.72em;
  height: 0.72em;
  background: var(--ps-green);
  box-shadow: var(--ps-glow-green);
}
.ps-lights--dim i:nth-child(-n + 3) { opacity: 0.5; }

/* Uppercase micro-label: the voice of the style guide's captions. */
.ps-label {
  font-family: var(--ps-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--ps-tracking);
  text-transform: uppercase;
}

/* Timing readout: 00.183. Tabular so a changing number does not jitter. */
.ps-readout {
  font-family: var(--ps-font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ps-green);
}