/*
  Enquirer Atlas design variables, v1, 8 Nov 2026.
  One source of truth for enquirerconsulting.com, Enquirer OS, prospect pages and maps, and desk pages.
  Built on TypeUI Atlas (square shells, hairline borders, no resting shadows, Inter, one content surface,
  brand on hero and footer only). ECG navy replaces Atlas indigo. Every colour pair is checked by
  contrast_check.py; see CONTRAST.md. Never hardcode a value a token covers; derive with calc().
*/

:root {
  /* ---------- Colour: brand ---------- */
  --brand: #0E2747;            /* ECG navy. Primary buttons, links, hero and footer surface. */
  --brand-hover: #16365F;      /* Button hover, pressed state is --brand-active. */
  --brand-active: #0A1B33;
  --brand-signal: #1D4ED8;     /* Interaction only: focus ring, link hover, active nav marker, chart series 2. Never a fill. */
  --brand-soft: #E8EEF7;       /* Selected / active background (tabs, sidebar active, chosen option). */
  --fg-on-brand: #FFFFFF;
  --fg-on-brand-muted: #B9C6D9;

  /* ---------- Colour: neutral surfaces ---------- */
  --bg-surface: #FFFFFF;       /* The one content surface. Cards match it; borders separate. */
  --bg-subtle: #F6F8FB;        /* App canvas behind white panels, table header row, code. Never a marketing section fill. */
  --bg-hover: #F1F4F9;         /* The ONE hover tint for every link surface: nav, sidebar, menu rows, table rows, selected rows. */
  --bg-overlay: rgba(10, 22, 40, 0.48); /* Modal scrim. */
  --bg-glass: rgba(255, 255, 255, 0.82); /* Sticky navbar; always with backdrop blur. */

  /* ---------- Colour: text ---------- */
  --fg-heading: #0A1628;
  --fg-body: #334155;
  --fg-muted: #526075;
  --fg-disabled: #8592A6;      /* Large text or with a second cue only. */
  --fg-brand: #0E2747;         /* Links: always underlined in running text. */
  --fg-brand-hover: #1D4ED8;

  /* ---------- Colour: borders ---------- */
  --border-default: #E3E8F0;   /* Hairline: cards, dividers, section rules, table rows. Decorative, never the only edge of a control. */
  --border-control: #8592A6;   /* Inputs, selects, checkboxes, radios, toggles: 3.15:1 on white. */
  --border-strong: #64748B;    /* Hover edge on controls, outline button edge. */
  --focus-ring: #1D4ED8;       /* 2px ring, 2px offset; white ring on brand fills. */

  /* ---------- Colour: status (Dan's five, 8 Oct 2026; good and unknown darkened for 4.5:1) ---------- */
  --status-good: #0C7A72;      --status-good-bg: #E4F5F3;      --status-good-border: #A8DCD5;
  --status-warn: #9A6206;      --status-warn-bg: #FBF0DC;      --status-warn-border: #EBCB91;
  --status-bad: #A32B25;       --status-bad-bg: #FBE8E7;       --status-bad-border: #EBB2AE;
  --status-progress: #3C5878;  --status-progress-bg: #E8EEF6;  --status-progress-border: #B8C7DB;
  --status-unknown: #5E6B7D;   --status-unknown-bg: #EFF2F6;   --status-unknown-border: #C6CEDA;
  /* A status is never colour alone: it always carries its word (Good, Slipping, Blocked, In progress, Not checked) and an icon. */

  /* ---------- Colour: data visualisation (ordered; pair with marker shape or dash when more than 2 series) ---------- */
  --chart-1: #0E2747;
  --chart-2: #1D4ED8;
  --chart-3: #0C7A72;
  --chart-4: #9A6206;
  --chart-5: #64748B;
  --chart-6: #A32B25;
  --chart-grid: #E3E8F0;
  --chart-axis: #526075;

  /* ---------- Typography ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-feature: "cv11", "ss01", "ss03";   /* Inter: single-storey a off, open digits, straight-sided 1 */
  --font-numeric: tabular-nums;            /* every table, KPI and money figure */

  --font-size-xs: 12px;   --line-xs: 16px;
  --font-size-sm: 14px;   --line-sm: 20px;   /* control and app body baseline */
  --font-size-base: 16px; --line-base: 24px; /* marketing body */
  --font-size-lg: 18px;   --line-lg: 28px;
  --font-size-xl: 20px;   --line-xl: 28px;   /* card titles, hero lead */
  --font-size-2xl: 24px;  --line-2xl: 32px;  /* app page title */
  --font-size-3xl: 30px;  --line-3xl: 38px;
  --font-size-4xl: 36px;  --line-4xl: 44px;  /* marketing section heading */
  --font-size-5xl: 48px;  --line-5xl: 56px;
  --font-size-6xl: 60px;  --line-6xl: 66px;
  --font-size-7xl: 72px;  --line-7xl: 78px;  /* hero h1 minimum on desktop */
  --font-size-8xl: 84px;  --line-8xl: 88px;

  --tracking-display: -0.025em;  /* 48px and up */
  --tracking-heading: -0.015em;  /* 24px to 36px */
  --tracking-body: 0;
  --tracking-eyebrow: 0.06em;    /* 12px uppercase eyebrows only */

  --weight-regular: 400;
  --weight-medium: 500;   /* labels, buttons, nav */
  --weight-semibold: 600; /* headings */
  --weight-bold: 700;     /* hero display only */

  --measure: 68ch;        /* running text max line length */

  /* ---------- Spacing (4px base) ---------- */
  --space-0: 0;    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-13: 52px; /* mockup to copy gap */
  --space-16: 64px; /* section header to content */
  --space-20: 80px; --space-24: 96px; --space-32: 128px;

  /* ---------- Radius: square shells, round only where the control is round ---------- */
  --radius-none: 0;
  --radius-xxl: 0;        /* every shell: buttons, inputs, cards, modals, menus, alerts, tabs, tables, tooltips, badges */
  --radius-full: 999px;   /* toggle track, avatar, radio, range thumb, status dot */

  /* ---------- Elevation: flat at rest; overlays only ---------- */
  --elevation-none: none;
  --elevation-menu: 0 2px 6px rgba(10, 22, 40, 0.08), 0 12px 28px rgba(10, 22, 40, 0.12);   /* dropdowns, popovers, command palette */
  --elevation-modal: 0 24px 64px rgba(10, 22, 40, 0.24);                                    /* modals and drawers */
  --elevation-toast: 0 8px 24px rgba(10, 22, 40, 0.16);

  /* ---------- Layout ---------- */
  --container: 1280px;
  --gutter: 24px;               /* 16px under 640px */
  --section-pad: 96px;          /* top and bottom equal; 64px under 1024px, 48px under 640px */
  --header-max: 768px;
  --hero-h1-max: 1024px;
  --app-sidebar: 256px;
  --app-sidebar-collapsed: 64px;
  --app-topbar: 56px;
  --app-grid-gap: 16px;
  --row-height: 44px;           /* table row; 36px dense */
  --control-height: 40px;       /* 32px small, 48px large */
  --target-min: 44px;           /* touch targets on coarse pointers */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
}

/* Dark theme: Enquirer OS and desk pages. Marketing site stays light. */
[data-theme="dark"], .theme-dark {
  --brand: #8DB4FF;
  --brand-hover: #A9C6FF;
  --brand-active: #7AA6F7;
  --brand-signal: #8DB4FF;
  --brand-soft: #16233A;
  --fg-on-brand: #0B1220;
  --fg-on-brand-muted: #233452;

  --bg-surface: #0B1220;
  --bg-subtle: #0E1626;
  --bg-raised: #111A2B;
  --bg-hover: #152036;
  --bg-overlay: rgba(2, 6, 14, 0.64);
  --bg-glass: rgba(11, 18, 32, 0.80);

  --fg-heading: #F5F7FB;
  --fg-body: #C7D0DD;
  --fg-muted: #93A1B5;
  --fg-disabled: #56657C;
  --fg-brand: #8DB4FF;
  --fg-brand-hover: #A9C6FF;

  --border-default: #1E2A3F;
  --border-control: #56657C;
  --border-strong: #6E7E96;
  --focus-ring: #8DB4FF;

  --status-good: #5FD3C4;     --status-good-bg: #0E2A28;     --status-good-border: #1F5A54;
  --status-warn: #F2B660;     --status-warn-bg: #2E220C;     --status-warn-border: #6A4A14;
  --status-bad: #FF8F87;      --status-bad-bg: #331413;      --status-bad-border: #6E2A26;
  --status-progress: #9DB6D6; --status-progress-bg: #142033; --status-progress-border: #2F4566;
  --status-unknown: #A3B0C2;  --status-unknown-bg: #161E2C;  --status-unknown-border: #344157;

  --chart-1: #8DB4FF; --chart-2: #5FD3C4; --chart-3: #F2B660; --chart-4: #C7D0DD; --chart-5: #FF8F87; --chart-6: #6E7E96;
  --chart-grid: #1E2A3F; --chart-axis: #93A1B5;

  --elevation-menu: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.5);
  --elevation-modal: 0 24px 64px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}