/* =========================
     Fonts
  ========================= */
/* skranji-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Skranji";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/skranji-v13-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* skranji-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Skranji";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/fonts/skranji-v13-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lacquer-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Lacquer";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/lacquer-v15-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* medievalsharp-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "MedievalSharp";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/medievalsharp-v26-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* frijole-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Frijole";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/frijole-v14-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* kings-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Kings";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/kings-v7-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* trade-winds-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Trade Winds";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/trade-winds-v17-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ruthie-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Ruthie";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/ruthie-v26-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* caesar-dressing-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Caesar Dressing";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/caesar-dressing-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* metal-mania-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Metal Mania";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/metal-mania-v22-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rubik-scribble-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Rubik Scribble";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/rubik-scribble-v1-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* piedra-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Piedra";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/piedra-v25-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* estonia-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Estonia";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/estonia-v11-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cinzel-decorative-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Cinzel Decorative";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/cinzel-decorative-v17-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cinzel-decorative-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Cinzel Decorative";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/fonts/cinzel-decorative-v17-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cinzel-decorative-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Cinzel Decorative";
  font-style: normal;
  font-weight: 900;
  src: url("../assets/fonts/cinzel-decorative-v17-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* monsieur-la-doulaise-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Monsieur La Doulaise";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/monsieur-la-doulaise-v18-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ballet-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Ballet";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/ballet-v27-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* unifrakturmaguntia-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "UnifrakturMaguntia";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/unifrakturmaguntia-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merienda-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Merienda";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/merienda-v22-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* merienda-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Merienda";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/fonts/merienda-v22-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* =========================
     Root
  ========================= */

:root {
  /* Main-Colors */

  --header-height: 15vh;

  --color-primary: linear-gradient(135deg, #5a0d17 0%, #3a070f 100%);
  --color-secondary: #5a0d17;
  --color-accent: #c6a24d;
  --color-black-muted: #231f20;
  --color-white-muted: #d6c7c7;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-bg: black;
  --color-dark-grey: #1f1f1f;

  /* Typographiy & Text */

  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: inherit;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-main-nav: "Cinzel Decorative";

  --color-text-primary: #f0f1f3;
  --color-text-secondary: #cfd3d8;
  --color-text-muted: #878b91;
  --color-text-disabled: #6e7784;
  --color-text-inverse: #111114;
  --color-text-darkred: #690712;
  --color-text-accent: var(--color-accent);
  --color-text-accent-muted: #af9b6d;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-base: 1.65;
  --line-height-heading: 1.2;

  --font-size-2xs: 0.75rem; /* 12px */
  --font-size-xs: 0.875rem; /* 14px */
  --font-size-sm: 0.95rem; /* ~15px */
  --font-size-md: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.42rem; /* 20px */
  --font-size-2xl: 1.75rem; /* 20px */
  --font-size-3xl: 2.1rem; /* 20px */

  --font-size-h1: 1.9rem; /* 36px */
  --font-size-h2: 1.46rem; /* 28px */
  --font-size-h3: 1.25rem; /* 22px */
  --font-size-h4: 1.16rem; /* 18px */

  /* Links & Buttons */

  --color-highlight: green;

  --color-link: var(--color-accent);
  --color-link-hover: var(--color-highlight);

  --color-btn: #1c1c20;
  --color-btn-hover: var(--color-highlight);

  /* Borders */

  --border-color: var(--color-accent);
  --border-width-hairline: 1px;
  --border-width-default: 1px;
  --border-width-strong: 2px;

  --radius-xs: 0.25rem;
  --radius-sm: 0.4rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-round: 100%;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);

  /* Spacing Scale (8px-ish Rhythm) */

  --space-xxxs: 1px; /* 1 */
  --space-2xs: 0.25rem; /* 4 */
  --space-xs: 0.5rem; /* 8 */
  --space-sm: 0.75rem; /* 12 */
  --space-md: 1rem; /* 16 */
  --space-lg: 1.5rem; /* 24 */
  --space-xl: 2rem; /* 32 */
  --space-2xl: 3rem; /* 48 */
  --space-3xl: 4rem; /* 64 */
  --space-4xl: 6rem; /* 96 */
  --space-5xl: 7rem; /* 96 */

  --section-padding-y: var(--space-3xl);
  --section-padding-y-compact: var(--space-2xl);

  --gap-sm: var(--space-sm);
  --gap-md: var(--space-md);
  --gap-lg: var(--space-lg);
  --gap-xl: var(--space-xl);
  --gap-2xl: var(--space-2xl);

  --btn-padding-y: 0.75rem;
  --btn-padding-x: 1.15rem;

  --input-padding-y: 0.75rem;
  --input-padding-x: 0.9rem;

  --card-padding: var(--space-lg);

  --container-padding-x: var(--space-lg);
  --section-padding-y: var(--space-md);
  --section-gap: var(--space-lg);

  /* Z-Index */

  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-modal: 50;
  --z-toast: 60;
  --z-front: 100;

  /* Opacity */

  --opacity-minimum: 10%;
  --opacity-Light: 35%;
  --opacity-mid: 50%;
  --opacity-dominant: 75%;
  --opacity-strong: 95%;

  /* Element Layouts */

  --container-max-width: 1200px;
  --container-padding-x: var(--space-md);
  --content-max-width: 70ch;

  /* Focus / Accessibility */

  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: rgba(198, 162, 77, 0.85);

  /*  Motion (for animations.css) */

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* =========================
     Root-Responsive
  ========================= */

@media (min-width: 768px) {
  :root {
    --container-padding-x: var(--space-lg);
    --font-size-h1: 1.82rem;
    --font-size-h2: 1.6rem;
    --section-padding-y: var(--space-4xl);
  }
}

@media (min-width: 992px) {
  :root {
    --header-height: 10vh;
  }
}