:root {
  /* Fonts */
  --font-family-base: "Golos Text", Arial, Helvetica, sans-serif;

  --font-size-h1: 42px;
  --font-size-h2: 36px;
  --font-size-h3: 32px;
  --font-size-h4: 25px;
  --font-size-h5: 20px;
  --font-size-h6: 18px;
  --font-size-p: 16px;
  --font-size-small: 14px;
  --font-size-button: 14px;
  --font-size-caption: 12px;
  --font-size-micro: 10px;
  --font-size-nav: 13px;

  --line-height-h1: 1.05;
  --line-height-h2: 1.08;
  --line-height-h3: 1.12;
  --line-height-h4: 1.16;
  --line-height-h5: 1.25;
  --line-height-h6: 1.3;
  --line-height-p: 1.5;
  --line-height-small: 1.45;
  --line-height-button: 1;
  --line-height-caption: 1.2;
  --line-height-micro: 1.15;
  --line-height-nav: 1.2;

  --font-h1: 600 var(--font-size-h1) / var(--line-height-h1)
    var(--font-family-base);
  --font-h2: 600 var(--font-size-h2) / var(--line-height-h2)
    var(--font-family-base);
  --font-h3: 600 var(--font-size-h3) / var(--line-height-h3)
    var(--font-family-base);
  --font-h4: 600 var(--font-size-h4) / var(--line-height-h4)
    var(--font-family-base);
  --font-h5: 600 var(--font-size-h5) / var(--line-height-h5)
    var(--font-family-base);
  --font-h5-m: 500 var(--font-size-h5) / var(--line-height-h5)
    var(--font-family-base);
  --font-h6-sm: 600 var(--font-size-h6) / var(--line-height-h6)
    var(--font-family-base);
  --font-h6-m: 500 var(--font-size-h6) / var(--line-height-h6)
    var(--font-family-base);
  --font-h6: 400 var(--font-size-h6) / var(--line-height-h6)
    var(--font-family-base);
  --font-p-sm: 600 var(--font-size-p) / var(--line-height-p)
    var(--font-family-base);
  --font-p: 400 var(--font-size-p) / var(--line-height-p)
    var(--font-family-base);
  --font-small: 400 var(--font-size-small) / var(--line-height-small)
    var(--font-family-base);

  /* Extra reusable UI fonts */
  --font-small-m: 500 var(--font-size-small) / var(--line-height-small)
    var(--font-family-base);
  --font-small-sm: 600 var(--font-size-small) / var(--line-height-small)
    var(--font-family-base);
  --font-button: 600 var(--font-size-button) / var(--line-height-button)
    var(--font-family-base);
  --font-caption: 500 var(--font-size-caption) / var(--line-height-caption)
    var(--font-family-base);
  --font-micro-m: 500 var(--font-size-micro) / var(--line-height-micro)
    var(--font-family-base);
  --font-nav: 500 var(--font-size-nav) / var(--line-height-nav)
    var(--font-family-base);
  --font-ui-kit-lead: var(--font-p);

  /* Brand */
  --page-color-primary: #005691;
  --page-color-primary-hover: #d91569;
  --page-color-primary-active: #bd1058;
  --page-color-secondary: #005fa8;
  --page-color-secondary-hover: #0a4f87;
  --page-color-accent: #ec1976;
  --page-color-accent-hover: #d91569;
  --page-color-accent-active: #bd1058;
  --page-color-secondary-soft: #dcecf8;
  --page-color-accent-soft: #fde6f0;

  --color-primary: var(--page-color-primary);
  --color-primary-hover: var(--page-color-primary-hover);
  --color-primary-active: var(--page-color-primary-active);
  --color-secondary: var(--page-color-secondary);
  --color-secondary-hover: var(--page-color-secondary-hover);
  --color-accent: var(--page-color-accent);
  --color-accent-hover: var(--page-color-accent-hover);
  --color-accent-active: var(--page-color-accent-active);
  --color-secondary-soft: var(--page-color-secondary-soft);
  --color-accent-soft: var(--page-color-accent-soft);

  /* RemoVax Accord */
  --accord-color-band: #7c173d;
  --accord-color-band-deep: #5c0e2c;
  --accord-color-accent: #df1c70;
  --accord-color-accent-soft: #ffe0ee;
  --accord-color-plate: #ffe0ee;
  --accord-color-card: #fff8fb;
  --accord-color-link: #005691;
  --accord-color-link-deep: #082f49;
  --accord-color-signal: #d8eef7;
  --accord-color-border: rgba(124, 23, 61, 0.14);
  --accord-color-inverse-border: rgba(255, 255, 255, 0.16);
  --accord-shadow-soft: 0 30px 80px rgba(92, 14, 44, 0.16);

  /* Text */
  --color-text: #3a3a3a;
  --color-text-strong: #1f2b38;
  --color-text-muted: #6f7a86;
  --color-text-inverse: #ffffff;

  /* Surfaces */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-bg: #f5f7fa;
  --color-bg-alt: #eef4f8;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-border: #d6dee7;
  --color-border-strong: #b4c1ce;
  --color-overlay: rgba(18, 33, 52, 0.42);

  /* States */
  --color-error: #d94b4b;
  --color-success: #2e9d62;

  /* Layout */
  --grid-step: 2px;
  --container-width: 1200px;
  --container-narrow: 960px;
  --container-padding: calc(var(--grid-step) * 8);
  --section-space: calc(var(--grid-step) * 28);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-round: 999px;

  /* Shadows */
  --shadow-card: 0 16px 48px rgba(20, 53, 87, 0.12);
  --shadow-soft: 0 8px 24px rgba(20, 53, 87, 0.08);
  --shadow-focus: 0 0 0 3px rgba(236, 25, 118, 0.2);

  /* Spacing */
  --space-2xs: calc(var(--grid-step) * 2);
  --space-xs: calc(var(--grid-step) * 4);
  --space-sm: calc(var(--grid-step) * 6);
  --space-md: calc(var(--grid-step) * 8);
  --space-lg: calc(var(--grid-step) * 12);
  --space-xl: calc(var(--grid-step) * 16);
  --space-2xl: calc(var(--grid-step) * 24);
  --space-3xl: calc(var(--grid-step) * 32);
  --space-4xl: calc(var(--grid-step) * 48);

  --ui-kit-padding-top: calc(var(--grid-step) * 14);
  --ui-kit-padding-bottom: calc(var(--grid-step) * 32);
  --ui-kit-header-gap: calc(var(--grid-step) * 20);
  --ui-kit-eyebrow-padding-x: calc(var(--grid-step) * 7);
  --ui-kit-eyebrow-gap: calc(var(--grid-step) * 9);
  --ui-kit-title-gap: calc(var(--grid-step) * 7);
  --ui-kit-section-gap: calc(var(--grid-step) * 14);
  --ui-kit-section-padding-y: calc(var(--grid-step) * 12);
  --ui-kit-section-padding-x: calc(var(--grid-step) * 9);
  --ui-kit-section-title-gap: calc(var(--grid-step) * 5);
  --ui-kit-section-lead-gap: calc(var(--grid-step) * 12);
  --ui-kit-group-gap: calc(var(--grid-step) * 8);
  --ui-kit-grid-gap: calc(var(--grid-step) * 12);
  --ui-kit-stack-gap: calc(var(--grid-step) * 6);

  /* Motion */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;

  /* Layers */
  --z-header: 100;
  --z-overlay: 250;
  --z-mobile-menu: 300;
  --z-modal: 500;
}

.page--accord {
  --page-color-primary: var(--accord-color-link);
  --page-color-primary-hover: var(--accord-color-link-deep);
  --page-color-primary-active: var(--accord-color-band-deep);
  --page-color-secondary: var(--accord-color-link);
  --page-color-secondary-hover: var(--accord-color-link-deep);
  --page-color-accent: var(--accord-color-accent);
  --page-color-accent-hover: var(--accord-color-band);
  --page-color-accent-active: var(--accord-color-band-deep);
  --page-color-secondary-soft: var(--accord-color-signal);
  --page-color-accent-soft: var(--accord-color-accent-soft);
}

@media (min-width: 768px) {
  :root {
    --font-size-h1: clamp(
      42px,
      calc(42px + 22 * ((100vw - 768px) / 672)),
      64px
    );
    --font-size-h2: clamp(
      36px,
      calc(36px + 16 * ((100vw - 768px) / 672)),
      52px
    );
    --font-size-h3: clamp(32px, calc(32px + 8 * ((100vw - 768px) / 672)), 40px);
    --font-size-h4: clamp(25px, calc(25px + 7 * ((100vw - 768px) / 672)), 32px);
    --font-size-h5: clamp(20px, calc(20px + 6 * ((100vw - 768px) / 672)), 26px);
    --font-size-h6: clamp(18px, calc(18px + 4 * ((100vw - 768px) / 672)), 22px);
    --font-size-p: clamp(16px, calc(16px + 2 * ((100vw - 768px) / 672)), 18px);
    --font-size-small: clamp(
      14px,
      calc(14px + 2 * ((100vw - 768px) / 672)),
      16px
    );
    --font-size-nav: clamp(
      13px,
      calc(13px + 1 * ((100vw - 768px) / 672)),
      14px
    );
    --container-padding: calc(var(--grid-step) * 10);
    --section-space: calc(var(--grid-step) * 48);
    --ui-kit-padding-top: calc(var(--grid-step) * 24);
    --ui-kit-padding-bottom: calc(var(--grid-step) * 44);
    --ui-kit-section-padding-y: calc(var(--grid-step) * 16);
    --ui-kit-section-padding-x: calc(var(--grid-step) * 16);
    --font-ui-kit-lead: var(--font-h6);
  }
}