:root {
  --color-bg: 9 11 15;
  --color-surface: 16 20 27;
  --color-surface-2: 24 29 38;
  --color-border: 255 255 255;
  --color-text: 245 247 251;
  --color-text-muted: 149 160 181;
  --color-primary: 104 145 255;
  --color-accent: 122 255 201;
  --color-success: 85 220 171;
  --color-danger: 251 113 133;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-card: 1.25rem;

  --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.34);
  --shadow-card:
    0 8px 25px rgba(0, 0, 0, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --shadow-glow:
    0 0 0 1px rgba(104, 145, 255, 0.24),
    0 20px 60px rgba(104, 145, 255, 0.2);

  --space-section-sm: clamp(3.75rem, 6vw, 5.75rem);
  --space-section: clamp(5rem, 8vw, 7.5rem);
  --space-section-lg: clamp(6rem, 11vw, 9.5rem);
  --space-gutter: clamp(1.25rem, 2.2vw, 2.2rem);

  --container-max: 1240px;

  --gradient-grid:
    radial-gradient(circle at 25% 10%, rgba(104, 145, 255, 0.18), transparent 40%),
    radial-gradient(circle at 75% 85%, rgba(122, 255, 201, 0.11), transparent 35%);
  --gradient-brand-glow: linear-gradient(
    135deg,
    rgba(104, 145, 255, 0.22) 0%,
    rgba(122, 255, 201, 0.12) 54%,
    rgba(255, 255, 255, 0.02) 100%
  );
  --gradient-hero-mist: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 64%
  );

  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}