/* ═══════════════════════════════════════════════════════════
   InvoxAI Design Tokens — single source of truth for all pages.
   Load FIRST on every page:  {% static 'ui/tokens.css' %}
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ═══ HPF brand palette (see docs/brand.md). Brand values are used verbatim;
     UI-chrome neutrals + soft status tints are DERIVED from HPF Grey/Silver/
     Orange because a working interface needs more steps than the brand lists.
     Derived values are marked [derived]. ═══ */

  /* ── Base surfaces (neutrals derived from HPF Grey/Silver/White) ─── */
  --background: #f4f5f6;            /* [derived] light cool grey page bg */
  --surface: #ffffff;               /* White (brand) — cards */
  --surface-soft: #ececee;          /* [derived] recessed wells, hovers */
  --foreground: #373c42;            /* HPF Grey (brand) — primary text */
  --muted-foreground: #6b7075;      /* [derived] readable secondary text */
  --faint-foreground: #908f8f;      /* HPF Silver (brand) — placeholders */
  --border: #e3e3e4;                /* [derived] light-silver hairline */
  --border-strong: #cfcfd1;         /* [derived] hovered/active hairline */

  /* ── Brand ─────────────────────────────────────── */
  --primary: #ef8b00;               /* HPF Orange */
  --primary-hover: #973000;         /* Orange Dark */
  --primary-soft: #fdefd9;          /* [derived] light orange tint */
  --primary-foreground: #ffffff;    /* White — text on primary */

  /* ── Verdict palette, mapped onto HPF families (soft = bg, foreground = text) */
  --pass: #315837;                  /* Green Dark (Social & Conservation) */
  --pass-soft: #e4f6eb;             /* [derived] light green */
  --pass-foreground: #223b26;       /* Green Extra Dark */

  --fix: #7c1c52;                   /* Maroon Dark (Science & Education) */
  --fix-soft: #f4deff;              /* Maroon Extra Light (brand) */
  --fix-foreground: #5b0d38;        /* Maroon Extra Dark */

  --review: #9a6700;                /* Amber — warning. NOT an HPF palette colour:
                                       a functional exception (see docs/brand.md) because
                                       HPF orange read the same as the maroon "to
                                       fix" beside it. Amber is unmistakably warning. */
  --review-soft: #faf1da;           /* pale amber */
  --review-foreground: #7a5200;     /* dark amber text on the pale-amber soft */

  --na: #908f8f;                    /* HPF Silver */
  --na-soft: #ececee;               /* [derived] light grey */
  --na-foreground: #373c42;         /* HPF Grey */

  /* ── Severity palette (mapped onto HPF families) ── */
  --sev-block: #7c1c52;   --sev-block-soft: #f4deff;   --sev-block-foreground: #5b0d38;   /* Maroon */
  --sev-warn: #9a6700;    --sev-warn-soft: #faf1da;    --sev-warn-foreground: #7a5200;    /* Amber (functional) */
  --sev-info: #004459;    --sev-info-soft: #cef4ff;    --sev-info-foreground: #003444;    /* Blue (Art & Culture) */
  --sev-suggest: #315837; --sev-suggest-soft: #e4f6eb; --sev-suggest-foreground: #223b26; /* Green */

  /* ── Typography — Avenir (brand). Avenir Next fallback, then system sans.
     Mono is folded into the one family per brand; tabular-nums (below) keeps
     numbers aligned without a separate monospace face. ── */
  --font-sans: 'Avenir', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Avenir', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Shape & depth ─────────────────────────────── */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-paper: 0 1px 2px rgba(55, 60, 66, .05), 0 4px 16px -8px rgba(55, 60, 66, .10);
  --shadow-paper-lg: 0 2px 4px rgba(55, 60, 66, .05), 0 12px 32px -12px rgba(55, 60, 66, .16);
}

/* ── Reset & base ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* tabular numerals everywhere */
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
code, .mono { font-family: var(--font-mono); font-size: .92em; }