:root {
  /* brand */
  --color-red-900: #7d0003;
  --color-red-800: #9c0004;
  --color-red-600: #ff3300;
  --color-yellow: #ffc326;
  --color-green: #04522c;

  /* neutrals */
  --color-black: #161616;
  --color-white: #ffffff;
  --color-gray-100: #f2f2f2;
  --color-gray-200: #e2e2e2;
  --color-gray-400: #8e8e8e;
  --color-gray-600: #4b4b4b;
  --color-text-grey: #828282;

  /* white alphas */
  --color-white-08: rgba(255, 255, 255, 0.08);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-red-900-85: rgba(125, 0, 3, 0.85);

  /* typography */
  --font-display: "Produkt", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* layout — Figma frame 1440, gutters vary by section */
  --container-max: 1440px;
  --gutter-mobile: 16px;
  --gutter-desktop: 80px;   /* wide content 1280 (hero, network, why, features, formats, footer) */
  --gutter-narrow: 160px;   /* narrow content 1120 (advantages, investments, calculator, steps) */

  /* radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill-sm: 36px;
  --radius-pill-md: 60px;
  --radius-40: 40px;
  --radius-88: 88px;
  --radius-pill: 999px;

  /* shadows */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-lg: 0 8px 32px rgba(22, 22, 22, 0.12);
  --shadow-cta: 0 8px 32px rgba(255, 195, 38, 0.32);
  --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.2);
  --shadow-range-thumb: 2px 4px 16px rgba(22, 22, 22, 0.4);

  /* fluid type (mobile → desktop 1440) */
  --fs-h1: clamp(2rem, 1.25rem + 3.2vw, 3.75rem);      /* 32 → 60 */
  --fs-h2: clamp(1.75rem, 1.1rem + 2.75vw, 3.25rem);    /* 28 → 52 */
  --fs-h3: clamp(1.25rem, 0.95rem + 1.3vw, 2rem);       /* 20 → 32 */
  --fs-h4: clamp(1.125rem, 0.95rem + 0.8vw, 1.5625rem); /* 18 → 25 */
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);    /* 16 → 18 */
  --fs-body-sm: 0.875rem;                                /* 14 */
  --fs-caption: 0.8125rem;                               /* 13 */
}