/* ---------------------------------------------------------
   ReservedLand.com – Theme Design System
   Purpose: Unified spacing, colors, typography, radii, shadows
   --------------------------------------------------------- */

/* ---------------------------------
   1. COLOR PALETTE (Brand)
---------------------------------- */
:root {
  --rl-beige: #F6EFE4;         /* main background */
  --rl-beige-light: #FAF6EF;
  --rl-brown: #3E2C1E;         /* brand brown */
  --rl-brown-light: #6E5845;
  --rl-cream: #E6D6C2;         /* accent */
  --rl-white: #FFFFFF;

  --rl-text: #2A2927;
  --rl-text-light: #4E4C48;

  --rl-border: #E2D8C8;
  --rl-border-dark: #C8B8A3;

  --rl-shadow: 0 8px 18px rgba(0,0,0,0.08);
  --rl-shadow-soft: 0 4px 10px rgba(0,0,0,0.06);
}

/* ---------------------------------
   2. TYPOGRAPHY SCALE
---------------------------------- */
:root {
  --rl-font-body: "Inter", sans-serif;
  --rl-font-heading: "Playfair Display", serif;

  /* Type Scale (Major Third) */
  --fs-900: 3rem;      /* H1 */
  --fs-800: 2.25rem;   /* H2 */
  --fs-700: 1.75rem;   /* H3 */
  --fs-600: 1.5rem;    /* H4 */
  --fs-500: 1.25rem;   /* big body */
  --fs-400: 1rem;      /* body */
  --fs-300: .875rem;   /* small text */
}

h1, h2, h3, h4 {
  font-family: var(--rl-font-heading);
  color: var(--rl-brown);
  line-height: 1.2;
}

p, li, span, a, div {
  font-family: var(--rl-font-body);
  color: var(--rl-text);
  line-height: 1.6;
}

/* Heading defaults */
h1 { font-size: var(--fs-900); margin-bottom: 1rem; }
h2 { font-size: var(--fs-800); margin-bottom: 1rem; }
h3 { font-size: var(--fs-700); margin-bottom: .75rem; }

/* ---------------------------------
   3. SPACING SCALE (4px baseline)
---------------------------------- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
}

/* Utility spacing classes */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-7 { padding-top: var(--space-7); padding-bottom: var(--space-7); }

/* ---------------------------------
   4. CARD COMPONENTS
---------------------------------- */
.card {
  background: var(--rl-white);
  border: 1px solid var(--rl-border);
  border-radius: 12px;
  padding: var(--space-5);
  transition: all 0.25s ease;
}

/* Locked with JS hover lift effect */

/* ---------------------------------
   5. BUTTONS
---------------------------------- */
.button {
  display: inline-block;
  padding: 12px 20px;
  background: var(--rl-brown);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.button-light {
  background: var(--rl-cream);
  color: var(--rl-brown);
}

/* ---------------------------------
   6. LAYOUT WIDTHS / CONTAINERS
---------------------------------- */
.container {
  width: min(1100px, 90%);
  margin: 0 auto;
}

/* Hero max width */
.hero-text {
  max-width: 600px;
}

/* ---------------------------------
   7. RADIUS & SHADOW UTILS
---------------------------------- */
.rounded { border-radius: 12px; }
.rounded-lg { border-radius: 16px; }
.shadow-soft { box-shadow: var(--rl-shadow-soft); }
.shadow { box-shadow: var(--rl-shadow); }

/* ---------------------------------
   8. BACKGROUND UTILS
---------------------------------- */
.bg-beige { background: var(--rl-beige); }
.bg-light { background: var(--rl-beige-light); }
.bg-white { background: var(--rl-white); }

/* ---------------------------------
   9. NAVIGATION STYLING
---------------------------------- */
.nav-link {
  font-weight: 500;
  color: var(--rl-text-light);
  padding: 6px 2px;
  position: relative;
  cursor: pointer;
}

/* underline added via JS */

/* ---------------------------------
   10. DIVIDERS
---------------------------------- */
.divider {
  width: 0%;
  height: 2px;
  background: var(--rl-brown);
  margin: var(--space-7) 0;
  transition: width 0.6s ease;
}

/* Fades in + grows via JS */


/* ---------------------------------
   11. RESPONSIVE TWEAKS
---------------------------------- */
@media (max-width: 768px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  .card { padding: var(--space-4); }
  .hero-text { max-width: 100%; }
}