:root {
  /* Blues — Abyssal is the brand primary, Signal Blue the interactive support */
  --atl-blue-900: #0B2F4A;
  --atl-blue-800: #103E61;
  --atl-blue-700: #14507A;
  --atl-blue-500: #1E6CA8;
  --atl-blue-300: #5D9FD1;
  --atl-blue-100: #9CC3E0;
  --atl-blue-050: #E4EFF7;

  /* Copper — the signature. A punctuation mark, never a field. */
  --atl-copper-700: #96502C;
  --atl-copper-600: #B86438;
  --atl-copper-500: #E08A5A;
  --atl-copper-300: #EDB694;
  --atl-copper-100: #F9E4D8;

  /* Neutrals — warm, paper-based */
  --atl-ink: #1A1814;
  --atl-stone-600: #6B6459;
  --atl-stone-500: #9A9287;
  --atl-stone-300: #C7C0B4;
  --atl-linen: #E8E2D6;
  --atl-paper: #F5F2ED;
  --atl-white: #FFFFFF;

  /* Status — network states. Muted to sit beside copper without fighting it. */
  --atl-green-600: #2E7D5B;
  --atl-green-100: #DFEFE7;
  --atl-amber-600: #C9821F;
  --atl-amber-100: #FBEED8;
  --atl-red-600: #B3392F;
  --atl-red-100: #F8E3E1;

  /* ---- Semantic aliases: use these in components ---- */
  --atl-surface-page: var(--atl-paper);
  --atl-surface-card: var(--atl-white);
  --atl-surface-sunken: var(--atl-linen);
  --atl-surface-inverse: var(--atl-blue-900);
  --atl-surface-inverse-alt: var(--atl-ink);

  --atl-text-body: var(--atl-ink);
  --atl-text-heading: var(--atl-blue-900);
  --atl-text-muted: var(--atl-stone-600);
  --atl-text-faint: var(--atl-stone-500);
  --atl-text-on-inverse: var(--atl-paper);
  --atl-text-on-inverse-muted: var(--atl-blue-100);
  --atl-text-link: var(--atl-blue-500);
  --atl-text-link-hover: var(--atl-blue-900);

  --atl-border: var(--atl-linen);
  --atl-border-strong: var(--atl-stone-300);
  --atl-border-focus: var(--atl-blue-500);

  --atl-accent: var(--atl-copper-500);
  --atl-accent-press: var(--atl-copper-600);
  --atl-accent-ink: var(--atl-blue-900);

  --atl-status-ok: var(--atl-green-600);
  --atl-status-ok-bg: var(--atl-green-100);
  --atl-status-warn: var(--atl-amber-600);
  --atl-status-warn-bg: var(--atl-amber-100);
  --atl-status-down: var(--atl-red-600);
  --atl-status-down-bg: var(--atl-red-100);
}

/* Dark surfaces: opt in by scoping. Copper stays copper — it is the one colour
   that never changes between light and dark. */
[data-atl-theme="inverse"] {
  --atl-surface-page: var(--atl-blue-900);
  --atl-surface-card: var(--atl-blue-800);
  --atl-surface-sunken: #082439;
  --atl-text-body: var(--atl-paper);
  --atl-text-heading: var(--atl-white);
  --atl-text-muted: var(--atl-blue-100);
  --atl-text-faint: var(--atl-blue-300);
  --atl-text-link: var(--atl-blue-100);
  --atl-text-link-hover: var(--atl-white);
  --atl-border: rgba(156, 195, 224, 0.22);
  --atl-border-strong: rgba(156, 195, 224, 0.42);
}