@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&family=Open+Sans:wght@300;400;500;600;700&display=swap");

:root {
  --db: #3b1a08;
  --rb: #5c2e0a;
  --sr: #8b0000;
  --wg: #c8902a;
  --lg: #e8b84b;
  --fg: #2a4a1e;
  --wb: #f5edd8;
  --ow: #faf7f2;
  --td: #1a0d04;
  --tl: #f5edd8;

  --sf-deep-brown: var(--db);
  --sf-rich-brown: var(--rb);
  --sf-safari-red: var(--sr);
  --sf-warm-gold: var(--wg);
  --sf-light-gold: var(--lg);
  --sf-forest-green: var(--fg);
  --sf-warm-beige: var(--wb);
  --sf-off-white: var(--ow);
  --sf-text-light: var(--tl);
  --sf-text-dark: var(--td);

  --sf-heading-font: "Cormorant Garamond", serif;
  --sf-body-font: "Open Sans", sans-serif;
  --sf-body-size: clamp(15px, 1.05vw, 16.5px);
  --sf-body-line: 1.78;
  --sf-heading-tight: 0.96;
  --sf-heading-track: -0.026em;
  --sf-nav-height: 86px;
  --sf-nav-bottom: 86px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  min-width: 0;
}

body {
  font-family: var(--sf-body-font);
  font-size: var(--sf-body-size);
  line-height: var(--sf-body-line);
  color: var(--sf-text-dark);
  background: #fff;
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
p,
input,
textarea,
select,
button {
  font-family: var(--sf-body-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
.avia-caption-title,
.main-title,
.special-heading-tag {
  font-family: var(--sf-heading-font);
  color: var(--sf-deep-brown);
  font-weight: 300;
  letter-spacing: var(--sf-heading-track);
  line-height: var(--sf-heading-tight);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

body.sf-home-template,
body.sf-about-template,
body.sf-catering-template,
body.sf-contact-template,
body.sf-book-catering-template,
body.sf-client-portal-template,
body.sf-track-the-truck-template,
body.sf-menu-template,
body.sf-live-truck-template,
body.sf-order-now-template {
  background: var(--db);
  color: var(--tl);
}

em,
.sf-emphasis {
  font-style: italic;
}

a {
  color: var(--sf-safari-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  color: var(--sf-rich-brown);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

canvas {
  display: block;
}

::selection {
  background: var(--sf-light-gold);
  color: var(--sf-deep-brown);
}