/* SIM Coach design tokens. Every colour in the app comes from here (the design brief in PLAN.md is binding). */
:root {
  /* surfaces */
  --bg: #0E0E14;
  --panel: #16161F;
  --raised: #1E1E2A;
  --hair: #2A2A38;
  --text: #F4F4F6;
  --muted: #9A9AAA;
  --faint: #5C5C6C;

  /* brand */
  --f1-red: #E10600;
  --red-text: #FF4B45;   /* the brand red, lifted so small red text reads on the dark panels */

  /* two-lap identity: lap A red, lap B yellow (always labelled, never colour alone) */
  --lap-a: #FF2D2D;
  --lap-b: #FFD400;

  /* F1 timing colours, for meaning only */
  --purple: #A855F7;      /* best of all: session / theoretical best */
  --green: #22D36B;       /* personal best, a gain */
  --loss: #FF5A1F;        /* a loss: red-orange so it never reads as lap A's red */
  --slower: #FFD400;

  /* driver inputs */
  --in-full: #22D36B;
  --in-part: #FFB020;
  --in-coast: #6B6B7B;
  --in-brake: #FF2D2D;

  /* derived, translucent */
  --band: rgba(255, 255, 255, 0.05);
  --band-edge: rgba(255, 255, 255, 0.08);
  --gain-fill: rgba(34, 211, 107, 0.34);
  --loss-fill: rgba(255, 90, 31, 0.34);

  /* type and space */
  --font: "Titillium Web", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gutter: 24px;
  --bar-h: 48px;
  --rule: 3px;
}

@media (max-width: 700px) {
  :root { --gutter: 16px; }
}