/* ── DESIGN TOKENS ─────────────────────────────────────────────────
   Single source of truth for all colours, radii, and shadows.
   Change a value here and it updates everywhere.
──────────────────────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --navy:        #0a1628;
  --navy-mid:    #132040;
  --teal:        #00a79f;
  --teal-rgb:    0, 167, 159;  /* = --teal, for rgba() tints: keep in sync */
  --teal-light:  #00c9b7;
  --teal-bg:     #1a3a35;
  --gold:        #ffa500;
  --gold-bg:     #3a2a1a;

  /* Backgrounds: named by purpose, not colour */
  --bg:          #121212;   /* page background */
  --surface:     #1a1a1a;   /* card / panel surface */
  --surface-mid: #2a2a2a;   /* raised within a card */

  /* Legacy aliases used throughout codebase */
  --white:       #121212;   /* = --bg  (keep for backward compat) */
  --light:       #2a2a2a;   /* = --surface-mid */
  --navy-light:  #2a2a2a;   /* = --surface-mid (form input bg in dynamic fields) */

  /* Text */
  --text:        #e0e0e0;
  --muted:       #a0a8b4;
  --slate:       #b0b8c4;

  /* Borders */
  --border:      #3a3a3a;
  --border-dark: #4a4a4a;

  /* Radii */
  --radius:      4px;
  --radius-md:   6px;
  --radius-lg:   8px;

  /* Shadows */
  --shadow:      0 2px 8px rgba(0,0,0,.5);
  --shadow-lg:   0 4px 20px rgba(0,0,0,.7);

  /* Layout */
  --container:   1100px;
}