@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&family=Literata:opsz,wght@7..72,600;7..72,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");

:root {
  --color-surface-bright: #fff8f5;
  --color-primary: #a03f28;
  --color-primary-hover: #812914;
  --color-secondary: #566342;
  --color-surface-container-low: #fbf2ed;
  --color-surface-container: #f5ece7;
  --color-surface-container-highest: #e9e1dc;
  --color-on-surface: #1e1b18;
  --color-on-surface-variant: #56423d;
  --color-on-primary: #ffffff;
  --color-outline-variant: #ddc0ba;

  --font-body: "Be Vietnam Pro", sans-serif;
  --font-display: "Literata", serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-surface-bright);
  color: var(--color-on-surface);
  font-family: var(--font-body);
}

.font-display {
  font-family: var(--font-display);
}

.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #ffffff;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(160, 63, 40, 0.3);
}

.btn-outline {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
  transition: all 0.2s ease-in-out;
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

.bg-cream-box {
  background-color: #fff8f5;
  border: 1px solid var(--color-outline-variant);
}

.iframe-wrapper {
  width: 100%;
  min-height: 800px;
  border-radius: 1rem;
  overflow: hidden;
}