/* ============================================================
   Hillside Landscape — Design Tokens
   Single source of truth for color, type, spacing, elevation.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,500&family=Figtree:wght@400;500;600;700&display=swap');

:root {
  /* --- Brand color ramp ------------------------------------- */
  --forest-900: #1F3D2B;   /* Primary. Headlines, nav, footer, logomark on light. */
  --forest-700: #2A5239;
  --forest-600: #3A6B4E;   /* Interactive primary — buttons, links. */
  --forest-400: #7AA08A;
  --forest-100: #D3E0D7;
  --forest-50:  #EAF0EC;   /* Primary tint — surface wash, hover fill. */

  --clay-700:   #A85628;
  --clay-600:   #C36B3C;   /* Accent — CTAs, rating stars, highlights. Sparing use. */
  --clay-400:   #E0A076;
  --clay-100:   #F5DCC6;
  --clay-50:    #FBEEE4;   /* Accent tint — badges, callouts. */

  /* --- Warm neutrals (no cool grays) ------------------------ */
  --stone-900:  #2A2722;   /* Body text, headings on light. Warm near-black. */
  --stone-700:  #3F3A32;
  --stone-500:  #6E665B;   /* Secondary text, captions, metadata. */
  --stone-300:  #B5AC9C;
  --stone-200:  #D9D2C5;   /* Borders, dividers, disabled. */
  --stone-100:  #E8E2D5;
  --bone-100:   #F5F0E6;   /* Section backgrounds, cards on cream. */
  --bone-50:    #FBF8F1;   /* Page background — warm off-white. */
  --white:      #FFFFFF;

  /* --- Semantic ---------------------------------------------- */
  --color-success: #3A6B4E;        /* reuses forest-600 */
  --color-warning: #C89B3C;
  --color-danger:  #B2442E;
  --color-info:    #4A6E88;

  /* --- Semantic aliases (prefer these in components) -------- */
  --bg-page:        var(--bone-50);
  --bg-surface:     var(--white);
  --bg-sunken:      var(--bone-100);
  --bg-inverse:     var(--forest-900);

  --fg-primary:     var(--stone-900);
  --fg-secondary:   var(--stone-500);
  --fg-muted:       var(--stone-300);
  --fg-on-inverse:  var(--bone-50);
  --fg-brand:       var(--forest-900);
  --fg-accent:      var(--clay-600);

  --border-subtle:  var(--stone-200);
  --border-strong:  var(--stone-300);
  --border-brand:   var(--forest-600);

  --focus-ring:     0 0 0 3px color-mix(in oklab, var(--forest-600) 35%, transparent);

  /* --- Typography ------------------------------------------- */
  --font-display: 'Newsreader', 'Source Serif Pro', Georgia, serif;
  --font-body:    'Figtree', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — tuned for body=16 / h1=64 desktop */
  --fs-display: 5rem;      /*  80px — hero display only */
  --fs-h1:      4rem;      /*  64px */
  --fs-h2:      2.75rem;   /*  44px */
  --fs-h3:      1.875rem;  /*  30px */
  --fs-h4:      1.375rem;  /*  22px */
  --fs-body-lg: 1.125rem;  /*  18px */
  --fs-body:    1rem;      /*  16px */
  --fs-body-sm: 0.9375rem; /*  15px */
  --fs-caption: 0.8125rem; /*  13px */
  --fs-overline:0.6875rem; /*  11px, tracked */
  --fs-button:  0.9375rem; /*  15px */

  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-display: -0.02em;
  --tracking-heading: -0.015em;
  --tracking-body:     0;
  --tracking-overline: 0.12em;

  /* --- Spacing scale (4px base) ----------------------------- */
  --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;
  --space-10: 128px;

  /* --- Radius ------------------------------------------------ */
  --radius-xs:  4px;   /* inputs, chips */
  --radius-sm:  8px;   /* buttons */
  --radius-md:  12px;  /* cards */
  --radius-lg:  20px;  /* hero tiles, feature blocks */
  --radius-pill: 999px;/* tags only, never buttons */

  /* --- Elevation (warm-tinted shadows) ---------------------- */
  --shadow-xs: 0 1px 2px rgba(42, 39, 34, 0.06);
  --shadow-sm: 0 2px 6px rgba(42, 39, 34, 0.08);
  --shadow-md: 0 12px 32px -12px rgba(42, 39, 34, 0.18);
  --shadow-lg: 0 24px 48px -16px rgba(42, 39, 34, 0.22);
  --shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.2);

  /* --- Motion ------------------------------------------------ */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* --- Layout ------------------------------------------------ */
  --page-max:   1280px;
  --gutter:     120px;
  --gutter-md:  48px;
  --gutter-sm:  20px;
}

/* =============================================================
   Element defaults
   ============================================================ */

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
  background: var(--bg-page);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-brand);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p {
  margin: 0;
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
  max-width: 64ch;
}

.overline {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--fg-secondary);
  line-height: var(--lh-normal);
}

a {
  color: var(--forest-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: text-underline-offset var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
a:hover { text-underline-offset: 4px; color: var(--forest-900); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

::selection { background: var(--clay-100); color: var(--stone-900); }