/* ============================================================================
   GovSpirit design tokens
   ----------------------------------------------------------------------------
   Single source of truth for colour, type, space and motion. No rule outside
   this file should carry a raw hex value or an unexplained pixel figure.

   ── Where the palette comes from ─────────────────────────────────────────
   A bonded excise depot has a real material palette: green glass, brass
   fittings, kraft paperwork, concrete floors. The interface borrows from it
   rather than from the default blue that every dashboard framework ships
   with. Verdigris is the interactive colour, brass is the caution colour, and
   the surfaces are a warm green-grey that sits under both without competing.

   ── The rule the palette follows ─────────────────────────────────────────
   Chrome recedes, data advances. Saturated colour does three jobs and no
   others: it marks a chart series, it flags a status that needs attention,
   and it identifies something interactive. An operator reading a stock
   valuation should be pulled to the figures, never to the furniture.

   Status colours match the paint already on a warehouse floor, so they need
   no legend: green is clear, amber is caution, red is stop. Colour is never
   the only signal; every status also carries a word.

   ── Contrast ─────────────────────────────────────────────────────────────
   Every text pairing is measured against WCAG 2.2 SC 1.4.3 Level AA (4.5:1).
   The ratio beside each value is computed, not estimated, and
   scripts/check-contrast.mjs re-derives all of them from this file on every
   CI run, so a nudged hex cannot quietly invalidate a comment.
   ========================================================================== */

:root {
  /* ── Typography ─────────────────────────────────────────────────────────
     Sizes are in rem so they follow the reader's browser font setting.     */
  --font-sans:
    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem; /* 11px */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.8125rem; /* 13px */
  --text-md: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.0625rem; /* 17px */
  --text-xl: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --text-2xl: clamp(1.3125rem, 1.19rem + 0.62vw, 1.75rem);
  --text-3xl: clamp(1.625rem, 1.3rem + 1.55vw, 2.625rem);

  --leading-tight: 1.18;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.011em;
  --tracking-wide: 0.03em;
  --tracking-caps: 0.07em;

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* The page gutter grows smoothly with the viewport instead of stepping. */
  --gutter: clamp(1rem, 0.62rem + 1.9vw, 2rem);
  --content-max: 1680px;
  --measure: 68ch;

  /* ── Radii ──────────────────────────────────────────────────────────────
     Restrained on purpose. Heavily rounded panels read as consumer software.
     A reporting tool should sit closer to a printed form.                  */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --sidebar-width: 248px;
  --sidebar-rail: 64px;
  --topbar-height: 58px;
  --tap-target: 44px; /* WCAG 2.2 SC 2.5.8 comfortable minimum */

  --z-base: 1;
  --z-sticky: 20;
  --z-topbar: 60;
  --z-scrim: 65;
  --z-sidebar: 70;
  --z-dropdown: 80;
  --z-toast: 90;
  --z-loader: 100;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 110ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --transition: var(--duration-base) var(--ease-out);

  /* ── Chart series ───────────────────────────────────────────────────────
     Eight hues at similar perceived lightness, so no series shouts over
     another, muted enough to survive being printed in a report, and led by
     the depot palette rather than a framework default.                     */
  --series-1: #0f6f62; /* verdigris */
  --series-2: #c07a2c; /* brass */
  --series-3: #4a7fa5; /* slate blue */
  --series-4: #8a5a7d; /* mulberry */
  --series-5: #5c8c4a; /* olive */
  --series-6: #b0563f; /* terracotta */
  --series-7: #6b6f9c; /* pewter blue */
  --series-8: #3f8f88; /* sea green */
}

/* ────────────────────────────────────────────────────────────────────────────
   DARK THEME
   A warm green-grey, not black. Pure black raises halation around small light
   text on an LCD, which matters when the reader is working down a column of
   five-figure valuations.
   ──────────────────────────────────────────────────────────────────────── */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  --surface-page: #111412;
  --surface-chrome: #171b19;
  --surface-card: #1a1f1c;
  --surface-sunken: #151917;
  --surface-raised: #1f2522;
  --surface-field: #131715;
  --surface-hover: #262d29;
  --surface-active: #2f3833;

  /* Ratios measured against --surface-card (#1a1f1c), the lightest surface
     carrying body text, so they hold on every darker surface as well. */
  --ink-strong: #e9efea; /* 14.3:1 */
  --ink: #c8d2cc; /* 10.8:1 */
  --ink-soft: #a6b2ac; /* 7.6:1  */
  --ink-muted: #7f8d87; /* 4.8:1  */
  --ink-inverse: #111412;

  --line: #2a322e;
  --line-strong: #3a443f;
  --focus-ring: #4fd6c4;

  /* One interactive colour. --accent fills, --accent-ink writes: the fill is
     too dark to read at 13px on this surface. */
  --accent: #0f6f62;
  --accent-hover: #138878;
  --accent-ink: #4fd6c4; /* 9.7:1 on --surface-chrome */
  --accent-wash: rgb(79 214 196 / 12%);
  --accent-wash-strong: rgb(79 214 196 / 22%);

  --positive-ink: #5fd08a; /* 8.7:1 */
  --positive-wash: rgb(95 208 138 / 13%);
  --caution-ink: #e8b13a; /* 8.6:1 */
  --caution-wash: rgb(232 177 58 / 14%);
  --critical-ink: #f4737f; /* 6.1:1 */
  --critical-wash: rgb(244 115 127 / 14%);
  --neutral-wash: rgb(166 178 172 / 12%);

  /* Fills for charts and swatches, where the shape carries the meaning and
     the colour does not have to clear a text contrast threshold. */
  --positive-fill: #2f9e6f;
  --caution-fill: #c07a2c;
  --critical-fill: #cf4c5c;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 2px 8px rgb(0 0 0 / 45%);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 55%);
  --shadow-xl: 0 16px 48px rgb(0 0 0 / 60%);

  --scrim: rgb(8 11 10 / 72%);

  /* Read by src/ui/charts.js so Chart.js follows the theme. */
  --chart-grid: #262e2a;
  --chart-axis: #97a49e;
  --chart-tooltip-surface: #1f2522;
  --chart-tooltip-title: #e9efea;
  --chart-tooltip-body: #a6b2ac;
  --chart-tooltip-line: #3a443f;
}

/* ────────────────────────────────────────────────────────────────────────────
   LIGHT THEME
   Warm paper for the page, white for the cards. This is the working mode in a
   depot office and the only one that prints sensibly.
   ──────────────────────────────────────────────────────────────────────── */
[data-theme='light'] {
  color-scheme: light;

  --surface-page: #f2f4f2;
  --surface-chrome: #ffffff;
  --surface-card: #ffffff;
  --surface-sunken: #f5f7f5;
  --surface-raised: #f5f7f5;
  --surface-field: #f3f5f3;
  --surface-hover: #e9efeb;
  --surface-active: #dde7e2;

  /* Ratios measured against #ffffff. */
  --ink-strong: #121614; /* 18.3:1 */
  --ink: #2b322e; /* 13.1:1 */
  --ink-soft: #47524d; /* 8.1:1  */
  --ink-muted: #5c6862; /* 5.8:1  */
  --ink-inverse: #ffffff;

  --line: #dfe5e1;
  --line-strong: #c3ccc7;
  --focus-ring: #0a6b60;

  --accent: #0f6f62;
  --accent-hover: #0b564c;
  --accent-ink: #0a6b60; /* 6.4:1 */
  --accent-wash: rgb(15 111 98 / 8%);
  --accent-wash-strong: rgb(15 111 98 / 15%);

  --positive-ink: #1f7a4d; /* 5.3:1 */
  --positive-wash: rgb(31 122 77 / 10%);
  --caution-ink: #8f5b06; /* 5.7:1 */
  --caution-wash: rgb(143 91 6 / 11%);
  --critical-ink: #bb2233; /* 6.2:1 */
  --critical-wash: rgb(187 34 51 / 9%);
  --neutral-wash: rgb(92 104 98 / 10%);

  --positive-fill: #2f9e6f;
  --caution-fill: #c07a2c;
  --critical-fill: #cf4c5c;

  --shadow-sm: 0 1px 2px rgb(17 20 18 / 6%);
  --shadow-md: 0 2px 8px rgb(17 20 18 / 8%);
  --shadow-lg: 0 8px 24px rgb(17 20 18 / 10%);
  --shadow-xl: 0 16px 48px rgb(17 20 18 / 14%);

  --scrim: rgb(17 20 18 / 40%);

  --chart-grid: #e6ebe8;
  --chart-axis: #5c6862;
  --chart-tooltip-surface: #ffffff;
  --chart-tooltip-title: #121614;
  --chart-tooltip-body: #47524d;
  --chart-tooltip-line: #dfe5e1;
}

/* A first visit with no stored preference follows the operating system. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
  }
}

/* Readers who ask the system for more contrast get firmer lines and brighter
   secondary text rather than being left with low-emphasis greys. */
@media (prefers-contrast: more) {
  :root {
    --ink-muted: var(--ink-soft);
    --line: var(--line-strong);
  }
}