/* ── Colour scheme ────────────────────────────────────────────────────── */
html { color-scheme: light dark; background-color: Canvas; color: CanvasText; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* ── Tokens ──────────────────────────────────────────────────────────────
   light-dark() resolves against the computed color-scheme rather than the OS
   preference, so a future theme toggle needs no second media query. Spacing
   and font-size steps are named by size, not by role. */
:root {
  /* Icons — Lucide (ISC license, lucide.dev), served from /static/icons/ and
     drawn as mask images so a currentColor background recolors them for
     free in either theme, on hover, or per state. */
  --icon-dashboard: url("/static/icons/layout-dashboard.svg");
  --icon-forecast:  url("/static/icons/bar-chart-3.svg");
  --icon-movements: url("/static/icons/arrow-up-down.svg");
  --icon-settings:  url("/static/icons/sliders-horizontal.svg");
  --icon-menu:      url("/static/icons/menu.svg");
  --icon-close:     url("/static/icons/x.svg");
  --icon-search:    url("/static/icons/search.svg");
  --icon-spinner:   url("/static/icons/loader-circle.svg");
  --icon-coffee:    url("/static/icons/coffee.svg");
  --icon-refresh:   url("/static/icons/rotate-ccw.svg");

  /* Colours */
  --bg:       light-dark(#fff,     #121212);
  --border:   light-dark(#999,     #6b6b6b);
  --border-width: 1px;
  --faint:    light-dark(#d5d5d5,  #333);
  --ink:      light-dark(#000,     #eee);
  --muted:    light-dark(#767676,  #a0a0a0);
  --critical: light-dark(#a30000,  #ff9a8a);
  --warning:  light-dark(#7a5900,  #e3bb63);
  --good:     light-dark(#106b10,  #86d29a);
  --neutral:  light-dark(#767676,  #a0a0a0);

  /* Spacing */
  --space-xsmall: 4px;
  --space-small: 8px;
  --space-regular: 12px;
  --space-medium: 16px;
  --space-large: 24px;
  --space-xlarge: 32px;
  --space-huge: 48px;

  /* Font sizes, named by size like the spacing scale above — not by role. */
  --fs-xsmall: calc(var(--lh-xsmall) * .75);
  --lh-xsmall: var(--space-small);

  --fs-small: calc(var(--lh-small) * .75);
  --lh-small: var(--space-regular);
  
  --fs-regular: calc(var(--lh-regular) * .75);
  --lh-regular: var(--space-medium);
  
  --fs-medium: calc(var(--lh-medium) * .75);
  --lh-medium: var(--space-large);
  
  --fs-large: calc(var(--lh-large) * .75);
  --lh-large: var(--space-xlarge);
  
  --fs-xlarge: calc(var(--lh-xlarge) * .75);
  --fs-huge: calc(var(--lh-huge) * .75);


  /* Sizing & motion — one-off named constants, each a single quantity, not
     a scale rung. */
  --rail: 50px;          /* 12px padding + a 24px icon + the sidebar's own border */
  --control-size: 48px;  /* the button box: 12px pad + 22px line + 1px border × 2 */
  --touch-target: 44px;  /* comfortable touch target, Touch media block */
  --tap-min: 24px;       /* WCAG AA floor for controls that stay dense on touch */
  --duration-slow: 900ms;

  /* Breakpoint: 47.5em, used in responsive.css's `@media (width >= 47.5em)`.
     Cannot be expressed as a custom property (var() isn't valid inside an
     @media feature value). It is duplicated of necessity in app.js as
     `matchMedia('(width >= 47.5em)')` (search "47.5em" in both files if this
     ever changes). */
}