/* VacationOS — Exuma 2026 Showcase
   base.css — tokens, reset, typography */

:root {
  /* Exuma palette, sampled from the Living World and approved captures */
  --sky-high: #4d8fc9;
  --sky-low: #7fb4d6;
  --haze: #cfe3ec;
  --aqua: #3ec6c9;
  --lagoon: #2f9aa4;
  --deep: #17444d;
  --deep-night: #0e2b33;
  --storm: #5e8794;
  --golden: #f2b26b;
  --blue-hour: #31506e;

  --cream: #f7f4ec;
  --cream-dim: #efe9dc;
  --ink: #14232b;
  --ink-soft: #3c5560;
  --ink-faint: #5a7280; /* >= 4.5:1 on cream for small text */
  --line: rgba(20, 35, 43, 0.12);

  --serif: "New York", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-pad: clamp(5rem, 14vh, 10rem);

  --device-radius: 11.5%;
  --shadow-device:
    0 2px 6px rgba(14, 43, 51, 0.10),
    0 18px 48px rgba(14, 43, 51, 0.22),
    0 60px 120px rgba(14, 43, 51, 0.18);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.55vw + 0.9rem, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- typography ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}

p {
  margin: 0;
  max-width: var(--measure);
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.45;
  color: var(--ink-soft);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}

.footnote {
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.on-dark h2,
.on-dark h3 { color: var(--cream); }
.on-dark p { color: rgba(247, 244, 236, 0.82); }
.on-dark .eyebrow { color: rgba(247, 244, 236, 0.7); }
.on-dark .footnote { color: rgba(247, 244, 236, 0.66); }

/* ---------- accessibility ---------- */

.skip-link {
  position: absolute;
  top: -3.5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 160ms ease;
}

.skip-link:focus-visible {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--lagoon);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}