/* =====================================================================
   The Vacation Aesthetic — Design Tokens
   Sampled directly from the book cover (Daleesa Curet)
   ===================================================================== */

/* ---------- Brand fonts (originals from the cover) ---------- */
@font-face {
  font-family: "The Seasons";
  src: url("fonts/TheSeasons.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Signature";
  src: url("fonts/Signature.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  /* ---------- Color: Sand & Cream Palette (sampled from cover) ---------- */
  --va-cream:        #f5e9db;  /* primary background */
  --va-cream-warm:   #f0e3d2;  /* slightly deeper cream */
  --va-shell:        #ece0cd;  /* subtle card surface */
  --va-palm-pale:    #e4dac8;  /* palm frond highlight */
  --va-sand:         #d4c9bd;  /* mid neutral, dividers */
  --va-driftwood:    #a49c8f;  /* secondary text, soft borders */
  --va-clay:         #6e6258;  /* muted body text alt */
  --va-ink:          #3a3330;  /* primary text — sampled from cover type */
  --va-ink-soft:     #4d4441;

  /* Accent — pulled from the palm frond */
  --va-palm-sage:    #b9b08a;  /* botanical accent */
  --va-palm-deep:    #8a8463;
  --va-coral-soft:   #d9a48a;  /* sunset accent (low-saturation) */
  --va-sky-soft:     #b9c7c9;  /* sea-glass accent */

  /* Semantic foreground / background */
  --fg-1: var(--va-ink);
  --fg-2: var(--va-clay);
  --fg-3: var(--va-driftwood);
  --bg-1: var(--va-cream);
  --bg-2: var(--va-cream-warm);
  --bg-3: var(--va-shell);
  --line-1: rgba(58, 51, 48, 0.12);
  --line-2: rgba(58, 51, 48, 0.22);

  /* ---------- Typography ---------- */
  /* Display serif — the original cover font, used for nearly everything */
  --font-display: "The Seasons", Georgia, serif;
  --font-display-sc: "The Seasons", Georgia, serif; /* same family; set tracking + uppercase manually */
  /* Script — the original cover script, reserved for 1–2 hero words */
  --font-script: "Signature", "Allura", cursive;
  /* Body — also The Seasons. The serif carries paragraphs, captions, and UI labels. */
  --font-body: "The Seasons", Georgia, serif;
  /* Mono — system fallback for the rare code/token display */
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --tracking-wide: 0.18em;     /* small caps subtitles */
  --tracking-mid:  0.06em;
  --tracking-tight: -0.01em;

  /* Type scale (rem-based) */
  --t-display:    clamp(3.5rem, 7vw, 6rem);
  --t-h1:         clamp(2.5rem, 4.5vw, 4rem);
  --t-h2:         2.25rem;
  --t-h3:         1.5rem;
  --t-h4:         1.125rem;
  --t-body:       1rem;
  --t-small:      0.875rem;
  --t-eyebrow:    0.75rem;

  /* ---------- Spacing (8pt base, generous beach breathing room) ---------- */
  --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: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadow (very soft, sun-through-curtains) ---------- */
  --shadow-1: 0 1px 2px rgba(58, 51, 48, 0.06);
  --shadow-2: 0 6px 24px -8px rgba(58, 51, 48, 0.14);
  --shadow-3: 0 24px 60px -20px rgba(58, 51, 48, 0.18);
  --inset-line: inset 0 0 0 1px var(--line-1);
}

/* =====================================================================
   Semantic element styles
   ===================================================================== */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.va-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display);
  letter-spacing: var(--tracking-tight);
  line-height: 1.02;
  color: var(--fg-1);
}

.va-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 0.95;
  color: var(--fg-1);
}

.va-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h1); letter-spacing: var(--tracking-tight); line-height: 1.05; }
.va-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h2); line-height: 1.15; }
.va-h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); line-height: 1.25; }
.va-h4 { font-family: var(--font-body);    font-weight: 500; font-size: var(--t-h4); }

.va-eyebrow {
  font-family: var(--font-display-sc);
  font-weight: 400;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

.va-subtitle {
  font-family: var(--font-display-sc);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-1);
}

.va-body { font-family: var(--font-body); font-size: var(--t-body); color: var(--fg-1); }
.va-small { font-family: var(--font-body); font-size: var(--t-small); color: var(--fg-2); }
.va-caption { font-family: var(--font-display); font-style: italic; color: var(--fg-2); }

/* Surfaces */
.va-card {
  background: var(--bg-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), var(--inset-line);
  padding: var(--s-6);
}

/* Buttons */
.va-btn {
  font-family: var(--font-display-sc);
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  border: 1px solid var(--va-ink);
  background: var(--va-ink);
  color: var(--va-cream);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.va-btn:hover { background: var(--va-ink-soft); }
.va-btn:active { transform: translateY(1px); }

.va-btn-ghost {
  background: transparent;
  color: var(--va-ink);
}
.va-btn-ghost:hover { background: rgba(58,51,48,0.06); }