:root {
  /* Primary colors */
  --color-primary: #E20781;
  --color-primary-hover: #C90070;

  /* Secondary colors */
  --color-secondary: #283678;
  --color-secondary-hover: #1f2a60;

  /* UI colors */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f8ff;
  --color-text: #1B1F21;
  --color-text-light: #6d6d6d;
  --color-heading: #283678;
  --color-border: #d8def3;
  --color-cards-border: #cfcef7;
  --color-cards-p: #242424;
  --color-bubliny: #cbc5f4;

  /* Typography */
  --font-heading: "neulis-neue", sans-serif;
  --font-body: "neulis-neue", sans-serif;
  --font-menu: "neulis-neue", sans-serif;

  --font-size-text: 16px;
  --font-size-menu: 16px;
  --font-size-heading: 40px;
  --font-size-subtitle: 23px;
  --font-size-date: 22px;
  --font-size-countdown: 32px;
  --font-size-copyright: 15px;
  --font-size-podnadpisy: 30px;
   --font-size-note: 14px;

  /* Layout */
  --container: 1400px;
  --section-spacing: 110px;
  --header-height: 100px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --radius-border: 16px;

  /* Shadows */
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .06);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, .08);

  /* Transitions */
  --transition: .25s ease;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-heading);
  font-family: var(--font-heading);
}

a {
  color: inherit;
}