/* Design tokens, design.md section 2. This is the only file that names a colour, a font
   or a font size. Every other stylesheet reads these variables; smoke_test.go checks it. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(fonts/plex-sans-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(fonts/plex-sans-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(fonts/plex-mono-400.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  --canvas: #0E0F11;
  --surface: #16181B;
  --surface-2: #1F2226;
  --border: #2A2E33;
  --border-strong: #3B4048;
  --text: #EDEEF0;
  --text-2: #9DA2AA;
  --text-3: #6B7078;
  --accent: #FFFFFF;
  --ok: #57C989;
  --warn: #E8B454;
  --crit: #EF6B6B;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-body: 13px;    --lh-body: 1.45;    /* also the 500 weight row title */
  --fs-small: 11.5px; --lh-small: 1.4;
  --fs-section: 15px; --lh-section: 1.3;
  --fs-page: 18px;    --lh-page: 1.25;
  --fs-stat: 28px;    --lh-stat: 1.1;
  --fs-mono: 12px;    --lh-mono: 1.5;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --radius: 4px;
  --radius-panel: 6px;
  --row-h: 32px;
  --stat-h: 88px;
  --header-h: 40px;
  --tabs-h: 56px; /* the phone tab bar, design.md section 11 */
  --sidebar-w: 220px;
  --sidebar-w-min: 48px;
  --inspector-w: 380px;
  --main-max: 1280px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #FAFAFA;
  --surface: #FFFFFF;
  --surface-2: #F1F2F4;
  --border: #E3E4E8;
  --border-strong: #C6C8CE;
  --text: #191A1C;
  --text-2: #5B5E66;
  --text-3: #8A8E97;
  --accent: #18181B;
  --ok: #1E9E5A;
  --warn: #B87A12;
  --crit: #C93B3B;
  --shadow: 0 8px 24px rgba(25, 26, 28, 0.12);
}

/* design.md section 14 */
:root[data-density="compact"] {
  --row-h: 28px;
  --fs-body: 12.5px;
}