/* The design system: every colour, font, size, radius and space the site uses (docs/UI-RESEARCH.md). Two families:
   Instrument Sans for all text and numbers (tabular figures), Archivo for the wordmark only, so the brand can be swapped
   in one place. One accent; green and red only for PnL up and down. Dark first, light kept. Served from /fonts (the
   CSP allows fonts from 'self' only). The other sheets use only these names. */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2?v=ebaa7589ea7b") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.woff2?v=ebaa7589ea7b") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Archivo", var(--font);
  --font-num: var(--font); /* numbers use the text face with tabular figures (.num) */

  /* spacing: a 4 px rhythm */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --gutter: 32px;
  --page: 1200px;

  /* type scale (size / line height) */
  --t-xs: 12px/16px var(--font);
  --t-sm: 13px/18px var(--font);
  --t-md: 14px/20px var(--font);
  --t-lg: 16px/22px var(--font);
  --t-xl: 20px/26px var(--font);
  --t-2xl: 28px/34px var(--font);
  --t-3xl: 36px/40px var(--font);

  --radius-sm: 8px;   /* buttons, inputs, rows */
  --radius: 12px;     /* cards, panels */
  --radius-pill: 999px;
  --tap: 44px;        /* smallest thing a thumb has to hit */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --sheet-shade: rgb(0 0 0 / .6);
}
:root[data-theme="dark"] {
  --bg: #0d0e10;
  --panel: #15171a;
  --panel-2: #1c1f23;
  --panel-3: #262a2f;
  --line: rgb(255 255 255 / .08);
  --line-2: rgb(255 255 255 / .14);
  --text: #f3f4f6;
  --muted: #a3a8b0;   /* 7.9:1 on --bg */
  --faint: #7d838c;   /* 5.0:1 on --bg */
  --accent: #f2b705;  /* the primary button and the picked side. Nothing else. */
  --accent-ink: #141414;
  --accent-soft: rgb(242 183 5 / .12);
  --up: #3fcf8e;
  --down: #f6685e;
  --veil: rgb(13 14 16 / .88);
  --shadow: 0 16px 48px -16px rgb(0 0 0 / .8);
  /* one colour per trader in a race (index 0..7); line markets use 0 for over, 1 for under */
  --s0: #f2b705; --s1: #8fb3ff; --s2: #c58cf2; --s3: #5fd0c5; --s4: #f2935c; --s5: #e8e8e8; --s6: #9fd36a; --s7: #f27fb0;
}
:root[data-theme="light"] {
  --bg: #f7f7f8;
  --panel: #ffffff;
  --panel-2: #f1f2f4;
  --panel-3: #e5e7ea;
  --line: rgb(16 18 22 / .09);
  --line-2: rgb(16 18 22 / .16);
  --text: #121417;
  --muted: #555b64;
  --faint: #6b717a;
  --accent: #f2b705;
  --accent-ink: #141414;
  --accent-soft: rgb(242 183 5 / .16);
  --up: #12855a;
  --down: #d1392f;
  --veil: rgb(247 247 248 / .9);
  --shadow: 0 16px 40px -20px rgb(16 18 22 / .3);
  --s0: #c99400; --s1: #3f6fd9; --s2: #8a4fc2; --s3: #1f8f85; --s4: #c9612a; --s5: #3a3f46; --s6: #5a8f24; --s7: #c2457c;
}