/*
  Design tokens: the colours, type, radii and layout measures of the whole app, in one place (CLAUDE.md, layout).
  Ported from the prototype. Components use these variables only, never a colour of their own.

  Light by default. Dark follows the system unless the root says data-theme="light"; data-theme="dark" forces it.
*/
:root {
  color-scheme: light;

  /* Surfaces and lines */
  --bg: #F1F3F4;
  --surface: #FFFFFF;
  --sunk: #E8ECEE;
  --line: #D3D9DD;
  --line-strong: #B9C2C8;

  /* Text */
  --fg: #172026;
  --muted: #56636C;

  /* Accent and status colours, each with a soft background */
  --accent: #0B5D66;
  --accent-hover: #08484F;
  --accent-ink: #FFFFFF;
  --accent-soft: #D9ECEE;
  --warn: #8A5300;
  --warn-soft: #FBEBCF;
  --bad: #9E2B25;
  --bad-soft: #F8DEDB;
  --ok: #286138;
  --ok-soft: #DDEFE1;
  --info: #2A4C86;
  --info-soft: #DFE7F5;
  --neutral: #4B5760;
  --neutral-soft: #E6EAEC;

  /* The registration plate (same in both themes: a plate is a plate) */
  --plate-bg: #FFFFFF;
  --plate-fg: #111111;
  --plate-red: #C8102E;
  --plate-eu: #1E3A96;
  --plate-eu-fg: #F4D23C;

  /* Paper: invoices and assessment reports shown as documents */
  --paper: #FFFFFF;
  --paper-ink: #1A1A1A;
  --paper-muted: #6B6B6B;
  --paper-line: #DDDDDD;
  --hl: #FFE98A;
  --paper-red: #B3261E;

  --scrim: rgba(14, 22, 27, .45);
  --shadow-sheet: 0 18px 50px rgba(0, 0, 0, .25);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, .2);

  /* Type. The first family of each stack is self-hosted (fonts.css); the rest are the fallbacks. */
  --f-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs-body: 15px;
  --fs-h1: 28px;
  --fs-h1-small: 24px;
  --fs-h2: 19px;
  --fs-h3: 16px;
  --fs-sub: 14px;
  --fs-small: 13px;
  --fs-label: 12px;
  --lh-body: 1.5;

  /* Radii */
  --r: 8px;
  --r-control: 6px;
  --r-card: 10px;
  --r-sheet: 12px;
  --r-pill: 999px;

  /* Layout measures. The breakpoints (860px: the navigation becomes the top bar; 520px: phone) are written in the
     media queries themselves, which cannot read variables. */
  --nav-width: 236px;
  --content-max: 1120px;
  --gutter: 16px;
  --page-gap: 26px;
  --section-gap: 12px;
  --nav-gap: 22px;
  --card-pad-y: 14px;
  --card-pad-x: 16px;

  /* The first column of a row list (a plate, or a pill), one width for every row so the rows line up */
  --row-lead: 128px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12171A;
    --surface: #1A2125;
    --sunk: #222A2F;
    --line: #2E393F;
    --line-strong: #43515A;
    --fg: #E5EAED;
    --muted: #9AA7AF;
    --accent: #55B4BC;
    --accent-hover: #74C6CD;
    --accent-ink: #0A1A1C;
    --accent-soft: #16343A;
    --warn: #E9B455;
    --warn-soft: #3A2C13;
    --bad: #F0897F;
    --bad-soft: #3E201D;
    --ok: #7DC490;
    --ok-soft: #1B3324;
    --info: #93B2EA;
    --info-soft: #1D2A40;
    --neutral: #B3BEC5;
    --neutral-soft: #273036;
    --scrim: rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12171A;
  --surface: #1A2125;
  --sunk: #222A2F;
  --line: #2E393F;
  --line-strong: #43515A;
  --fg: #E5EAED;
  --muted: #9AA7AF;
  --accent: #55B4BC;
  --accent-hover: #74C6CD;
  --accent-ink: #0A1A1C;
  --accent-soft: #16343A;
  --warn: #E9B455;
  --warn-soft: #3A2C13;
  --bad: #F0897F;
  --bad-soft: #3E201D;
  --ok: #7DC490;
  --ok-soft: #1B3324;
  --info: #93B2EA;
  --info-soft: #1D2A40;
  --neutral: #B3BEC5;
  --neutral-soft: #273036;
  --scrim: rgba(0, 0, 0, .6);
}