/* Design tokens — the single source of truth for spacing, type, radius,
   elevation, colour and motion across every page in this app.

   Derived from SAAS_UI_UX_DESIGN_STANDARD.md. Where this file deviates from
   that document, the deviation is stated in a comment with its reason; the
   standard is written for a marketing site, and two of its rules (16px minimum
   body text, 44px minimum control height) trade directly against information
   density in an operational console. Those are resolved per-context rather than
   ignored — see the notes on --font-size-body and --control-h.

   Nothing outside this file should contain a raw hex colour, a pixel radius, or
   a magic spacing number. */

:root {
  /* ---------- SPACING: 8px system, 4px for small adjustments ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ---------- RADIUS: exactly three, per the standard ----------
     Anything that isn't a control, a container, or a pill is using the wrong
     one. The two consoles previously disagreed (8/9px controls, 12/14px cards);
     these values win everywhere now. */
  --radius-control: 10px;   /* input, button, small control */
  --radius-card: 14px;      /* card, dropdown, menu, modal */
  --radius-pill: 999px;     /* pill, badge, tag */

  /* ---------- ELEVATION: exactly three levels ----------
     Elevation, not decoration: level 1 separates a card from the page, 2 lifts
     a transient surface, 3 is reserved for modals. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-2: 0 8px 20px rgba(0, 0, 0, .40);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .50);

  /* ---------- COLOUR ----------
     One brand colour (--accent) plus one supporting hue (--accent2) for links
     and the secondary chart series. Status colours have exactly one meaning
     each and are never reused as "another series colour".

     Contrast against --bg, computed (WCAG 2.x relative luminance):
       --text    #e8eef8  16.5:1   body text
       --muted   #93a4c0   7.4:1   secondary text — passes 4.5:1 for normal text
       --accent  #38e0a5  11.0:1   primary actions, success
       --accent2 #3b82f6   5.1:1   links, secondary series
       --danger  #ef6a7f   6.3:1   errors
       --warn    #f0b866   9.9:1   warnings
     All clear the 4.5:1 normal-text floor, so none of them depends on being
     "large text" to be legible. */
  --bg: #0b1120;            /* page background */
  --panel: #131c30;         /* raised surface: cards, modals */
  --panel2: #0e1626;        /* recessed surface: header, sidebar, inputs' well */
  --field: #0c1526;         /* input/textarea/select background */
  --line: #22304d;          /* standard 1px border and divider */
  --text: #e8eef8;          /* primary text */
  --muted: #93a4c0;         /* secondary text, axis labels, help text */
  --accent: #38e0a5;        /* brand / primary action / success */
  --accent2: #3b82f6;       /* links, secondary data series */
  --danger: #ef6a7f;        /* error only */
  --warn: #f0b866;          /* warning only */
  --on-accent: #04120b;     /* text on a filled --accent surface */
  --accent-soft: #12261f;   /* tinted success/brand background */
  --accent-soft-line: #1c4a38;
  --danger-soft-line: #5a2530;
  --focus: #6aa6ff;         /* focus ring — brighter than --accent2 so it is
                               visible against both --panel and --accent */

  /* ---------- TYPE ----------
     One family everywhere (system stack — zero network cost, and the standard
     permits any single sans-serif). Weights limited to the four the standard
     names; nothing thinner than 400. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  --weight-body: 400;
  --weight-label: 500;
  --weight-strong: 600;
  --weight-heading: 700;

  /* Console type scale. The standard's 16px body-text floor is written for
     marketing pages, where a paragraph is the content. These two consoles are
     dense operational tools whose primary content is tabular, and 16px table
     text forces horizontal scrolling on exactly the screens the standard is
     trying to protect. So: 15px base here, 16px on the marketing pages
     (marketing.css), and — non-negotiable, because it is a functional bug
     rather than a matter of taste — 16px on every text input at mobile widths,
     since iOS Safari auto-zooms any focused field below that. See base.css. */
  --font-size-caption: 12px;
  --font-size-label: 13px;
  --font-size-body: 15px;
  --font-size-lg: 17px;
  --font-size-h3: 20px;
  --font-size-h2: 24px;
  --font-size-h1: 30px;

  --leading-tight: 1.25;
  --leading-heading: 1.3;
  --leading-body: 1.55;

  /* ---------- CONTROL SIZING ----------
     --control-h is the standard's 44px target, used for every primary control.
     --control-h-sm is the dense variant for toolbars and in-table actions; it
     drops below 44px only on fine-pointer devices, and base.css raises it back
     to 44px under `@media (pointer: coarse)` so no touch target is ever
     undersized. */
  --control-h: 44px;
  --control-h-sm: 34px;

  /* ---------- LAYOUT ---------- */
  --container: 1120px;      /* centred max-width for marketing/portal content */
  --measure: 68ch;          /* ~60-75 characters per line for prose */

  /* ---------- MOTION ----------
     One duration and one easing, both inside the standard's 150-220ms window.
     base.css collapses these to 0 under prefers-reduced-motion. */
  --motion-fast: 150ms;
  --motion: 200ms;
  --ease: cubic-bezier(.2, 0, .2, 1);
}