/* ==========================================================================
   MH Lake Norman, LLC — Brand Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for color, type, spacing, radius, and elevation.
   Extends (and stays backward-compatible with) the original styles.css vars:
   --ink, --muted, --line, --accent, --accent-dark, --bg, --card still resolve.
   ========================================================================== */
:root {
  /* ---- Brand: Pine / Sage (primary) ------------------------------------ */
  --pine-900:  #2f4137;  /* deepest — display ink, dark sections          */
  --pine-700:  #3f564b;  /* "Cypress" — primary dark / hovers             */
  --sage-600:  #547063;  /* "Lake Sage" — PRIMARY brand color             */
  --sage-400:  #7e978a;  /* "Eucalyptus" — secondary text on dark, icons  */
  --sage-200:  #c7d5cc;  /* "Sage Mist" — borders, quiet fills            */
  --sage-100:  #eef3f0;  /* "Vapor" — tinted surfaces, callouts           */

  /* ---- Brand: Water (secondary accent) --------------------------------- */
  --lake-700:  #2e5a61;  /* "Harbor"                                       */
  --lake-500:  #4b7b83;  /* "Lake Blue" — links in water contexts, charts */
  --lake-300:  #9fc0c2;  /* "Shoreline"                                    */

  /* ---- Brand: Warm accent (use sparingly, <10% of any layout) ---------- */
  --brass-600: #b0894c;  /* "Brass" — wellness warmth, highlights         */
  --brass-200: #ecdcbf;  /* "Sand" — soft warm fill                       */

  /* ---- Neutrals: Linen --------------------------------------------------*/
  --ink:       #23201c;  /* body text                                      */
  --stone:     #6f665d;  /* "Stone" — muted/secondary text                 */
  --driftwood: #e4ded5;  /* hairlines, dividers                            */
  --linen:     #f7f5f1;  /* page background                                */
  --cloud:     #ffffff;  /* cards, raised surfaces                         */

  /* ---- Status (kept calm, brand-adjacent) ------------------------------ */
  --success:   #4b7257;
  --warning:   #b0894c;
  --danger:    #a14b3c;
  --info:      #4b7b83;

  /* ---- Backward-compatible aliases (do not remove) --------------------- */
  --muted:        var(--stone);
  --line:         var(--driftwood);
  --accent:       var(--sage-600);
  --accent-dark:  var(--pine-700);
  --bg:           var(--linen);
  --card:         var(--cloud);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (1.250 — major third), base 16px */
  --text-xs:   0.75rem;   /* 12 — eyebrows, tags          */
  --text-sm:   0.875rem;  /* 14 — captions, fine print    */
  --text-base: 1rem;      /* 16 — body                    */
  --text-lg:   1.125rem;  /* 18 — lead paragraphs         */
  --text-xl:   1.5rem;    /* 24 — h3                      */
  --text-2xl:  1.953rem;  /* 31 — h2                      */
  --text-3xl:  3.052rem;  /* 49 — h1 / hero (clamp below) */
  --hero:      clamp(2.2rem, 5vw, 3.4rem);

  --leading-tight: 1.12;
  --leading-snug:  1.35;
  --leading-body:  1.6;
  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.12em;

  /* ---- Spacing (4px base) --------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 2.5rem;   --space-8: 4rem;    --space-9: 6rem;

  /* ---- Radius --------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Elevation (soft, low-contrast — calm brand) -------------------- */
  --shadow-sm: 0 1px 2px rgba(47, 65, 55, 0.06);
  --shadow-md: 0 6px 20px rgba(47, 65, 55, 0.08);
  --shadow-lg: 0 18px 48px rgba(47, 65, 55, 0.12);

  /* ---- Layout --------------------------------------------------------- */
  --max: 1040px;
  --measure: 38rem;   /* ideal reading width */

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur:  200ms;
}

/* Brand gradients — reuse for hero washes, the logo drop, buttons */
:root {
  --gradient-drop:  linear-gradient(180deg, #6b8576 0%, #3f564b 100%);
  --gradient-water: linear-gradient(135deg, #547063 0%, #2e5a61 100%);
  --gradient-linen: linear-gradient(180deg, #fbfaf7 0%, #f2efe8 100%);
}