:root {
  --kl-blue-900: #062033;
  --kl-blue-800: #08344a;
  --kl-blue-700: #0a4761;
  --kl-blue-600: #00658b;
  --kl-blue-500: #00799a;
  --kl-cyan-500: #00acc4;
  --kl-cyan-400: #00c6d5;
  --kl-cyan-300: #4fe0eb;
  --kl-green-600: #008b00;
  --kl-green-500: #3ecb1f;
  --kl-green-400: #5aff00;

  --kl-ink: #071726;
  --kl-ink-soft: #2c3e4a;
  --kl-gray-900: #101820;
  --kl-gray-700: #46545e;
  --kl-gray-500: #75838c;
  --kl-gray-300: #d7dee2;
  --kl-gray-100: #f3f6f7;
  --kl-white: #ffffff;

  --kl-gradient-brand: linear-gradient(120deg, var(--kl-blue-600) 0%, var(--kl-cyan-400) 55%, var(--kl-green-400) 100%);
  --kl-gradient-text: linear-gradient(100deg, var(--kl-cyan-300) 0%, var(--kl-cyan-400) 50%, var(--kl-green-400) 100%);
  --kl-gradient-dark: radial-gradient(120% 140% at 15% 0%, #0d3a52 0%, #071726 55%, #051119 100%);
  --kl-gradient-cta: linear-gradient(115deg, #052a3d 0%, #0a4761 45%, #0a6b6f 75%, #0a5c1e 100%);

  --kl-shadow-sm: 0 2px 8px rgba(7, 23, 38, 0.06);
  --kl-shadow-md: 0 12px 28px rgba(7, 23, 38, 0.10);
  --kl-shadow-lg: 0 24px 60px rgba(7, 23, 38, 0.16);
  --kl-shadow-glow: 0 0 0 1px rgba(0, 198, 213, 0.25), 0 16px 40px rgba(0, 101, 139, 0.25);

  --kl-radius-sm: 10px;
  --kl-radius-md: 16px;
  --kl-radius-lg: 24px;

  --kl-font-display: "Space Grotesk", "Sora", "Segoe UI", sans-serif;
  --kl-font-body: "Inter", "Segoe UI", sans-serif;

  --kl-ease: cubic-bezier(0.16, 1, 0.3, 1);
}