/* ============================================================
   ERIC MARTIN — Lake Norman Real Estate
   Design foundation: color + type
   Aesthetic: upscale lakefront luxury, warm, with a bold youthful edge.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- BRAND PALETTE ---------- */
  /* Harbor — deep navy, the anchor of the brand (lake at dusk) */
  --harbor-900: #0B2030;   /* midnight, deepest backgrounds */
  --harbor-800: #102A3E;   /* primary dark / hero grounds */
  --harbor-700: #16384F;   /* raised dark surfaces */
  --harbor-600: #1E4660;   /* hover on dark */

  /* Lake — the water, teal-blue. Secondary brand color */
  --lake-700: #245F80;
  --lake-600: #2E6F95;     /* primary lake */
  --lake-500: #357CA0;
  --lake-300: #7FB0CB;     /* light water, tints */
  --lake-100: #DCE9F0;     /* faint wash */

  /* Brass — warm gold accent. Luxury signal, used sparingly */
  --brass-600: #A8843E;
  --brass-500: #C2A26A;    /* primary brass */
  --brass-400: #D2B580;
  --brass-200: #E7D6B0;    /* sand, soft fills */

  /* Warm neutrals — paper, linen, ink */
  --ink-900: #14181C;      /* primary text on light */
  --ink-700: #2D333A;
  --slate-600: #545A60;    /* secondary text */
  --slate-500: #6E6A60;    /* warm muted text */
  --mist-400: #B7B3A8;     /* disabled / faint */
  --mist-300: #DAD4C7;     /* borders, hairlines */
  --linen-200: #EDE7DA;    /* card / panel on cream */
  --linen-100: #F5F1E8;    /* primary cream background */
  --ivory: #FBF8F1;        /* lightest paper */
  --white: #FFFFFF;

  /* ---------- SEMANTIC COLOR ROLES ---------- */
  --bg: var(--linen-100);
  --bg-raised: var(--ivory);
  --bg-dark: var(--harbor-800);
  --surface: var(--white);
  --surface-sunken: var(--linen-200);

  --fg1: var(--ink-900);        /* primary text */
  --fg2: var(--slate-600);      /* secondary text */
  --fg3: var(--slate-500);      /* tertiary / captions */
  --fg-on-dark: #F3EEE3;        /* text on harbor */
  --fg-on-dark-dim: #A9B6C0;    /* secondary text on harbor */

  --accent: var(--brass-500);   /* the gold */
  --accent-ink: var(--brass-600);
  --link: var(--lake-600);

  --border: var(--mist-300);
  --border-strong: var(--mist-400);
  --border-dark: rgba(243,238,227,0.16);

  --positive: #3B7A57;
  --warning: #B5862F;
  --danger:  #A24238;

  /* ---------- TYPE FAMILIES ---------- */
  --serif-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-eyebrow: 'Jost', Helvetica, Arial, sans-serif;

  /* ---------- TYPE SCALE (fluid where useful) ---------- */
  --fs-display: clamp(3.5rem, 7vw, 6.5rem);  /* hero numerals / statements */
  --fs-h1: clamp(2.6rem, 4.5vw, 4rem);
  --fs-h2: clamp(2rem, 3vw, 2.85rem);
  --fs-h3: 1.75rem;
  --fs-h4: 1.3rem;
  --fs-lead: 1.3rem;     /* intro paragraphs */
  --fs-body: 1.0625rem;  /* 17px */
  --fs-small: 0.9375rem; /* 15px */
  --fs-eyebrow: 0.78rem; /* uppercase label */
  --fs-caption: 0.8125rem;

  --lh-tight: 1.05;
  --lh-snug: 1.18;
  --lh-body: 1.6;

  --tracking-eyebrow: 0.22em;
  --tracking-wide: 0.06em;

  /* ---------- SPACING (8px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---------- RADII ---------- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- SHADOWS (warm-tinted, soft) ---------- */
  --shadow-xs: 0 1px 2px rgba(16,42,62,0.06);
  --shadow-sm: 0 2px 8px rgba(16,42,62,0.08);
  --shadow-md: 0 10px 28px -8px rgba(16,42,62,0.18);
  --shadow-lg: 0 28px 60px -18px rgba(11,32,48,0.30);
  --shadow-brass: 0 10px 30px -10px rgba(168,132,62,0.45);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply to real tags or via classes
   ============================================================ */

.em-eyebrow {
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ink);
}

.em-display {
  font-family: var(--serif-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg1);
}

h1, .em-h1 {
  font-family: var(--serif-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--fg1);
}

h2, .em-h2 {
  font-family: var(--serif-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--fg1);
}

h3, .em-h3 {
  font-family: var(--serif-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg1);
}

h4, .em-h4 {
  font-family: var(--sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--fg1);
}

.em-lead {
  font-family: var(--sans);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.5;
  color: var(--fg2);
}

body, p, .em-body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg1);
}

.em-small { font-size: var(--fs-small); }
.em-caption {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  color: var(--fg3);
  letter-spacing: 0.01em;
}

a, .em-link { color: var(--link); text-decoration: none; }
a:hover { color: var(--lake-700); }

/* Serif italic is a signature accent — pull-quotes, emphasis words */
.em-serif-italic {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
}