/* static/css/kit-tokens.css -- SKETCH 4: THE one token file.
 *
 * Every colour, size and time the sketch-4 kit uses is a custom property here,
 * so a theme switch or one tuning edit changes the whole UI at once (how the
 * owner's YoRHa desktop panel works: one palette per theme, one template).
 * Design notes: .planning/sketch4/DESIGN-NOTES.md. Decisions: DECISIONS.md
 * (sketch 4) and .planning/sketch41/DECISIONS.md (sketch 4.1, S41-48 on).
 *
 * THE ROLES are the desktop panel's own (~/.config/yorha/palettes):
 *   BG page · GRID behind the board · PANEL a card · PANELALT a raised strip
 *   LINE a card's border · LINESOFT a row's hairline · INK text · SOFT quiet text
 *   DIM quiet text that must stay readable (4.6:1, the yorha-theme rule)
 *   INV / INVTEXT a highlight (a button under the pointer, a picked switch, a tip)
 *   HEAD-BG / HEAD-FG the header strip · ACCENT / ACCENTTEXT the one call to action
 *   SELBG hover and selected rows
 * plus three of the kit's own (sketch 4.1, item 3): WELL a field or an inset
 * box inside a panel, BOARD-CENTRE the board's hollow, and the header strip as
 * a role of its own (it was INV), so a theme can have dark strips and a light
 * highlight, or the other way round.
 *
 * THREE THEMES (sketch 4.1, brief item 3; DECISIONS S41-48..):
 *   dark   V4's dark: InvestUp's own colours (tokens.css, the "dir-a" palette)
 *   light  V4's light: InvestUp's slate and amber on a soft grey, not paper
 *          (it replaces sketch 4's parchment, which the owner found too bright
 *          and not InvestUp's; "parchment" still selects it)
 *   v3     V3's colours, measured off V3's own screens (tools/sketch/v3_colours.py):
 *          the navy page, the slate board, InvestUp's panels, dark header strips
 * Every theme block declares EVERY colour token (tests/test_s4_kit.py checks it),
 * so a theme on any element recomputes its whole subtree.
 *
 * A PLAYER'S OWN COLOURS (static/js/kit-theme.js): the colour editor starts from
 * one of the three, and what the player changes is written on <html> as inline
 * custom properties over that theme (inline beats every rule here), together
 * with the shades worked out from them (a readable text shade, a faint fill, a
 * hover). Nothing else knows: every screen reads these tokens and follows.
 *
 * NAMES: every token starts with --k-, so nothing here can collide with the
 * game's existing --bg, --pnl, --acc... (tokens.css), and loading this file
 * changes nothing on a page that does not use the kit.
 *
 * THEMES ON ELEMENTS: dark is the default (no attribute needed). [data-kit-theme]
 * on <html> switches the page; on any element it switches that subtree (the
 * gallery shows the themes side by side this way). Tokens that point at other
 * tokens are declared on `:root, [data-kit-theme]`, so a nested theme
 * recomputes them.
 */

/* ── Dark (default): InvestUp's colours on the desktop's roles ───────────── */
:root, [data-kit-theme="dark"] {
  --k-bg:        #0b0e11;   /* tokens.css --bg */
  --k-grid:      #0f1317;   /* between --bg and --pnl, like the desktop's GRID */
  --k-panel:     #12161b;   /* --pnl */
  --k-panelalt:  #171c23;   /* --pnl2 */
  --k-well:      #0b0e11;   /* a field, the picked tab, an inset box: BG, as sketch 4 drew them */
  --k-board-centre: #0b0e11;/* the board's hollow: BG, as sketch 4 drew it */
  --k-line:      #3a4450;   /* a card's border: --line2 #2a333e a quarter of the way to --dim */
  --k-linesoft:  #222a33;   /* a row's hairline: between --line and --line2 */
  --k-ink:       #d6dde5;   /* --fg */
  --k-soft:      #7c8896;   /* --dim; reads 5.0:1 on PANEL, so DIM = SOFT here */
  --k-dim:       #7c8896;
  --k-inv:       #d6dde5;   /* the highlight is INK, like the desktop's dark palette */
  --k-invtext:   #0b0e11;
  --k-head-bg:   #d6dde5;   /* the header strip: INK, the desktop's light strip (S4-01) */
  --k-head-fg:   #0b0e11;
  --k-head-soft: #0b0e11;
  --k-accent:    #f5a524;   /* --acc */
  --k-accenttext:#f5a524;   /* 8.4:1 on PANEL, no blend needed */
  --k-accentbg:  #f5a524;
  --k-onaccent:  #0b0e11;   /* --on-acc, 9.5:1 */
  --k-accentedge:#f5a524;
  --k-accentsoft:rgba(245,165,36,.14);   /* --acc-dim */
  --k-accenthover:#ffb933;  /* --acc-hover */
  --k-selbg:     #1b222b;
  --k-onpc:      #0b0e11;   /* text on a player's colour (every one is light here) */

  /* money and state */
  --k-pos:  #4ade80;  --k-postext:  #4ade80;  --k-possoft: rgba(74,222,128,.12);   /* --pos */
  --k-neg:  #f87171;  --k-negtext:  #f87171;  --k-negsoft: rgba(248,113,113,.12);  /* --neg */
  --k-warn: #e3b341;  --k-warntext: #e3b341;
  --k-info: #7fb6d9;  --k-infotext: #7fb6d9;

  /* players: lobby.py PLAYER_COLORS, as they are (6.5:1 or more on PANEL) */
  --k-c-sky:#38bdf8; --k-c-green:#4ade80; --k-c-violet:#c084fc;
  --k-c-pink:#f472b6; --k-c-amber:#fbbf24; --k-c-orange:#fb923c;

  /* colour sets: tokens.css --s-*, as they are */
  --k-s-brown:#8d6748; --k-s-lblue:#7fb6d9; --k-s-pink:#c97ba8; --k-s-orange:#d98a45;
  --k-s-red:#c4564f;   --k-s-yellow:#cbb04a; --k-s-green:#5c9e6b; --k-s-blue:#4a6fa5;
  --k-s-rail:#6e7a88;  --k-s-util:#7e8aa0;

  /* the board's tiles (sketch 4.1, item 4): richup's tile in InvestUp's slate.
     A tile is a step lighter than a panel, so the centre (BG) reads as the
     board's hollow; the flag shows through at 22% (measured against richup's crops; V3 35) */
  --k-tile:        #19202a;
  --k-tile-hover:  #232c38;
  --k-tile-rail:   #222b37;   /* an airport: richup's slate tile */
  --k-tile-util:   #17282e;   /* a utility: richup's teal tile, darkened */
  --k-tile-ink:    #f1f4f8;
  --k-tile-shadow: 0 1px 2px rgba(0,0,0,.6);
  --k-tile-wash:   22%;
  --k-tile-wash-m: 12%;       /* a mortgaged deed's flag, washed out */
  --k-tag-bg:      rgba(255,255,255,.13);   /* richup's price pill: white at ~22% on its indigo, less on our darker slate */
  --k-tag-ink:     #c9d1da;
  --k-own-hi:      rgba(255,255,255,.28);   /* richup's owner block: the token's colour + 18-30% white */
  --k-own-lo:      rgba(255,255,255,.12);
  --k-flag-ring:   rgba(0,0,0,.45);
  --k-chance:      #f472b6;
  --k-treasure:    #f5a524;
  --k-die:         #f4f6f8;   /* V3's die: a white face, dark pips */
  --k-die-edge:    rgba(0,0,0,.18);
  --k-pip:         #0b0e11;
  --k-pip-shadow:  rgba(0,0,0,.5);
  --k-die-lo:      rgba(0,0,0,.18);       /* V3's face shading (foundation.css .dsf-die__face) */
  --k-die-hi:      rgba(255,255,255,.45);
  --k-die-shadow:  rgba(0,0,0,.45);       /* the die's shadow on the board */
  --k-hatch:       rgba(0,0,0,.24);       /* a mortgaged deed's block */

  /* up and down ON A HEADER STRIP (sketch 4.1, the ticker tape in the board's
     strip): the strip is INK here, so the money colours are darkened (hue kept)
     until they read 4.6:1 on it */
  --k-head-up:     #156b39;
  --k-head-down:   #a1302e;

  --k-scrim:  rgba(0,0,0,.55);              /* the mortgage sheet's black (v3-tokens --v3-scrim) */
  --k-shadow: 0 16px 48px rgba(0,0,0,.6);   /* tokens.css --elev-dialog */
  --k-shadow-sm: 0 8px 28px rgba(0,0,0,.6); /* --elev-toast */
  color-scheme: dark;
}

/* ── Light: InvestUp's slate and amber on a soft grey (sketch 4.1, S41-48) ──
   The owner: sketch 4's light theme (the desktop's parchment) was "too bright"
   and not InvestUp's colours. So: InvestUp's own hue (its panels are slate,
   hsl 213 20%) at about a fifth less light than parchment's paper (a panel's
   luminance .54 against .68, a tile's .63 against .76), InvestUp's dark panel
   colour as the header strip (so every strip is the game's own, and the money
   colours on it are InvestUp's as they are), and every hue darkened by mixing
   towards black (hue kept, not greyed) until it reads on the grey: text 4.6:1
   on every surface, a player's block 3:1, a set's square 2.4:1. Worked out by
   kit-theme.js's own `readable()` (S41-49), so the editor makes the same shades. */
[data-kit-theme="light"] {
  --k-bg:        #a7b1be;   /* hsl(213 15% 70%) */
  --k-grid:      #909dad;   /* hsl(213 15% 62%): the board's ground, a step under the page */
  --k-panel:     #bbc3ce;   /* hsl(213 16% 77%) */
  --k-panelalt:  #adb7c2;   /* hsl(213 15% 72%) */
  --k-well:      #cbd3dc;   /* hsl(213 20% 83%): a field reads lighter than its panel */
  --k-board-centre: #a7b1be;
  --k-line:      #5a6572;   /* hsl(213 12% 40%): 3.3:1 on PANEL */
  --k-linesoft:  #909aa7;
  --k-ink:       #12161b;   /* InvestUp's --pnl: 10.2:1 on PANEL */
  --k-soft:      #4a5159;   /* 3.4:1: labels only */
  --k-dim:       #383d44;   /* 4.6:1 on BG, PANEL, PANELALT, WELL and SELBG */
  --k-inv:       #1f2630;   /* the highlight: InvestUp's dark slate */
  --k-invtext:   #d6dde5;
  --k-head-bg:   #1f2630;   /* the header strip: the game's own dark panel colour */
  --k-head-fg:   #d6dde5;   /* InvestUp's --fg, 11:1 */
  --k-head-soft: #d6dde5;
  --k-accent:    #f5a524;   /* InvestUp's amber stays the one call to action */
  --k-accenttext:#52380c;   /* amber towards black until 4.6:1 on every surface */
  --k-accentbg:  #f5a524;
  --k-onaccent:  #0b0e11;
  --k-accentedge:#ae751a;   /* the amber button's edge, so it holds on the grey (2.2:1) */
  --k-accentsoft:rgba(245,165,36,.26);
  --k-accenthover:#ffb933;
  --k-selbg:     #9eaab7;   /* hsl(213 15% 67%) */
  --k-onpc:      #ffffff;   /* the darkened player colours carry white (6:1) */

  --k-pos:  #256f40;  --k-postext:  #174528;  --k-possoft: rgba(37,111,64,.16);
  --k-neg:  #9d4747;  --k-negtext:  #622c2c;  --k-negsoft: rgba(157,71,71,.16);
  --k-warn: #785e22;  --k-warntext: #4a3b15;
  --k-info: #476579;  --k-infotext: #2c3f4c;

  /* players: each towards black until a block reads 3:1 on PANEL, PANELALT and a tile */
  --k-c-sky:#1f6989; --k-c-green:#256f40; --k-c-violet:#77519c;
  --k-c-pink:#974671; --k-c-amber:#7b5d12; --k-c-orange:#8f5322;

  /* sets: only as far as a small square needs (2.4:1 on PANEL) */
  --k-s-brown:#8d6748; --k-s-lblue:#597f98; --k-s-pink:#a7668b; --k-s-orange:#aa6c36;
  --k-s-red:#c4564f;   --k-s-yellow:#8c7933; --k-s-green:#4e865b; --k-s-blue:#4a6fa5;
  --k-s-rail:#6e7a88;  --k-s-util:#707b8f;

  --k-tile:        #c9d0d9;   /* hsl(213 18% 82%) */
  --k-tile-hover:  #bdc4cc;
  --k-tile-rail:   #bec6cf;   /* the tile, an eighth of the way to the airports' slate */
  --k-tile-util:   #b7c8d0;   /* the tile, an eighth of the way to teal */
  --k-tile-ink:    #12161b;
  --k-tile-shadow: none;
  --k-tile-wash:   26%;
  --k-tile-wash-m: 14%;
  --k-tag-bg:      rgba(18,22,27,.12);
  --k-tag-ink:     #1f262e;
  --k-own-hi:      rgba(255,255,255,.22);
  --k-own-lo:      rgba(255,255,255,.04);
  --k-flag-ring:   rgba(18,22,27,.4);
  --k-chance:      #95456f;   /* pink towards black, 4:1 on a tile */
  --k-treasure:    #835813;
  --k-die:         #eef1f4;
  --k-die-edge:    rgba(18,22,27,.3);
  --k-pip:         #12161b;
  --k-pip-shadow:  rgba(0,0,0,.35);
  --k-die-lo:      rgba(18,22,27,.14);
  --k-die-hi:      rgba(255,255,255,.6);
  --k-die-shadow:  rgba(18,22,27,.35);
  --k-hatch:       rgba(0,0,0,.22);

  --k-head-up:     #4ade80;   /* the strip is InvestUp's dark slate: its own money colours read on it */
  --k-head-down:   #f87171;

  --k-scrim:  rgba(18,22,27,.4);
  --k-shadow: 0 14px 40px rgba(18,22,27,.35);
  --k-shadow-sm: 0 6px 20px rgba(18,22,27,.3);
  color-scheme: light;
}

/* ── V3 colours (sketch 4.1, S41-50): V3's palette on the kit's roles ──────
   Read off V3's own game page and dashboard at 1440x900 (tools/sketch/
   v3_colours.py: each region's painted background, the text colours by
   amount). V3's page is the slate-900 navy (#0f172a, .game-container), its
   board the slate-800 (#1e293b) with slate tiles and centre (#2d3748, borders
   #475569, white names), its side panels and windows InvestUp's --pnl with
   --pnl2 header rows in quiet capitals (--dim), its fields --bg, its buttons
   --pnl2 edged --line2, and amber for the one call to action. The kit keeps
   its own layout (strips, pills, owner blocks); only the colours are V3's. */
[data-kit-theme="v3"] {
  --k-bg:        #0f172a;   /* V3's page around the board */
  --k-grid:      #1e293b;   /* V3's board */
  --k-panel:     #12161b;   /* V3's side panels and windows (--pnl) */
  --k-panelalt:  #171c23;   /* V3's header rows (--pnl2) */
  --k-well:      #0b0e11;   /* V3's fields (--bg) */
  --k-board-centre: #2d3748;/* V3's board centre, the tiles' slate */
  --k-line:      #2a333e;   /* V3's buttons and cards (--line2) */
  --k-linesoft:  #1f262e;   /* V3's panel edges and row lines (--line) */
  --k-ink:       #d6dde5;   /* --fg */
  --k-soft:      #7c8896;   /* --dim */
  --k-dim:       #7c8896;
  --k-inv:       #2a333e;   /* a highlight in V3 is a raised slate, not a light fill */
  --k-invtext:   #f8fafc;   /* V3's player names */
  --k-head-bg:   #171c23;   /* V3's header rows: dark, */
  --k-head-fg:   #a9b3bf;   /* titles in quiet capitals (V3: --dim; a step lighter, as the kit's strip carries buttons) */
  --k-head-soft: #7c8896;
  --k-accent:    #f5a524;
  --k-accenttext:#f5a524;
  --k-accentbg:  #f5a524;
  --k-onaccent:  #0b0e11;
  --k-accentedge:#f5a524;
  --k-accentsoft:rgba(245,165,36,.14);
  --k-accenthover:#ffb933;
  --k-selbg:     #1f262e;   /* V3's row under the pointer */
  --k-onpc:      #0b0e11;

  --k-pos:  #4ade80;  --k-postext:  #4ade80;  --k-possoft: rgba(74,222,128,.12);
  --k-neg:  #f87171;  --k-negtext:  #f87171;  --k-negsoft: rgba(248,113,113,.12);
  --k-warn: #e3b341;  --k-warntext: #e3b341;
  --k-info: #7fb6d9;  --k-infotext: #7fb6d9;

  --k-c-sky:#38bdf8; --k-c-green:#4ade80; --k-c-violet:#c084fc;
  --k-c-pink:#f472b6; --k-c-amber:#fbbf24; --k-c-orange:#fb923c;

  --k-s-brown:#8d6748; --k-s-lblue:#7fb6d9; --k-s-pink:#c97ba8; --k-s-orange:#d98a45;
  --k-s-red:#c4564f;   --k-s-yellow:#cbb04a; --k-s-green:#5c9e6b; --k-s-blue:#4a6fa5;
  --k-s-rail:#6e7a88;  --k-s-util:#7e8aa0;

  --k-tile:        #2d3748;   /* V3's tile */
  --k-tile-hover:  #3a4659;
  --k-tile-rail:   #334155;   /* V3 draws every tile alike; the kit's airport and utility tints, on V3's slate */
  --k-tile-util:   #273e47;
  --k-tile-ink:    #ffffff;   /* V3's tile names */
  --k-tile-shadow: 0 1px 2px rgba(0,0,0,.6);
  --k-tile-wash:   35%;       /* V3's flags show stronger (S41-12) */
  --k-tile-wash-m: 15%;
  --k-tag-bg:      rgba(255,255,255,.12);
  --k-tag-ink:     #cbd5e1;   /* V3's slate-300 */
  --k-own-hi:      rgba(255,255,255,.28);
  --k-own-lo:      rgba(255,255,255,.12);
  --k-flag-ring:   rgba(0,0,0,.45);
  --k-chance:      #d98a45;   /* V3's decks (s1-tokens --deck-chance: --s-orange) */
  --k-treasure:    #7fb6d9;   /* (--deck-treasure: --info) */
  --k-die:         #f4f6f8;
  --k-die-edge:    rgba(0,0,0,.18);
  --k-pip:         #0b0e11;
  --k-pip-shadow:  rgba(0,0,0,.5);
  --k-die-lo:      rgba(0,0,0,.18);
  --k-die-hi:      rgba(255,255,255,.45);
  --k-die-shadow:  rgba(0,0,0,.45);
  --k-hatch:       rgba(0,0,0,.24);

  --k-head-up:     #4ade80;   /* the strip is dark here: the money colours as they are */
  --k-head-down:   #f87171;

  --k-scrim:  rgba(0,0,0,.6);               /* V3's dialogs (foundation.css .dsf-dialog::backdrop) */
  --k-shadow: 0 16px 48px rgba(0,0,0,.6);
  --k-shadow-sm: 0 8px 28px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ── Aliases: recomputed in every themed subtree ─────────────────────────── */
:root, [data-kit-theme] {
  /* link groups (the Webull part): three is enough */
  --k-link-a: var(--k-info);
  --k-link-b: var(--k-s-pink);
  --k-link-c: var(--k-s-green);

  --k-focus: var(--k-accent);

  /* the ticker tape (sketch 4.1, item 10): on a panel these; in a header strip
     kit.css swaps them for the strip's own (--k-head-fg, --k-head-up/down) */
  --k-tt-ink:  var(--k-ink);
  --k-tt-dim:  var(--k-dim);
  --k-tt-up:   var(--k-postext);
  --k-tt-down: var(--k-negtext);
}

/* ── Type, sizes, motion: one scale for the whole UI ─────────────────────── */
:root {
  --k-sans: 'IBM Plex Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --k-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --k-f-xs:  10px;   /* header status, chip text, mono captions */
  --k-f-sm:  11px;   /* header title, kv keys, tabs, buttons in a strip */
  --k-f-md:  13px;   /* body text, row names */
  --k-f-lg:  15px;   /* names in the Players card */
  --k-f-xl:  20px;   /* the big cash figure */
  --k-f-xxl: 30px;   /* one hero number (winner, board centre) */
  --k-track: .24em;  /* the header title's letter spacing (the desktop's "U N I T") */

  --k-s1: 4px; --k-s2: 8px; --k-s3: 12px; --k-s4: 16px; --k-s5: 24px; --k-s6: 32px;

  --k-gap:    10px;  /* between panels */
  --k-pad:    12px;  /* inside a panel's body (the desktop's .body) */
  --k-head-h: 30px;  /* the header strip */
  --k-tab-h:  28px;
  --k-row-h:  36px;  /* a list row */
  --k-kv-h:   22px;  /* a label/value row */
  --k-btn-h:  32px;
  --k-btn-h-sm: 24px;
  --k-btn-h-lg: 44px;
  --k-bar-h:  6px;
  --k-mark-w: 3px;   /* a row's left colour mark */
  --k-radius: 2px;   /* tokens.css --radius-control: square enough to read as the desktop's */
  --k-side-w: 340px; /* a side column of panels on a wide desktop */

  /* the board (step 2a): richup's square, sized from the window height */
  --k-side-min:  300px;   /* a side column on a wide desktop never gets narrower */
  --k-side-half: 320px;   /* the one card column of the half-width layout */
  --k-corner:    13;      /* a corner, in % of the board's side (richup: 87 of 689 px) */
  --k-tile-gap:  2px;
  /* a tile's middle (sketch 4.1): its padding, and the inner edge kept for the
     round flag and the tokens, in board units (a token and its gap) */
  --k-tb-x:      3px;
  --k-tb-y:      2px;
  --k-tb-in:     3;
  --k-u:         1cqmin;  /* the board's unit; the square (1cqmin) and the compressed rows (.74cqw) set their own */
  --k-sq:        640px;   /* the board square's side; the page grid works out the real one from the window */
  /* the compressed view's corner, a square 1.4 tiles wide that sets its row's
     height (cqw: the rows' own width); capped so a very wide panel keeps short rows */
  --k-rc:        clamp(58px, calc((100cqw - 9 * var(--k-tile-gap)) * 1.4 / 10.4), 150px);
  --k-wide-at:   1280px;  /* documentation only: the wide/half switch is the media query in kit.css */

  /* the phone (phase B, below 900 px): the parts around the board, so the board
     square can be worked out from what is left (kit.css, PHONE) */
  --k-ph-gap:   6px;    /* between panels, and the page's edge */
  --k-ph-top:   78px;   /* the top panel: You (a strip and one row of figures), or the room's card */
  --k-ph-dock:  230px;  /* the dock's height the board leaves: a strip and four player rows */
  --k-ph-board: 280px;  /* the board's least side, on a short screen (the dock pages instead) */
  --k-ph-bar:   56px;   /* the turn's buttons */
  --k-ph-nav:   50px;   /* the tab bar */
  --k-ph-row:   48px;   /* a player row (52 px on desktop) */
  --k-ph-tape:  26px;   /* the ticker tape's row over the board, when it is on (sketch 4.1, item 10) */
  --k-ph-side:  320px;  /* a phone on its side: the right column's least width, beside the board (its six tabs whole; sketch 4.11) */

  --k-dur:       150ms;   /* --dur-micro */
  --k-dur-flash: 1600ms;  /* a cash change stays this long */
  --k-dur-toast: 4200ms;  /* read by kit.js */

  --k-z-menu:  50;
  --k-z-toast: 100000;    /* --z-toast: above the highest legacy z-index */
}