/* =========================================
   FURNITURE & ARTS BUILDING — GLOBAL SYSTEM
   Typography, Spacing Tokens, Utilities (REM)
   ========================================= */

/* ---------- COLOR VARIABLES ---------- */
:root {
  --color-primary: #31571F;
  --color-secondary: #1A1A1A;
  --color-light: #F5F5F5;
  --color-white: #FFFFFF;
}

/* ---------- TYPOGRAPHY ---------- */

/* Headings H1–H3 (Cormorant Garamond) */
h1, .heading-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 4rem; /* Adjusted from 4.5rem to 4rem (64px) for better balance */
  line-height: 1.1;
  letter-spacing: -0.02rem;
  color: var(--color-primary);
}
h2, .heading-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 2.75rem; /* Adjusted from 3rem to 2.75rem (44px) */
  line-height: 1.15;
  letter-spacing: -0.01rem;
  color: var(--color-primary);
}
h3, .heading-h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 2rem; /* Adjusted from 2.25rem to 2rem (32px) */
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--color-primary);
}

/* Headings H4–H6 (Jost) */
h4, .heading-h4 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 1.5rem; /* 24px */
  line-height: 1.3;
  color: var(--color-secondary);
}
h5, .heading-h5 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 1.25rem; /* 20px */
  line-height: 1.35;
  color: var(--color-secondary);
}
h6, .heading-h6 {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 1rem; /* 16px */
  line-height: 1.4;
  color: var(--color-secondary);
}

/* Body Text (Jost) */
.body-l {
  font-family: 'Jost', sans-serif;
  font-size: 1.25rem; /* 20px */
  line-height: 1.6;
  color: var(--color-secondary);
}
.body-m {
  font-family: 'Jost', sans-serif;
  font-size: 1.125rem; /* 18px */
  line-height: 1.7;
  color: var(--color-secondary);
}
.body-s {
  font-family: 'Jost', sans-serif;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;
  color: var(--color-secondary);
}

/* ---------- SPACING TOKENS ---------- */
:root {
  --space-xxs: 0.25rem; /* 4px */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 0.75rem;  /* 12px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */
  --space-4xl: 6rem;    /* 96px */
}

/* ---------- UTILITY CLASSES ---------- */
.section-padding {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}
.section-compact {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}
.container-gap {
  gap: var(--space-xl);
}
.card-padding {
  padding: var(--space-lg);
}
.text-gap > * + * {
  margin-top: var(--space-md);
}
.list-gap li + li {
  margin-top: var(--space-sm);
}

/* ---------- GLOBAL RESETS ---------- */
h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style-position: inside;
}

/* ---------- RESPONSIVE TYPOGRAPHY ---------- */

/* Laptop (1025–1439px) */
@media (max-width: 89.9375rem) { /* 1439px */
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.5rem; }
  h3 { font-size: 1.75rem; }
  .body-l { font-size: 1.1875rem; }
  .body-m { font-size: 1.0625rem; }
}

/* Tablet (768–1024px) */
@media (max-width: 64rem) { /* 1024px */
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5rem; }
  .body-l { font-size: 1.125rem; }
  .body-m { font-size: 1rem; }
}

/* Mobile (≤767px) */
@media (max-width: 47.9375rem) { /* 767px */
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.35rem; }
  .body-l { font-size: 1.0625rem; }
  .body-m { font-size: 0.9375rem; }
}