:root {
  /* =====================================================
     Just-In-Time Moving — Brand Palette
     ===================================================== */

  /* Color 1 — Blue / Primary */
  --color-1: #00B9E7;
  --color-1-light: #4dd1f5;
  --color-1-lighter: #d6f5fc;
  --color-1-dark: #009abf;
  --color-1-darker: #007999;

  --color-1-transparent-1: rgba(0, 185, 231, 0.08);
  --color-1-transparent-2: rgba(0, 185, 231, 0.16);
  --color-1-transparent-3: rgba(0, 185, 231, 0.30);
  --color-1-transparent: var(--color-1-transparent-2);

  /* Color 2 — Dark Charcoal */
  --color-2: #1a1e24;
  --color-2-light: #64a0d0;
  --color-2-lighter: #d6eaff;
  --color-2-dark: #0f1216;
  --color-2-darker: #080a0d;

  --color-2-transparent-1: rgba(26, 30, 36, 0.08);
  --color-2-transparent-2: rgba(26, 30, 36, 0.16);
  --color-2-transparent-3: rgba(26, 30, 36, 0.30);

  /* Color 3 — Sage / Secondary */
  --color-3: #adb3aa;
  --color-3-light: #c8cdc6;
  --color-3-lighter: #e8eae7;
  --color-3-dark: #8a907e;
  --color-3-darker: #6b7062;

  --color-3-transparent-1: rgba(173, 179, 170, 0.08);
  --color-3-transparent-2: rgba(173, 179, 170, 0.16);
  --color-3-transparent-3: rgba(173, 179, 170, 0.30);

  /* Color 4 — Sage Dark */
  --color-4: #8a907e;
  --color-4-light: #adb3aa;
  --color-4-lighter: #e8eae7;
  --color-4-dark: #6b7062;
  --color-4-darker: #52564b;

  --color-4-transparent-1: rgba(138, 144, 126, 0.08);
  --color-4-transparent-2: rgba(138, 144, 126, 0.16);
  --color-4-transparent-3: rgba(138, 144, 126, 0.30);

  /* =====================================================
     Semantic Aliases — Design System Tokens
     ===================================================== */

  /* Accent (gold) */
  --accent: var(--color-1);
  --accent-light: var(--color-1-light);
  --accent-dark: var(--color-1-dark);
  --accent-glow: var(--color-1-transparent-2);

  /* Dark surfaces */
  --dark: var(--color-2);
  --dark-deep: var(--color-2-dark);
  --dark-deeper: var(--color-2-darker);

  /* Neutral surfaces */
  --color-white: #ffffff;
  --color-off-white: #f7f8f7;
  --color-cream: #f0f2ef;
  --color-border: rgba(26, 30, 36, 0.10);
  --color-border-light: rgba(255, 255, 255, 0.20);
  --color-muted: #8a94a6;
  --color-body-text: #2d3648;
  --color-heading: var(--color-2);

  /* Overlay */
  --overlay-dark: rgba(15, 18, 22, 0.72);
  --overlay-light: rgba(255, 255, 255, 0.80);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15, 18, 22, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 18, 22, 0.08);
  --shadow-lg: 0 8px 32px rgba(15, 18, 22, 0.10);
  --shadow-bloom: 0 4px 24px rgba(13, 134, 255, 0.30);
}