:root {
  /* Deep blacks - the foundation */
  --black: #000000;
  --black-rich: #050508;
  --black-soft: #0a0a0f;
  --charcoal: #111118;
  --charcoal-light: #18181f;
  --slate: #1c1c24;
  --slate-light: #252530;

  /* Grays */
  --gray-900: #2a2a35;
  --gray-800: #3a3a48;
  --gray-700: #4a4a5a;
  --gray-600: #6a6a7a;
  --gray-500: #8a8a9a;
  --gray-400: #aaaabc;
  --gray-300: #c5c5d5;
  --gray-200: #e0e0eb;
  --gray-100: #f0f0f5;
  --white: #ffffff;

  /* Amber accent - warm, confident, premium */
  --amber: #f5a623;
  --amber-light: #ffbe4d;
  --amber-glow: rgba(245, 166, 35, 0.15);
  --amber-subtle: rgba(245, 166, 35, 0.08);
  --amber-border: rgba(245, 166, 35, 0.25);

  /* Semantic */
  --bg-primary: var(--black-rich);
  --bg-elevated: var(--charcoal);
  --bg-card: var(--charcoal-light);
  --text-primary: var(--gray-100);
  --text-secondary: var(--gray-400);
  --text-muted: var(--gray-600);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.1);

  /* Gradients */
  --gradient-hero: linear-gradient(180deg, var(--black-rich) 0%, var(--charcoal) 100%);
  --gradient-radial: radial-gradient(ellipse at 50% 0%, var(--amber-subtle) 0%, transparent 60%);
  --gradient-card: linear-gradient(135deg, var(--charcoal-light) 0%, var(--charcoal) 100%);
}