:root {
  --color-brand-black: #000;
  --color-brand-blue: #0020C2;
  --color-brand-blue-dark: #001890;
  --color-brand-blue-light: #1a3ad4;
  --color-surface: #ffffff;
  --color-surface-muted: #f8f9fb;
  --color-border: #333;
  --color-text: #1a1a1a;
  --color-text-muted: #5a5a5a;

  --color-cobalt-rgb: 0, 32, 194;
  --color-violet-rgb: 120, 40, 255;
  --color-magenta-rgb: 255, 40, 120;
  --color-cyan-rgb: 0, 200, 255;
  --color-amber-rgb: 255, 180, 0;

  --gradient-brand: linear-gradient(135deg, #0020C2 0%, #001890 100%);
  --gradient-brand-hover: linear-gradient(135deg, #1a3ad4 0%, #0020C2 100%);
  --gradient-mesh: radial-gradient(ellipse at 20% 50%, rgba(0, 32, 194, 0.08) 0%, transparent 50%),
                   radial-gradient(ellipse at 80% 20%, rgba(0, 0, 0, 0.04) 0%, transparent 50%);

  --gradient-vibrant: linear-gradient(135deg, #0020C2 0%, #7828FF 50%, #FF2878 100%);
  --gradient-vibrant-reverse: linear-gradient(135deg, #FF2878 0%, #7828FF 50%, #0020C2 100%);
  --gradient-warm: linear-gradient(135deg, #0020C2 0%, #00C8FF 100%);
  --gradient-accent: linear-gradient(135deg, #FF2878, #FFB400);
  --gradient-text: linear-gradient(135deg, #0020C2 0%, #7828FF 50%, #FF2878 100%);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.05), 0 20px 40px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 40px rgba(0, 32, 194, 0.35);
  --shadow-glow-strong: 0 0 60px rgba(0, 32, 194, 0.45);
  --shadow-glow-vibrant: 0 0 50px rgba(120, 40, 255, 0.3), 0 0 80px rgba(255, 40, 120, 0.15);
  --shadow-glow-cyan: 0 0 40px rgba(0, 200, 255, 0.3);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 250ms;
  --duration-normal: 350ms;
  --duration-slow: 600ms;
  --duration-very-slow: 1000ms;

  --section-padding: clamp(48px, 8vw, 80px);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --navbar-height: 66px;
}