: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;

  --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%);

  --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);

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

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

  --navbar-height: 66px;
}