/* =============================================================
   Moms and Groms — Core Tokens
   Muted coastal palette, luxury family lifestyle brand.
   "raised by the coast"
   ============================================================= */

/* Webfonts — substituted from Google Fonts.
   See README.md "Fonts" for the exact matches and what to swap
   if original brand font files become available. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Inter:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&display=swap');

:root {
  /* -------- RAW PALETTE -------- */
  /* Sand / cream family — warm, sun-bleached */
  --sand-50:  #FDF8EC;   /* lightest cream, near-white */
  --sand-100: #F9EFD8;   /* default brand background */
  --sand-200: #F7E9D0;   /* logo background — the canonical cream */
  --sand-300: #EFDDB8;   /* warm sand */
  --sand-400: #E0C998;   /* driftwood tan */
  --sand-500: #C9AE7A;   /* wet sand */
  --sand-600: #A68A5B;   /* dune shadow */
  --sand-700: #7A6642;   /* weathered teak */

  /* Dusty blue / slate — the logo ink color */
  --tide-50:  #EEF1F2;
  --tide-100: #D8DEDF;
  --tide-200: #BDC5C7;
  --tide-300: #9CA5A7;   /* canonical brand blue — logo ink */
  --tide-400: #7C878B;
  --tide-500: #5E6A6F;
  --tide-600: #485156;   /* deep slate — headings on cream */
  --tide-700: #333A3E;
  --tide-800: #222729;   /* near-black, never pure black */

  /* Accent — soft coastal greens + clay (use SPARINGLY) */
  --fern-400:  #9BAE9A;   /* sea-grass muted green */
  --fern-600:  #5F7561;   /* kelp */
  --clay-400:  #C9998A;   /* sun-faded terracotta */
  --clay-600:  #9A6A5C;   /* dried clay */
  --shell-300: #E8D9CC;   /* shell pink, barely-there */

  /* Semantic: success / warning / danger — tuned to palette, never neon */
  --success: #7A9279;
  --warning: #C9954A;
  --danger:  #B96A5A;

  /* -------- SEMANTIC COLOR ROLES -------- */
  --bg:           var(--sand-100);   /* default page background */
  --bg-elevated:  var(--sand-50);    /* cards, sheets */
  --bg-inset:     var(--sand-200);   /* sunken wells, inputs */
  --bg-dark:      var(--tide-700);   /* dark section background */

  --fg:           var(--tide-700);   /* body text on cream */
  --fg-muted:     var(--tide-500);   /* secondary text, captions */
  --fg-soft:      var(--tide-300);   /* tertiary, icons, dividers text */
  --fg-on-dark:   var(--sand-100);   /* body on dark bg */
  --fg-inverse:   var(--sand-50);    /* on brand-filled button */

  --brand:        var(--tide-300);   /* the canonical dusty blue */
  --brand-ink:    var(--tide-600);   /* a darker, text-safe brand */
  --brand-wash:   var(--sand-200);   /* cream wash */

  --border:       color-mix(in srgb, var(--tide-300) 40%, transparent);
  --border-strong:var(--tide-400);
  --divider:      color-mix(in srgb, var(--tide-500) 18%, transparent);

  /* -------- TYPE FAMILIES -------- */
  --font-display: "Fraunces", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-serif:   "Cormorant Garamond", "Fraunces", Georgia, serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Display: Fraunces with a specific opsz + slight soft axis for the
     gentle, wavy terminals you see in the wordmark. */
  --display-settings: "opsz" 144, "SOFT" 50;
  --serif-settings:   "opsz" 36,  "SOFT" 30;

  /* -------- TYPE SCALE -------- */
  /* Steps borrow the natural, slightly-irregular rhythm of handset type */
  --step--2: 0.75rem;   /* 12 — eyebrows, meta */
  --step--1: 0.875rem;  /* 14 — small body */
  --step-0:  1rem;      /* 16 — body */
  --step-1:  1.125rem;  /* 18 — large body */
  --step-2:  1.375rem;  /* 22 — lede */
  --step-3:  1.75rem;   /* 28 — h4 */
  --step-4:  2.25rem;   /* 36 — h3 */
  --step-5:  3rem;      /* 48 — h2 */
  --step-6:  4rem;      /* 64 — h1 */
  --step-7:  5.5rem;    /* 88 — display */
  --step-8:  7.5rem;    /* 120 — hero display */

  /* -------- SPACING (4pt grid, generous at top end) -------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 — large section gutters */

  /* -------- RADII (soft, never pill-y except for tags) -------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;     /* default card/button */
  --radius-lg: 14px;    /* large card */
  --radius-xl: 24px;    /* hero tiles */
  --radius-pill: 999px; /* tags, chips */

  /* -------- SHADOWS (low, warm, soft — never glossy) -------- */
  --shadow-xs: 0 1px 2px rgba(74, 58, 36, 0.06);
  --shadow-sm: 0 2px 6px rgba(74, 58, 36, 0.07), 0 1px 2px rgba(74, 58, 36, 0.05);
  --shadow-md: 0 8px 24px rgba(74, 58, 36, 0.08), 0 2px 6px rgba(74, 58, 36, 0.05);
  --shadow-lg: 0 24px 48px rgba(74, 58, 36, 0.10), 0 4px 12px rgba(74, 58, 36, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(74, 58, 36, 0.08);

  /* -------- MOTION -------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1.0);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1.0);
  --ease-tide:   cubic-bezier(0.33, 0.0, 0.15, 1.0);  /* slow, settling */
  --dur-fast:    140ms;
  --dur-base:    260ms;
  --dur-slow:    520ms;
  --dur-tide:    900ms;                                /* for section reveals */
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   Use these on raw HTML or mirror them to design tokens.
   ============================================================= */

html { color: var(--fg); background: var(--bg); }

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — oversized serifs, low-contrast weight.
   Always lowercase for brand voice, following the wordmark. */
.display,
h1 {
  font-family: var(--font-display);
  font-variation-settings: var(--display-settings);
  font-weight: 400;
  font-size: var(--step-6);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--tide-600);
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  font-variation-settings: var(--serif-settings);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--tide-600);
  text-wrap: balance;
}

h3 {
  font-family: var(--font-display);
  font-variation-settings: var(--serif-settings);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--tide-600);
}

h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tide-700);
}

h5 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.3;
  color: var(--tide-700);
}

/* Eyebrow — tracked, small caps, uppercase. The wordmark uses this
   treatment for the "RAISED BY THE COAST" tagline. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tide-400);
}

.tagline {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tide-400);
}

/* Lede — large intro paragraph */
.lede, p.lede {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.5;
  color: var(--tide-600);
  letter-spacing: -0.005em;
}

p {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--fg);
  max-width: 68ch;
}

small, .caption {
  font-size: var(--step--1);
  color: var(--fg-muted);
  line-height: 1.5;
}

a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--brand-ink) 35%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }

strong { font-weight: 600; color: var(--tide-700); }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--tide-700);
}

hr {
  border: 0;
  height: 1px;
  background: var(--divider);
  margin: var(--space-7) 0;
}

::selection { background: var(--tide-200); color: var(--tide-800); }