:root {
  --color-brand-black: #000;
  --color-brand-blue: #007bff;
  --color-brand-blue-dark: #0056d6;
  --color-surface: #ffffff;
  --color-surface-muted: #f8f9fb;
  --color-border: #333;
  --color-text: #1a1a1a;
  --color-text-muted: #5a5a5a;

  --gradient-brand: linear-gradient(135deg, #007bff 0%, #0056d6 100%);
  --gradient-brand-hover: linear-gradient(135deg, #1a8cff 0%, #0066ee 100%);
  --gradient-mesh: radial-gradient(ellipse at 20% 50%, rgba(0, 123, 255, 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, 123, 255, 0.15);
  --shadow-glow-strong: 0 0 60px rgba(0, 123, 255, 0.25);

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