@font-face {
  font-family: "Blinker-Bold";
  src: url("../assets/fonts/Blinker-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Blinker-SemiBold";
  src: url("../assets/fonts/Blinker-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Blinker-Regular";
  src: url("../assets/fonts/Blinker-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../assets/fonts/Caveat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope-ExtraBold";
  src: url("../assets/fonts/Manrope-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope-Bold";
  src: url("../assets/fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope-SemiBold";
  src: url("../assets/fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope-Medium";
  src: url("../assets/fonts/Manrope-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope-Regular";
  src: url("../assets/fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --color-primary: #4d2b1a;
  --color-primary-soft: #4d2b1a80;
  --color-primary-blog: #4d2b1acc;
  --color-bg: #ebe7e4;
  --color-bg-rgb: 235, 231, 228;
  --color-surface: #dcd5ce;
  --color-surface-alt: #d7d2c4;
  --color-accent-gold: #c89b62;
  --color-accent-green: #b9c588cc;
  --color-accent-red: #e4112a;
  --color-text: #4d2b1a;
  --color-text-invert: #ebe7e4;
  --color-text-invert-rgb: 235, 231, 228;
  --color-border: #c9bfb2;
  --color-btn-hover: #9aa473;
  --color-search: #4d2b1a26;
  --color-tag-brown: rgba(77, 43, 26, 0.8);
  --color-tag-popular: #844615;
  --color-tag-new: #c89b62;
  --color-tag-discount: #6a4d3e;
  --color-solutions: rgba(77, 43, 26, 0.7);
  --color-sub-menu: rgba(77, 43, 26, 0.8);
  --color-sub-menu-gold: rgba(200, 155, 98, 0.8);
  --color-line: #ebe7e466;
  --color-payment-bg: #fcf9f5;
  --color-payments: #2f5d3e;
  --color-tag-recommended: #2f5d3e;
  --color-tag-for-business: #e5d9c8;
  --color-hero-cups: #4d2b1a99;
  --color-primary-delivery: #4d2b1abf;
  --color-delivery-map-fone: #fcf9f5;
  --color-hero-blog: #dcd5ce99;
  --color-blog-category: #babfa0;
  --color-office-plan-card-line: #9aa47380;
  --color-office-how-it-works: #4d2b1a33;
  --color-popup-overlay: rgba(0, 0, 0, 0.6);

  /* Fonts */
  --font-heading-bold: "Blinker-Bold", sans-serif;
  --font-heading-semibold: "Blinker-SemiBold", sans-serif;
  --font-heading-regular: "Blinker-Regular", sans-serif;
  --font-body-extrabolt: "Manrope-ExtraBold", sans-serif;
  --font-body-bold: "Manrope-Bold", sans-serif;
  --font-body-semibold: "Manrope-SemiBold", sans-serif;
  --font-body-medium: "Manrope-Medium", sans-serif;
  --font-body-regular: "Manrope-Regular", sans-serif;
  --font-header-menu: "Caveat", cursive;

  /* Spacing */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 10px;
  --space-s: 20px;
  --space-m: 24px;
  --space-l: 30px;

  /* Radius */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 32px;
  --radius-pill: 999px;

  /* Layout */
  --container-max: 1920px;
  --container-gutter: clamp(1rem, 0.825rem + 0.875vw, 1.875rem);

  /* Базові дизайн-токени (Атомарні) */
  --duration-smooth: 0.5s;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);

  /* Семантичний токен для готової анімації */
  --transition-zoom-premium: transform var(--duration-smooth)
    var(--ease-premium);
}