/* vars.css
 * Fonts, design tokens and responsive custom properties.
 */

@font-face {
  font-family: 'Bebas Neue Cyrillic';
  src: url('../fonts/BebasNeueCyrillic.woff2') format('woff2'),
      url('../fonts/BebasNeueCyrillic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --font-title: "Bebas Neue Cyrillic", sans-serif;
  --font-base: "Manrope", sans-serif;

  --accent: #f23e33;
  --text: #111111;
  --muted: #808080;
  --bg: #ffffff;
  --bg-soft: #e7e7e7;

  --black: #0b0b0b;

  --radius: 28px;

  --container-max: 1600px;
  --container-pad: 24px;

  --gap-1: 12px;
  --gap-2: 18px;
  --gap-3: 28px;
  --gap-4: 46px;

  --line: rgba(17,17,17,.12);

  --transition-duration: 0.2s;
  --transition: var(--transition-duration) ease;

  --icon-size: 16px;
  --icon-gap: 6px;

  --arrow-right-icon: url("../icons/arrow-right.svg");
  --arrow-top-right-icon: url("../icons/arrow-top-right.svg");
  --minus-icon: url("../icons/minus.svg");
  --plus-icon: url("../icons/plus.svg");
  --close-icon: url("../icons/close.svg");
  --chevron-left-icon: url("../icons/chevron-left.svg");
  --chevron-right-icon: url("../icons/chevron-right.svg");
  
  /* Messengers */
  --telegram-icon: url("../icons/telegram.svg");
  --whatsapp-icon: url("../icons/whatsapp.svg");
  --email-icon: url("../icons/email.svg");

  --background: var(--bg);
  --surface: var(--bg);

  --text-color: var(--text);
  --text-muted: var(--muted);
  --text-light: #9ca19f;

  --accent-color: var(--accent);

  --border-color: var(--line);

  --br-l: 16px;
  --box-shadow: 0 8px 28px rgb(0 0 0 / 8%);

  --overlay-z: 900;
  --side-z: 950;
}

@media (max-width: 1200px) {
  :root {
    --container-pad: 20px;
    --container-max: 1400px;
  }
}

@media (max-width: 560px) {
  :root {
    --container-pad: 16px;
    --container-max: 1200px;
  }
}

@media (max-width: 420px) {
  :root {
    --container-pad: 14px;
  }
}