/*
 * Rondo design tokens — "Topo": the session as a climbing route.
 * Swapping the brand = editing this file only.
 *
 * Rules that make the world work:
 *  - Coral means WORK and nothing else (the player's work field, the current hold).
 *    App chrome uses only the navy–cream scale.
 *  - Teal means REST and nothing else.
 *  - Labels are gym-tape tags; there are no pill chips and no cards.
 *
 * Alternate brands (bg / text / work / rest), each a token swap:
 *   Tempo     #0B0B0C / #F5F5F0 / #C8FF2A / inverse white
 *   Kettle    #FFF8EC / #1F3D2B / #E9B44C / forest
 *   Sweatshop #000    / #FFF    / #FF5A00 / white flash
 *   Encore    #4A1526 / #F7E6E1 / #D4A853 / blush
 */
/* Archivo (SIL OFL 1.1, app/assets/fonts/archivo-OFL.txt), self-hosted so the player keeps
   its condensed numerals offline. One variable file: width 62–125%, weight 100–900, latin. */
@font-face {
  font-family: Archivo;
  src: url("/assets/archivo-latin-var-591a8b69.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* the wall */
  --navy: #0f1a2b;
  --navy-2: #16243a;   /* raised panels, inputs */
  --navy-3: #1e2f4a;   /* photo placeholders */

  /* chalk */
  --chalk: #f3ede3;
  --chalk-82: rgba(243, 237, 227, .82);
  --chalk-72: rgba(243, 237, 227, .72); /* secondary text, ≥7:1 on navy */
  --chalk-55: rgba(243, 237, 227, .55); /* dashed route line */
  --chalk-40: rgba(243, 237, 227, .4);  /* control outlines */
  --chalk-14: rgba(243, 237, 227, .14); /* hairline rules */

  /* tape */
  --work: #ff6b4a;     /* coral: you are working */
  --rest: #4ad1b9;     /* teal: you are resting */
  --ink: #0f1a2b;      /* type on coral, teal and chalk */

  --radius: 6px;
  --tap: 56px;
  --gutter: 48px;

  --font: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: 68%;         /* font-stretch for numbers, titles and tags */

  --player-number: clamp(200px, 40vw, 300px);
}

/* Phone tokens live here, not in app.css/player.css: this file loads last, so a
   :root override anywhere else is silently beaten by the values above. */
@media (max-width: 520px) {
  :root {
    --gutter: 20px;
    --player-number: clamp(120px, 40vw, 168px);
  }
}