/* Wyatt Miller Real Estate — brand tokens
 * Imported by site main.css. Do not edit values without updating the brand guide.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Inter:wght@400;500;600&family=Fraunces:ital,wght@1,500&display=swap');

:root {
  /* Color — foundations */
  --ink:       #1C1917;
  --sand:      #F5EEE4;
  --bone:      #FAF7F2;
  --cream:     #FFFCF7;

  /* Color — accents */
  --clay:      #B5532A;
  --clay-deep: #8A3E20;

  /* Color — supporting */
  --taupe:     #7A6A5A;
  --dust:      #E4D9C8;

  /* Typography — families */
  --font-display: 'Outfit', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'Inter',  system-ui, -apple-system, Segoe UI, sans-serif;
  --font-accent:  'Fraunces', Georgia, 'Times New Roman', serif;

  /* Typography — scale */
  --text-xs:      0.75rem;   /* 12px */
  --text-sm:      0.875rem;  /* 14px */
  --text-base:    1rem;      /* 16px */
  --text-lg:      1.125rem;  /* 18px */
  --text-xl:      1.5rem;    /* 24px — H3 */
  --text-2xl:     2rem;      /* 32px — H2 */
  --text-3xl:     2.5rem;    /* 40px — H1 */
  --text-display: 3rem;      /* 48px — hero display */

  /* Spacing scale */
  --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-sm:   6px;
  --radius-md:   8px;
  --radius-pill: 999px;

  /* Shadow — soft, warm-tinted */
  --shadow-soft: 0 1px 2px rgba(28,25,23,.05), 0 8px 24px rgba(138,62,32,.06);

  /* Layout */
  --container-max: 1200px;
  --section-pad-desktop: 96px;
  --section-pad-tablet:  64px;
  --section-pad-mobile:  48px;
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { margin: 0 0 var(--space-4); }

a { color: var(--clay); text-decoration: none; }
a:hover { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 3px; }

/* Eyebrow — Fraunces italic small-caps */
.eyebrow {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-sm);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  color: var(--clay);
  display: inline-block;
  margin-bottom: var(--space-3);
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 768px)  { .container { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-7); } }