:root {
  /* Core brand palette */
  --color-black: #000000;
  --color-black-rgb: 0 0 0;
  --color-white: #ffffff;
  --color-white-rgb: 255 255 255;

  --color-brand-deep: #0f172a;
  --color-brand-primary: #1f2a38;
  --color-brand-secondary: #4c5766;
  --color-brand-slate: #334155;
  --color-brand-ice: #b2cfff;
  --color-brand-snow: #f0f4fa;
  --color-brand-mist: #e6ecf8;

  /* Surfaces */
  --color-surface-base: #ffffff;
  --color-surface-soft: #f5f7fa;
  --color-surface-muted: #f9fafc;
  --color-surface-tint: #f2f4f7;
  --color-surface-warm: #f8fafc;
  --color-surface-stone: #f1f1f1;
  --color-surface-night: #0d0d14;
  --color-surface-ink: #1b1b2c;
  --color-surface-void: #0a0d14;
  --color-surface-void-rgb: 10 13 20;
  --color-surface-midnight: #0f192a;

  /* Text and feedback */
  --color-text-contrast: #0b1423;
  --color-text-soft: #f5f8fc;
  --color-text-ice: #f2f5fb;
  --color-text-muted: rgba(28, 36, 48, 0.78);
  --color-text-muted-dark: #1e293b;

  /* Accents */
  --color-accent-amber: #f9b233;
  --color-accent-amber-rgb: 249 178 51;
  --color-accent-amber-dark: #f78c1f;
  --color-accent-amber-dark-rgb: 247 140 31;
  --color-accent-aqua: #00d4ff;
  --color-accent-aqua-rgb: 0 212 255;
  --color-accent-blue: #007bff;
  --color-accent-blue-rgb: 0 123 255;
  --color-accent-royal: #0056d2;
  --color-accent-mint: #5bc0be;
  --color-accent-emerald: #f0ffec;

  /* Gradients */
  --gradient-accent: linear-gradient(
    120deg,
    var(--color-accent-amber),
    var(--color-accent-amber-dark)
  );
  --gradient-section-soft: linear-gradient(
    180deg,
    var(--color-surface-muted) 0%,
    var(--color-surface-base) 100%
  );
  --gradient-card-light: linear-gradient(
    180deg,
    var(--color-surface-base) 0%,
    var(--color-surface-tint) 100%
  );
  --gradient-card-bright: linear-gradient(
    90deg,
    var(--color-accent-aqua),
    var(--color-accent-blue)
  );
  --gradient-card-dark: radial-gradient(
    circle at top left,
    rgba(25, 30, 45, 0.9),
    rgba(10, 14, 25, 0.9)
  );
  --gradient-hero-deep: radial-gradient(
    circle at 30% 20%,
    #101725,
    #05080e 75%
  );
  --gradient-hero-overlay: linear-gradient(
    to top,
    rgba(var(--color-black-rgb), 0.65),
    transparent
  );
  --gradient-footer: radial-gradient(
    100% 150% at 50% 120%,
    var(--color-surface-ink) 60%,
    var(--color-surface-night) 100%
  );
  --gradient-hero-image-overlay: linear-gradient(
    180deg,
    rgba(8, 16, 32, 0.7),
    rgba(5, 10, 18, 0.9)
  );

  /* Overlays */
  --overlay-dark-60: rgba(var(--color-black-rgb), 0.6);
  --overlay-dark-45: rgba(var(--color-black-rgb), 0.45);
  --overlay-dark-35: rgba(var(--color-black-rgb), 0.35);
  --overlay-white-12: rgba(var(--color-white-rgb), 0.12);
  --overlay-white-10: rgba(var(--color-white-rgb), 0.1);
  --overlay-white-08: rgba(var(--color-white-rgb), 0.08);
  --overlay-white-06: rgba(var(--color-white-rgb), 0.06);
  --overlay-white-04: rgba(var(--color-white-rgb), 0.04);
  --overlay-white-05: rgba(var(--color-white-rgb), 0.05);
  --overlay-white-02: rgba(var(--color-white-rgb), 0.02);
  --overlay-dark-06: rgba(var(--color-black-rgb), 0.06);
}