@font-face {
  font-family: "Gloock";
  src: url("../assets/fonts/gloock-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans";
  src: url("../assets/fonts/google-sans-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-bold-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --color-ink: #f4e8cf;
  --color-ink-deep: #261b10;
  --color-surface: #161310;
  --color-surface-raised: #201b16;
  --color-surface-panel: rgba(30, 25, 20, 0.92);
  --color-paper: #241d16;
  --color-paper-soft: #2d241b;
  --color-paper-deep: #3b2d20;
  --color-warm-ink: #f6ead0;
  --color-warm-muted: #d0b98d;
  --color-chili: #d97856;
  --color-herb: #a8b77b;
  --color-golden-ink: #261b10;
  --color-golden-muted: #d0ad70;
  --color-golden-accent: #f0c978;
  --color-gold: #d0a24d;
  --color-gold-light: #f0cb79;
  --color-gold-gradient: #bd8c3b;
  --color-gold-start: #f1c76b;
  --color-gold-end: #8d5d22;
  --color-cream: #f7eedb;
  --color-muted: #c9b897;
  --color-border: #b8893d;
  --color-border-gold: rgba(208, 162, 77, 0.55);
  --color-border-gold-strong: rgba(240, 203, 121, 0.78);
  --color-success: #9bd174;
  --page-gradient: linear-gradient(180deg, #11100e 0%, #1b1510 52%, #241b13 100%);
  --gold-gradient: linear-gradient(110deg, var(--color-gold-start) 0%, var(--color-gold-gradient) 40%, var(--color-gold-end) 100%);
  --warm-gradient: linear-gradient(135deg, #2a2118 0%, #171310 100%);
  --hero-overlay-gradient: linear-gradient(180deg, rgba(10, 8, 6, 0.22) 0%, rgba(65, 40, 12, 0.42) 48%, rgba(7, 5, 4, 0.76) 100%);
  --header-golden-glass: linear-gradient(110deg, rgba(241, 199, 107, 0.98) 0%, rgba(208, 162, 77, 0.96) 42%, rgba(141, 93, 34, 0.98) 100%);
  --display-font: "Gloock", "Cormorant Garamond", Georgia, serif;
  --body-font: "Google Sans", "Manrope", Arial, sans-serif;
  --container: 1280px;
  --gutter: 80px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --shadow-card: 0 18px 42px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(208, 162, 77, 0.12);
  --shadow-gold: 0 4px 14px rgba(208, 162, 77, 0.26);
  --ornament-opacity: 0.14;
  --transition: 180ms ease;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-duration: 720ms;
  --motion-duration-fast: 280ms;
  --motion-duration-slideshow: 1800ms;
  --motion-distance: 28px;
  --parallax-scale: 1.06;
}