:root {
  --kl-color-grey-950: #04040d;
  --kl-color-grey-900: #0b0b18;
  --kl-color-grey-800: #11111d;
  --kl-color-grey-700: #191924;
  --kl-color-grey-600: #22222b;
  --kl-color-grey-500: #353541;
  --kl-color-grey-400: #444450;
  --kl-color-grey-300: #5c5c6a;
  --kl-color-grey-200: #848494;
  --kl-color-grey-100: #c0c0c8;
  --kl-color-grey-50: #ececee;

  --kl-color-red-950: #640302;
  --kl-color-red-900: #920502;
  --kl-color-red-800: #c40603;
  --kl-color-red-700: #e90501;
  --kl-color-red-600: #fd2926;
  --kl-color-red-500: #fc4845;
  --kl-color-red-400: #ff6865;
  --kl-color-red-300: #ff9f9e;
  --kl-color-red-200: #ffc8c7;
  --kl-color-red-100: #ffe0e0;
  --kl-color-red-50: #fff0f0;

  --kl-color-blue-400: #74cafc;
  --kl-color-white: #ffffff;
  --kl-color-app-bg: #f9f9f9;

  --kl-color-surface-0: var(--kl-color-grey-950);
  --kl-color-surface-1: var(--kl-color-grey-900);
  --kl-color-surface-2: #fdfdfe;
  --kl-color-surface-3: #f1f1f4;

  --kl-color-text-primary: var(--kl-color-grey-900);
  --kl-color-text-secondary: var(--kl-color-grey-300);
  --kl-color-text-inverse: var(--kl-color-grey-50);
  --kl-color-link: var(--kl-color-red-600);
  --kl-color-link-hover: var(--kl-color-red-500);

  --kl-color-border-subtle: rgba(17, 17, 29, 0.12);
  --kl-color-border-strong: rgba(17, 17, 29, 0.2);
  --kl-color-ring: rgba(116, 202, 252, 0.6);

  --kl-font-heading: "Mikro", "Space Grotesk", "Avenir Next", "Helvetica Neue", sans-serif;
  --kl-font-body: "Inter", "Space Grotesk", "Avenir Next", "Helvetica Neue", sans-serif;
  --kl-font-eyebrow: "VT323", "Courier New", monospace;

  --kl-text-6xl: 2.5rem;
  --kl-text-5xl: 2.25rem;
  --kl-text-4xl: 2rem;
  --kl-text-3xl: 1.75rem;
  --kl-text-2xl: 1.5rem;
  --kl-text-xl: 1.25rem;
  --kl-text-lg: 1.125rem;
  --kl-text-base: 1rem;
  --kl-text-sm: 0.875rem;
  --kl-text-xs: 0.75rem;

  --kl-leading-6xl: 3rem;
  --kl-leading-5xl: 2.75rem;
  --kl-leading-4xl: 2.5rem;
  --kl-leading-3xl: 2.25rem;
  --kl-leading-2xl: 1.75rem;
  --kl-leading-xl: 1.625rem;
  --kl-leading-lg: 1.5rem;
  --kl-leading-base: 1.5rem;
  --kl-leading-sm: 1.25rem;
  --kl-leading-xs: 1.25rem;

  --kl-tracking-heading: 0.0825rem;
  --kl-tracking-body: -0.01em;
  --kl-tracking-eyebrow: 0.145em;

  --kl-space-1: 0.25rem;
  --kl-space-2: 0.5rem;
  --kl-space-3: 0.75rem;
  --kl-space-4: 1rem;
  --kl-space-5: 1.25rem;
  --kl-space-6: 1.5rem;
  --kl-space-8: 2rem;
  --kl-space-10: 2.5rem;

  --kl-radius-sm: 0.5rem;
  --kl-radius-md: 0.625rem;
  --kl-radius-lg: 0.875rem;
  --kl-radius-xl: 1.25rem;

  --kl-shadow-soft: 0 1px 1px rgba(17, 17, 29, 0.08), 0 3px 10px -3px rgba(15, 12, 12, 0.16);
  --kl-shadow-card: 0 10px 20px rgba(15, 12, 12, 0.05), 0 3px 1px -2px rgba(15, 12, 12, 0.09), 0 2px 3px 1px rgba(15, 12, 12, 0.05);
  --kl-shadow-dark: 0 18px 40px rgba(0, 0, 0, 0.45);

  --kl-motion-fast: 120ms;
  --kl-motion-base: 220ms;
  --kl-motion-slow: 360ms;

  --kl-shader-back: #301c2a;
  --kl-shader-front: #5673ae;
  --kl-shader-shape: warp;
  --kl-shader-type: 2x2;
  --kl-shader-pixel-size: 2;
  --kl-shader-speed: 0.6;
  --kl-shader-scale: 1.64;
  --kl-shader-rotation: 76;
  --kl-shader-width: 1280;
  --kl-shader-height: 720;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kl-motion-fast: 0ms;
    --kl-motion-base: 0ms;
    --kl-motion-slow: 0ms;
  }
}