/* static/css/v3-tokens.css - sketch 1 v3 (Trading Floor, the owner's review, mobile first).
 *
 * The tokens the six v3 lanes share. What each one is for, and the rules for
 * using them: .planning/sketches/s1-trading-floor-v3/STYLE.md. Every v3 lane
 * copies this file byte for byte from
 * .planning/sketches/s1-trading-floor-v3/foundation/v3-tokens.css in its first
 * commit, so the copies merge as one. Nobody edits it after that: a lane that
 * needs another token names it in what it returns.
 *
 * No new hue. Every colour below is an existing token, a lobby.py PLAYER_COLORS
 * value, or a black at an alpha the game already uses (the deed card's dim is
 * rgba(0,0,0,.6), the mortgage sheet's .55).
 * Unlayered, :root only, like tokens.css, s1-tokens.css and v2-tokens.css.
 * Loaded on the rebuilt game page after v2-tokens.css (templates/_s1_head.html),
 * and on the menu and the pre-lobby by the v3-menu lane's own <link>.
 */
:root{
  /* The board: the owner's colour over a tile (STYLE 11.4). */
  --v3-own-alpha:.45;              /* Medium, the owner's pick */
  --dur-own-fade:220ms;            /* a tile changing hands */

  /* The dim behind a small panel inside a dialog (the per-turn panel, the
     chart style sheet). The same black the mortgage sheet uses. */
  --v3-scrim:rgba(0,0,0,.55);

  /* The dashboard on a phone (STYLE 9.3). Three bands, then the pane. */
  --v3-dash-head-h:44px;           /* worth, cash, turn, close */
  --v3-dash-turn-h:40px;           /* the per-turn button */
  --v3-dash-tabs-h:40px;           /* the tab row */

  /* Lists and buttons on the money screens. */
  --v3-row-h:38px;                 /* a market or bond row */
  --v3-row-h-tight:36px;           /* the same row at a fold step; never less (STYLE 5) */
  --v3-tap:44px;                   /* a new button, switch or chip, both sides (STYLE 5) */
  --v3-scroll-box-min:100px;       /* an allowed inner scroll box shows at least this (SPEC A.4) */
  --v3-btn-h:52px;                 /* a quick Buy, Sell or Lend amount: two lines */
  --v3-chart-min:112px;            /* a chart never folds below this; past it, other parts fold */

  /* Candles (STYLE 11.16). Three colour sets; the player picks one. */
  --v3-candle-up:var(--pos);       --v3-candle-down:var(--neg);
  --v3-candle-up-cb:var(--info);   --v3-candle-down-cb:var(--s-orange);
  --v3-candle-up-plain:var(--fg);  --v3-candle-down-plain:var(--dim);
  --v3-candle-max-w:18px;          /* a body is 58% of its slot, at most this */

  /* The menu and the lobby list (STYLE 11.1, 11.2). */
  --v3-menu-col:440px;             /* desktop: the left column */
  --v3-start-h:64px;               /* Start a Game */
  --v3-tile-h:88px;                /* the four big tiles */
  --v3-lobby-row-h:64px;           /* a room in the phone list */

  /* The colour picker (STYLE 11.3). */
  --v3-dot:44px;                   /* phone */
  --v3-dot-desk:38px;              /* desktop */
  --v3-ring:3px;                   /* a taken colour's ring */
  --dur-ring:180ms;                /* a colour drains to a ring, a check pops in */

  /* The trade screen (STYLE 11.9). */
  --v3-term-h:46px;                /* one term line in a column */
  --v3-kind-h:52px;                /* one of the eight kind tiles */
  --v3-sheet-h:484px;              /* a term form, phone, at most: the lane caps it at the window less
                                      180px, as a vh/dvh pair (SPEC H.19) */
  --v3-debt-h:48px;                /* the debt notice's short version, phone (STYLE 11.7) */
  --v3-debt-folded-h:44px;         /* folded: one line, a tap target */

  /* The news strip (STYLE 11.19). Unitless: read by script. */
  --v3-news-min-ms:2500;           /* every item is in view at least this long */
  --v3-news-backlog:6;             /* items waiting, at most */
  --v3-news-strip-min-h:696;       /* the strip shows when the window is this tall at load (px) */

  /* Stacking inside the dashboard window (.b5-win is the context). */
  --z-v3-dash-dim:5;
  --z-v3-dash-panel:6;
  --z-v3-dash-sheet:7;
}
@media (max-width:360px){
  :root{ --v3-dot:40px; }
}