/* Design tokens. Values match the original YOOtheme build of eritajayiti.com. */
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url(/fonts/manrope-400.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url(/fonts/manrope-600.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url(/fonts/manrope-700.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 400; font-display: swap; src: url(/fonts/playfair-400.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 600; font-display: swap; src: url(/fonts/playfair-600.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-display: swap; src: url(/fonts/playfair-700.woff2) format("woff2"); }

:root {
  --font-body: "Manrope", system-ui, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;

  --color-ink: #0d0a46;
  --color-text: #555371;
  --color-meta: #747a96;
  --color-sand: #a8a085;
  --color-sand-hover: #9d9476;
  --color-sand-tint: rgba(168, 160, 133, .2);
  --color-sand-dark: #746d53;
  --color-night: #26292f;
  --color-night-deep: #1b1d21;
  --color-paper: #ffffff;
  --color-header: rgba(247, 248, 252, .9);
  --color-on-dark: #ffffff;
  --color-on-dark-soft: rgba(255, 255, 255, .7);
  --color-button-border: #f2f2f2;

  --text-base: 16px;
  --text-button: 15px;
  --text-lead: 20px;
  --text-meta: 14px;
  --h1: 37.4px; --h2: 28.9px; --h3: 24px; --h4: 20px;
  --heading-hero: 43.2px;

  --gutter: 15px;
  --wrap: 1200px;
  --wrap-small: 960px;
  --section: 40px;
  --section-large: 70px;
  --section-xlarge: 140px;
  --grid-gap: 30px;
  --margin: 20px;

  --header-h: 90px;
  --nav-gap: 20px;
  --dropdown-radius: 12px;
  --dropdown-shadow: 0 15px 40px rgba(57, 65, 124, .1);
  --card-shadow: 1px 1px 15px 5px rgba(0, 0, 0, .11);
  --button-shadow: -5px -5px 15px rgba(255, 255, 255, .9), 5px 5px 15px rgba(116, 109, 83, .3);
  --button-shadow-hover: -2px -2px 5px rgba(255, 255, 255, .9), 2px 2px 5px rgba(116, 109, 83, .3);
  --button-light-shadow: 0 5px 15px rgba(0, 0, 0, .2);
  --measure: 760px;
}
@media (min-width: 640px) { :root { --gutter: 30px; } }
@media (min-width: 960px) {
  :root {
    --gutter: 40px;
    --h1: 44px; --h2: 34px; --heading-hero: 54px;
    --section: 70px; --section-large: 140px; --section-xlarge: 210px;
    --grid-gap: 40px;
  }
}