/* ==========================================================================
   BASE CSS - Fonts, Variables, Reset, Utilities
   ========================================================================== */

/* Font Imports */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap");

/* CSS Custom Properties (Variables) */
:root {
  /* Typography */
  --Type-Font-Serif: "Plus Jakarta Sans", sans-serif;
  --Type-Font-Crimson: "Crimson Text", serif;
  --Body-Size-Large: 20px;
  --Body-Font-Weight-Strong: 600;
  --On-background-Global-Default: #8f888a;
  --On-background-Global-Secondary: #BBB3B5;
  --Body-Size-Medium: 18px;
  --Body-Font-Weight-Regular: 400;
  --On-background-Brand-Default: #231f20;
  --On-background-Brand-Tertiary: #e33226;
  --Background-Global-Secondary: #faf5f0;
  --Background-Global-Secondary-Alpha: rgba(250, 245, 240, 0.5);
  --Title-Page-Size-Large: 56px;
  --Body-Size-Small: 16px;
  --Background-Brand-Primary: #520f09;
  --Background-Brand-Primary-Hover: #63160f;
  --On-background-Brand-Primary: #fefdf9;
  --Background-Brand-Secondary-Hover: #c1a559;
  --On-background-Brand-Secondary: #523e00;

  /* Radius Variables */
  --Radius-sm: 4px;

  /* Heading Variables */
  --Heading-Size-Large: 32px;
  --Heading-Font-Weight: 700;
  --Title-Page-Size-Medium: 48px;
  --Title-Page-Font-Weight: 700;
  --Type-Font-Display: "Crimson Text", serif;

  /* Spacing Variables */
  --Space-0-5: 2px;
  --Space-1-5: 6px;
  --Space-2: 8px;
  --Space-3: 12px;
  --Space-4: 16px;
  --Space-5: 20px;
  --Space-6: 24px;
  --Space-8: 32px;
  --Space-10: 40px;
  --Space-12: 48px;
  --Space-15: 60px;
  --Space-800: 32px;
  --space-spacer-1-rem: 16px;
  --spacers-4: 16px;
}

/* Responsive Variables */
@media (max-width: 575px) {
  :root {
    --Body-Size-Large: 18px;
    --Body-Size-Medium: 16px;
    --Title-Page-Size-Large: 40px;
    --Body-Size-Small: 14px;
    --Title-Page-Size-Medium: 32px;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  :root {
    --Title-Page-Size-Medium: 32px;
  }
}

/* CSS Reset & Base Styles */
body {
  margin: 0;
  box-sizing: border-box;
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
}

img {
  max-width: 100%;
  object-fit: cover;
}

/* Utility Classes */
.border-none {
  border: none;
}

.primary-text {
  color: var(--On-background-Brand-Default, #231f20);
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Medium, 16px);
  font-style: normal;
  font-weight: var(--Body-Font-Weight-Regular, 400);
  line-height: 140%;
}

.text-strong {
  font-weight: var(--Body-Font-Weight-Strong, 400);
}

.primary-bg {
  background: var(--Background-Brand-Primary, #520f09);
}

.primary-bg-global-se {
  background: var(--Background-Global-Secondary, #faf5f0);
}

.text-crimson {
  color: var(--On-background-Brand-Default, #231f20);
  font-family: var(--Type-Font-Crimson, "Crimson Text");
  font-size: var(--Body-Size-Medium, 40px);
  font-style: normal;
  font-weight: var(--Body-Font-Weight-Strong, 700);
  line-height: 120%;
  text-transform: uppercase;
}

.text-crimson-lg {
  font-size: var(--Title-Page-Size-Large, 40px);
  font-weight: var(--Title-Page-Font-Weight, 700);
}

.primary-text-sm {
}

.primary-text-lg {
  font-size: var(--Title-Page-Size-Large, 56px);
  font-weight: var(--Title-Page-Font-Weight, 700);
}

.danger-color {
  color: #dd3636;
}