/* variables.css — KKF design tokens */
:root {
  /* Brand palette: sky blue, black, white */
  --kkf-sky: #33A8F5;
  --kkf-sky-dark: #1A87D1;
  --kkf-sky-light: #7FC9FA;
  --kkf-sky-tint: #EAF6FE;
  --kkf-black: #0B0D10;
  --kkf-ink: #14181D;
  --kkf-grey-900: #22282F;
  --kkf-grey-600: #5A646F;
  --kkf-grey-400: #9AA4AF;
  --kkf-grey-200: #E4E9ED;
  --kkf-grey-100: #F3F6F8;
  --kkf-white: #FFFFFF;

  /* Semantic */
  --bg: var(--kkf-white);
  --bg-alt: var(--kkf-grey-100);
  --fg: var(--kkf-ink);
  --fg-muted: var(--kkf-grey-600);
  --accent: var(--kkf-sky);
  --border: var(--kkf-grey-200);

  /* Type */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-hero: clamp(2.4rem, 6vw, 4.6rem);
  --fs-h1: clamp(2rem, 4.6vw, 3.2rem);
  --fs-h2: clamp(1.6rem, 3.2vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.4rem);
  --fs-body: clamp(1rem, 1.1vw, 1.06rem);
  --tracking-wide: .14em;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 26px;

  /* Effects */
  --shadow-sm: 0 2px 10px rgba(11, 13, 16, .06);
  --shadow: 0 18px 40px -22px rgba(11, 13, 16, .35);
  --shadow-lg: 0 40px 80px -40px rgba(26, 135, 209, .55);
  --gradient-sky: linear-gradient(135deg, var(--kkf-sky) 0%, var(--kkf-sky-dark) 100%);
  --gradient-ink: linear-gradient(160deg, #0B0D10 0%, #14202B 60%, #0B0D10 100%);
  --transition: 220ms cubic-bezier(.4, 0, .2, 1);
  --header-h: 76px;
}