:root {
  /* Brand palette */
  --yt-red: #ff0000;
  --yt-red-700: #b91c1c;
  --yt-red-600: #e30000;
  --yt-red-500: #ff1a1a;
  --yt-red-400: #ff4d4d;
  --yt-white: #ffffff;
  --yt-black: #0f0f0f;

  /* Secondary blues */
  --blue-800: #012863;
  --blue-700: #013485;
  --blue-500: #226ce0;
  --blue-300: #5fa0ff;

  /* Yellows for medium tag */
  --yellow-700: #a16207;
  --yellow-600: #ca8a04;
  --yellow-500: #eab308;
  --yellow-400: #facc15;
  --yellow-300: #fde047;

  /* Greens for low-competition tag */
  --green-800: #065f46;
  --green-700: #047857;
  --green-600: #059669;
  --green-500: #10b981; /* primary for .tag--green */
  --green-400: #34d399;
  --green-300: #6ee7b7;


  /* Light neutrals */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f6ff;
  --text: #0f1320;
  --muted: #465064;
  --muted-2: #6f7a90;
  --border: rgba(15,19,32,.14);

  /* Glass (more 'glassy') */
  --glass: rgba(255,255,255,0.50);
  --glass-border: rgba(255,255,255,0.35);
  --glass-shadow: 0 18px 60px rgba(12, 24, 60, 0.18);

  /* Shadows */
  --shadow-sm: 0 8px 20px rgba(10,20,40,.10);
  --shadow-md: 0 12px 32px rgba(12,24,60,.14);
  --shadow-lg: 0 26px 90px rgba(12,24,60,.18);

  /* Typography */
  --ff: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fs-hero: clamp(2.6rem, 2.1rem + 2.4vw, 4rem);
  --fs-700: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  --fs-600: clamp(1.06rem, 1rem + .4vw, 1.22rem);
  --fs-500: 1rem;
  --fs-400: .95rem;
  --lh: 1.5;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;

  /* Layout */
  --container: 1180px;
  --gutter: 22px;

  /* Header sizing */
  --header-min-h: 120px;
  --header-pad-y: 24px;
  --header-offset: 16px; /* distance from top when fixed */

  /* Focus */
  --focus: 0 0 0 3px rgba(34,108,224,.35), 0 0 0 6px rgba(34,108,224,.18);
}