/* Design tokens — single source of truth for the visual system.
   A design pass should mostly happen in this file.

   Palette: "Quiet Shore" — pulled from the family's own trip photography
   (Gulf Coast dunes, Keys shoreline at golden hour, out-island palms).
   Muted gulf teal and pale seafoam water, cream sand, sage palmetto
   green, weathered boardwalk wood, golden-hour amber. Low saturation,
   high calm; luxury via restraint. Real beach photography
   (site/assets/photos/) carries the theme; SVG scenes are retired to
   fallbacks. */

/* Playfair Display — self-hosted variable font (SIL OFL 1.1, license at
   /assets/fonts/OFL.txt). Subsets and unicode-ranges mirror the Google
   Fonts API; files live in /assets/fonts/ (no external font requests). */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Color — gulf water / seafoam */
  --color-ink: #2e3a37;          /* driftwood ink: footer, scrims, th */
  --color-ocean-deep: #35544f;   /* deep gulf teal */
  --color-ocean: #4e7f7a;        /* primary muted gulf teal */
  --color-sea: #9fc3be;          /* pale seafoam (decorative) */
  --color-sky-soft: #eaf1ee;     /* pale seafoam tint */

  /* Color — wood / golden hour */
  --color-coral: #d9a05f;        /* golden-hour amber (decorative only) */
  --color-coral-deep: #7a5a3a;   /* deep boardwalk wood: CTA-adjacent text */
  --color-amber: #a08363;        /* weathered boardwalk wood */
  --color-gold: #ecd9b8;         /* pale sun-bleached sand-gold */

  /* Color — sand neutrals */
  --color-bg: #faf7ee;           /* cream sand paper */
  --color-surface: #ffffff;      /* card surface */
  --color-sand: #efe7d3;         /* deeper cream-sand fill */
  --color-border: #e2d9c4;       /* sand border */

  /* Color — text */
  --color-text: #2f3b37;
  --color-muted: #5c6963;
  --color-on-dark: #f5f6f2;      /* text on ink/teal */
  --color-on-dark-muted: #c6cfc7;

  /* Color — CTA (solid, AA on white text: 6.3:1 / 8.2:1) */
  --color-cta: #7a5a3a;
  --color-cta-hover: #654a2f;

  /* Hairlines — quiet rules that replaced the gradient stripes */
  --hairline: rgba(46, 58, 55, 0.15);
  --hairline-on-dark: rgba(255, 255, 255, 0.16);

  /* Legacy aliases (older class rules read these) */
  --color-brand: #3f6f69;        /* link / interactive gulf teal */
  --color-brand-dark: #35544f;
  --color-brand-soft: #e7efec;
  --color-accent: #7a5a3a;
  /* Footer: pale sand — the warm side of the brand palette (the gold of
     the wordmark's "of", lightened so the band sits with the cream page).
     Alternatives: pale blue #dee8f5 (matches the benefits panel),
     driftwood ink #2e3a37 with #c6cfc7 text (original). */
  --color-footer-bg: #efe4d2;
  --color-footer-text: rgba(47, 59, 55, 0.85);

  /* Gradients — photo fallbacks only: hero bands paint these under the
     photograph so a slow or failed image load still shows shore colors.
     (grad-sunset / grad-card-line removed 2026-08: unreferenced legacy.) */
  --grad-ocean: linear-gradient(165deg, #2e3a37 0%, #4e7f7a 60%, #9fc3be 100%);
  --grad-dusk: linear-gradient(180deg, #c3d8d2 0%, #8fb6b1 55%, #4e7f7a 100%);

  /* Type — Playfair Display everywhere (self-hosted, see @font-face
     above); mono retained solely for math/formula readouts that need
     character alignment. Sizes sit ~5% above the old sans scale and
     tracking is neutral: Playfair is a high-contrast serif, so the
     negative letter-spacing the heavy sans wanted would cramp it. */
  --font-sans: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.9rem;
  --text-base: 1.05rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-title: clamp(2.2rem, 4.5vw + 0.6rem, 3.3rem);        /* page h1 */
  --text-display: clamp(2.7rem, 6.5vw + 0.6rem, 4.9rem);      /* hero h1 */
  --leading-body: 1.7;
  --leading-tight: 1.18;

  /* Card typography — cards are components, not documents: title sits
     between text-base and text-lg, body drops below base, label is a
     compact uppercase pill. Tuned for Playfair's small x-height. */
  --text-card-title: 1.3rem;
  --text-card-body: 0.95rem;
  --text-card-label: 0.7rem;
  --leading-card-body: 1.6;
  --track-wide: 0.14em;          /* eyebrow / label letter-spacing (serif caps need less air than the old sans) */
  --track-display: -0.005em;     /* display headline: Playfair needs near-neutral tracking */
  --measure: 42rem;              /* comfortable body measure (~65–70ch) */

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --max-width: 70rem;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(46, 58, 55, 0.07), 0 2px 6px rgba(46, 58, 55, 0.05);
  --shadow: 0 1px 2px rgba(46, 58, 55, 0.08), 0 6px 16px rgba(46, 58, 55, 0.08),
    0 16px 40px rgba(46, 58, 55, 0.07);
  --shadow-lg: 0 2px 4px rgba(46, 58, 55, 0.1), 0 14px 34px rgba(46, 58, 55, 0.14),
    0 32px 72px rgba(46, 58, 55, 0.16);
  --shadow-coral: 0 2px 8px rgba(101, 74, 47, 0.22), 0 8px 20px rgba(101, 74, 47, 0.12);
  --shadow-legacy: var(--shadow-sm);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
  --dur: 220ms;
  --dur-slow: 600ms;
}