/* IT Solu color tokens. Never pure black text — ink is always navy-tinted.
   Backgrounds alternate light paper-grey and near-black; no mid-greys.
   Orange is the ONLY call-to-action color. Teal is secondary data/markers. */
:root {
  /* Backgrounds */
  --bg-main: #eeeeee;   /* primary page background (paper grey) */
  --bg-card: #eeeeee;   /* card surfaces on light sections */
  --bg-white: #ffffff;  /* alt background / inverted cards */
  --bg-dark: #050505;   /* immersive dark sections (hero, stats, map) */
  --bg-dark-2: #121212; /* dark section variation / footer */
  --bg-navy: #112432;   /* brand navy blocks */

  /* Ink — brand navy at varying opacity */
  --ink-title: #112432;
  --ink-body: rgba(17, 36, 50, 0.80);
  --ink-subtitle: rgba(17, 36, 50, 0.50);
  --ink-disabled: rgba(17, 36, 50, 0.40);
  --ink-invert: #ffffff;
  --ink-invert-muted: rgba(255, 255, 255, 0.60);

  /* Accents — use sparingly */
  --accent-orange: #f05f43;
  --accent-orange-dark: #dd4022;
  --accent-teal: #277793;
  --accent-teal-light: #2d96b2;

  /* Borders — hairline dividers */
  --border-main: rgba(17, 36, 50, 0.10);
  --border-lighter: rgba(17, 36, 50, 0.20);
  --border-invert: rgba(255, 255, 255, 0.20);
  --border-size: max(1px, 0.1rem);

  /* Semantic aliases */
  --surface-page: var(--bg-main);
  --surface-card: var(--bg-card);
  --surface-dark: var(--bg-dark);
  --text-title: var(--ink-title);
  --text-body: var(--ink-body);
  --text-muted: var(--ink-subtitle);
  --text-accent: var(--accent-orange);
  --border-hairline: var(--border-main);
}