/* ── DESIGN TOKENS ─────────────────────────────────────────────────────────
   Single source of truth for colours, type, spacing, and easing.
   Edit here; everything else inherits.
─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --midnight:       #0b1121;
  --midnight-mid:   #121928;
  --midnight-light: #1d2b42;
  --red:            #c0392b;
  --red-muted:      #9b2d22;
  --red-glow:       rgba(192, 57, 43, 0.35);
  --red-subtle:     rgba(192, 57, 43, 0.12);

  /* Text */
  --text:           #e8edf5;
  --text-dim:       rgba(232, 237, 245, 0.55);

  /* Surface */
  --border:         rgba(255, 255, 255, 0.07);

  /* Type */
  --font: 'Helvetica Neue', Arial, sans-serif;

  /* Motion — use only transform + opacity for GPU compositing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
}

/* Light-mode: keep brand dark, never go white */
@media (prefers-color-scheme: light) {
  :root {
    --midnight:     #0d1526;
    --midnight-mid: #111d35;
    --text:         #eef1f8;
    --text-dim:     rgba(238, 241, 248, 0.6);
  }
}