/* ==========================================================================
   00-base.css — Reset, CSS custom properties, font imports, base typography
   Springcart Farm — Premium single-page static site
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts — Fraunces (display), Inter (body/UI), Lora (captions only)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:wght@300;400;500;700&family=Lora:ital@1&display=swap');

/* --------------------------------------------------------------------------
   CSS Custom Properties — design system tokens
   Seven colours. Nothing else.
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --color-paper:  #F2ECDF;
  --color-ink:    #241F1A;
  --color-green:  #3F4F2F;
  --color-rust:   #A8542E;
  --color-bone:   #E5DBC8;
  --color-dust:   #7A7048;
  --color-footer: #1A1612;

  /* Derived — do not add new base colours to produce these */
  --color-rust-hover:    #8E4425;
  --color-rust-subtle:   rgba(168, 84, 46, 0.10);
  --color-green-muted:   rgba(63, 79, 47, 0.20);
  --color-ink-60:        rgba(36, 31, 26, 0.60);
  --color-paper-overlay: rgba(242, 236, 223, 0.80);
  --color-footer-rule:   rgba(122, 112, 72, 0.30);

  /* Dusk variant — Visit section only (applied via .section--dusk) */
  --color-dusk-bg:     #1A1612;
  --color-dusk-text:   #F2ECDF;
  --color-dusk-accent: #A8542E;
  --color-dusk-dust:   #7A7048;

  /* Spacing — 8px grid */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-96:  96px;
  --space-120: 120px;
  --space-160: 160px;

  /* Section rhythm */
  --space-section:        120px;
  --space-section-mobile: 64px;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-caption: 'Lora', Georgia, serif;

  /* Border radius */
  --radius-card: 4px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-reveal: 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Mobile overrides — section spacing only */
@media (max-width: 768px) {
  :root {
    --space-section: var(--space-section-mobile);
  }
}

/* --------------------------------------------------------------------------
   Modern CSS reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Prevent horizontal overflow from escaping containers */
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-ink);
  background-color: var(--color-paper);
  /* Oldstyle figures for heritage feel; onum off for price displays */
  font-feature-settings: 'liga' 1, 'calt' 1, 'onum' 1, 'kern' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-ink);
}

/* Links */
a {
  color: var(--color-green);
  text-decoration-color: var(--color-rust);
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-rust);
}

/* Images */
img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Lists */
ul, ol {
  list-style: none;
}

/* Form elements inherit font */
button,
input,
select,
textarea {
  font: inherit;
}

/* Remove default button appearance */
button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Horizontal rules */
hr {
  border: none;
  border-top: 1px solid var(--color-green-muted);
}

/* Scroll margin for sticky nav offset — 80px nav height */
section[id],
div[id] {
  scroll-margin-top: 80px;
}

/* Price elements — lining figures, not oldstyle */
.price,
.for-sale__price {
  font-feature-settings: 'liga' 1, 'onum' 0, 'kern' 1;
}

/* --------------------------------------------------------------------------
   Base typography classes
   -------------------------------------------------------------------------- */

/* Display scale — Fraunces */
.display-xl {
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 300;
}
.display-lg {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 300;
}

/* Heading scale — Fraunces */
.heading-xl {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-variation-settings: 'opsz' 72, 'SOFT' 20, 'wght' 400;
}
.heading-lg {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-weight: 500;
  font-variation-settings: 'opsz' 36, 'SOFT' 30, 'wght' 500;
}
.heading-sm {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  font-variation-settings: 'opsz' 24, 'SOFT' 40, 'wght' 600;
}

/* Caps label — Inter */
.caps-label {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.10em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-dust);
}

/* Body scale — Inter */
.body-lg {
  font-size: 18px;
  line-height: 1.65;
  font-weight: 300;
}
.body-md {
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
}
.body-sm {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
}

/* Mobile type scale */
@media (max-width: 768px) {
  .display-xl { font-size: 44px; }
  .display-lg { font-size: 32px; }
  .heading-xl { font-size: 28px; }
  .heading-lg { font-size: 22px; }
  .heading-sm { font-size: 18px; }
  .body-lg    { font-size: 17px; }
}