/* ============================================================
   SWELL DESIGN SYSTEM — Colors & Type
   Premium water sport retreats, Cabarete, Dominican Republic.
   ============================================================ */

/* ---- Fonts ---- */
/* Instrument Serif       — editorial display, boutique-retreat luxe   */
/* Jost                   — humanist geometric sans for body, nav, footer */
/* Tenor Sans             — sleek wordmark font for "Swell"              */
/* Italiana               — high-contrast display serif (alt)            */
/* Cormorant Garamond     — italic serif for secondary display           */
/* DM Serif Display      — high-contrast editorial italic for "escape"   */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Jost:ital,wght@0,300..700;1,300..700&family=Tenor+Sans&family=Italiana&family=Cormorant+Garamond:ital,wght@1,300;1,400;0,300;0,400&family=Allura&family=Mrs+Saint+Delafield&family=Italianno&family=DM+Serif+Display:ital@1&display=swap');

:root {
  /* ---------- COLOR — Base palette ---------- */

  /* Teals — the brand's anchor. Drawn from caribbean shallow water.
     Use --teal-500 as the primary brand color. */
  --teal-50:  #ecf8f7;
  --teal-100: #d3efee;
  --teal-200: #a6dedd;
  --teal-300: #6ec7c6;
  --teal-400: #3aaeae;
  --teal-500: #0f9a9a;   /* PRIMARY BRAND */
  --teal-600: #0a7d7e;
  --teal-700: #0a6364;
  --teal-800: #0c4a4c;
  --teal-900: #0d3537;

  /* Ocean — deep navy/blue-green for grounding and over-water text */
  --ocean-300: #4a8190;
  --ocean-500: #1f4f5f;
  --ocean-700: #0e3242;
  --ocean-900: #061d28;

  /* Sand — warm cream/beach neutrals. Page backgrounds, soft surfaces. */
  --sand-50:  #fdfbf7;
  --sand-100: #f7f1e6;
  --sand-200: #efe5d1;
  --sand-300: #e3d3b3;
  --sand-400: #c9b48b;
  --sand-500: #a8916a;
  --sand-600: #7b6a4f;

  /* Coral / Sun — vibrant accent (rashguards, wings). Use sparingly. */
  --coral-400: #ff8b6a;
  --coral-500: #ee6a47;   /* primary accent */
  --coral-600: #d4502e;
  --sun-400:   #f4c14a;
  --sun-500:   #e6a52c;

  /* Ink — neutral text greys, biased slightly cool */
  --ink-900: #0a1f24;
  --ink-700: #2a4046;
  --ink-500: #56707a;
  --ink-400: #8a9da3;
  --ink-300: #c2cdd0;
  --ink-200: #e2e7e8;
  --ink-100: #f0f3f3;
  --white:   #ffffff;

  /* Semantic */
  --success: #2f9460;
  --warning: #e6a52c;
  --danger:  #d4502e;

  /* ---------- COLOR — Semantic foreground / background ---------- */
  --bg:           var(--sand-50);
  --bg-elevated: #ffffff;
  --bg-muted:    var(--sand-100);
  --bg-inverse:  var(--ocean-900);
  --bg-brand:    var(--teal-500);

  --fg:          var(--ink-900);     /* primary body text */
  --fg-muted:    var(--ink-500);     /* secondary text   */
  --fg-subtle:   var(--ink-400);     /* tertiary text    */
  --fg-on-brand: #ffffff;
  --fg-on-dark:  var(--sand-50);
  --fg-brand:    var(--teal-600);
  --fg-accent:   var(--coral-500);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-on-dark: rgba(255,255,255,0.18);

  /* ---------- TYPE — Families ---------- */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-logo:    'Tenor Sans', 'Optima', 'Avenir Next', serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE — Scale (fluid-friendly base) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  120px;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- RADII ---------- */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS — soft, sun-on-water feel ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 31, 36, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 31, 36, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 31, 36, 0.10);
  --shadow-lg: 0 20px 48px rgba(10, 31, 36, 0.16);
  --shadow-xl: 0 32px 80px rgba(10, 31, 36, 0.22);
  /* glow when over teal imagery */
  --shadow-teal: 0 12px 32px rgba(15, 154, 154, 0.30);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* default — slight overshoot off */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-swell:  cubic-bezier(0.4, 0, 0.2, 1);    /* gentle, water-like */
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --dur-cinematic: 1200ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ---------- SECTION-LINKING gradients ----------
     These are the seam colors that knit one section to the next.
     Use them as the FIRST/LAST stop of a background-gradient so
     adjacent sections share a horizon. */
  --seam-sky-to-water:   linear-gradient(180deg, #cfe9ee 0%, var(--teal-400) 100%);
  --seam-water-to-deep:  linear-gradient(180deg, var(--teal-500) 0%, var(--ocean-700) 100%);
  --seam-deep-to-sand:   linear-gradient(180deg, var(--ocean-700) 0%, var(--sand-100) 100%);
  --seam-sand-to-water:  linear-gradient(180deg, var(--sand-100) 0%, var(--teal-300) 100%);
}

/* ============================================================
   SEMANTIC TYPE — paste into projects to get correct text styles
   ============================================================ */

.swell-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-brand);
}

.swell-h1, h1.swell {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, var(--text-5xl));
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.swell-h2, h2.swell {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, var(--text-3xl));
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--fg);
}

.swell-h3, h3.swell {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.15;
  color: var(--fg);
}

.swell-h4, h4.swell {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--fg);
}

.swell-lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--fg-muted);
}

.swell-body, p.swell {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--fg);
  text-wrap: pretty;
}

.swell-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* italic display — used for emphasized words inline */
.swell-display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}