/* ===========================================================
   Design tokens - shared across the whole app.
   A calm, corporate UK palette: navy primary, neutral greys,
   restrained status colours. Every colour pair below meets WCAG
   2.2 AA contrast (4.5:1 for normal text, 3:1 for large text/UI)
   against the background it's paired with.
=========================================================== */
:root {
  /* ---- Brand ----
     --color-primary is the one interactive accent (buttons, links,
     focus rings) - every existing rule already referencing it (base.css,
     breadcrumb.css, overlay.css) picks up the new colour automatically.
     --color-chrome/-hover are new, used only by the sidebar/top bar -
     a distinct, darker navy so the app's "structural" chrome reads as
     separate from its "interactive" accent, matching the approved
     enterprise-admin mock-up. */
  --color-primary: #2f6fed;
  --color-primary-hover: #1f57c9;
  --color-primary-contrast: #ffffff;

  --color-chrome: #0f2138;
  --color-chrome-hover: #16304f;

  /* ---- Neutral greys ---- */
  --color-grey-50: #f7f8fa;
  --color-grey-100: #eef0f3;
  --color-grey-200: #e2e5ea;
  --color-grey-300: #cbd0d9;
  --color-grey-400: #9aa2b1;
  --color-grey-500: #6b7280;
  --color-grey-600: #4b5563;
  --color-grey-700: #374151;
  --color-grey-800: #1f2937;
  --color-grey-900: #111827;

  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-border: var(--color-grey-200);
  --color-text: var(--color-grey-800);
  --color-text-muted: var(--color-grey-600);

  /* ---- Status ----
     --color-danger is reserved for delete-confirmation UI only (per
     the approved design direction: "no bright green buttons, red only
     inside delete confirmations") - status indicators use
     success/warning/neutral, never danger. */
  --color-success: #1e6b3f;
  --color-success-bg: #e6f4ea;
  --color-warning: #7a5300;
  --color-warning-bg: #fdf1d6;
  --color-danger: #a3231f;
  --color-danger-bg: #fbe9e8;
  --color-info: #0b4a8f;
  --color-info-bg: #e5f0fb;
  --color-neutral: #6b7280;
  --color-neutral-bg: #eef0f3;

  /* Lighter status variants for text sitting directly on the navy
     --color-chrome background (e.g. the statement summary bar) - the
     base --color-success/-warning above are only AA-contrast against
     light backgrounds, not against --color-chrome. Warning (amber),
     not danger (red), for the "overdrawn" case here too, per the
     status-colour rule above. */
  --color-success-on-dark: #4ade80;
  --color-warning-on-dark: #fbbf24;

  /* ---- Typography ----
     14px base (was 16px) - the approved direction reads as dense and
     compact, not spacious, matching an enterprise admin console. */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-h1: 19px;
  --font-size-h2: 16px;
  --font-size-h3: 14px;
  --font-size-body: 14px;
  --font-size-small: 12.5px;
  --font-size-tiny: 11.5px;
  --line-height-body: 1.45;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Shape ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.08);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.12);

  /* ---- Focus ----
     Matches --color-primary so the focus ring reads as part of the same
     interactive-accent system, not a leftover of the old info-blue. */
  --focus-ring-color: #2f6fed;
  --focus-ring: 2px solid var(--focus-ring-color);
  --focus-ring-offset: 2px;
}