/* The MVP's token names, now read from the Suited kit (kit.css, which loads first and holds every colour, dark and light).
   Screens still on components.css pick up the kit's type, colours and sizes through these names. New screens use kit.js and
   k- classes directly; this file goes away once the last legacy screen is rebuilt. */
:root {
  /* colours: names the MVP used, mapped onto kit tokens (kit.css swaps them for light) */
  --surface-2: var(--raised); --border: var(--line); --muted: var(--text-2);
  --gold-text: var(--gold); --gold-2: var(--gold); --gold-tint: color-mix(in srgb, var(--gold) 14%, transparent);
  --action: var(--ivory); --on-action: var(--on-ivory);
  --win: var(--up); --loss: var(--down);
  --felt: #12241E; --felt-line: rgba(242,239,233,.08);

  /* type: Instrument Sans for everything; the kit's scale (28 title, 22 head, 15 body, 12 label) */
  --font: 'Suited Sans', system-ui, -apple-system, sans-serif;
  --t-hero: 500 44px/1.05 var(--font); --t-h1: 600 28px/1.2 var(--font);
  --t-h2: 600 22px/1.25 var(--font); --t-body: 400 15px/1.5 var(--font);
  --t-label: 500 13px/1.4 var(--font); --t-micro: 500 12px/1.3 var(--font);

  /* space and shape: page gutter 24, button 54, radii 16 / 24 / 32 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --page-x: 24px;
  --r-sm: 8px; --r-md: var(--r-box); --r-lg: var(--r-tile); --r-pill: 999px;
  --sh-0: none; --sh-1: var(--lift); --sh-2: 0 12px 32px rgba(var(--shade-rgb), calc(.5 * var(--shade-a)));
  --ease: cubic-bezier(.2,.8,.2,1); --d-fast: 150ms; --d-base: 240ms; --d-tick: 500ms; --d-celebrate: 1200ms;

  /* structural values live here too, so components contain no raw sizes */
  --hairline: 1px; --focus: 2px; --button-h: 54px; --secondary-h: 44px; --input-h: 54px;
  --tabbar-h: 56px; --page-width: 480px; --table-width: 960px; --rail-w: 88px; --rail-item-h: 64px; --viewport: 100svh; --full: 100%;
  --weight-medium: 500; --hero-tracking: -.02em; --pressed-scale: .98;
  --transparent: transparent; --disabled: .5; --zero: 0; --grow: 1; --instant: 0ms;

  --icon-size: 24px; --avatar-size: 48px; --chart-height: 180px;
  --chart-width: 320px; --chart-stroke: 2px; --d-chart: 650ms;
  --pressed-brightness: .92; --digit-height: 1.1em;

  /* desktop-only dimensions */
  --desktop-page-width: 1120px; --desktop-rail-width: 208px;
  --desktop-settings-width: 200px; --desktop-control-width: 420px;
  --desktop-chart-height: 280px; --desktop-hero: 500 64px/1.05 var(--font);
  --desktop-table-reserve: 208px; --desktop-panel-layer: 2;
}