/* ============================================================
   YachtDeals Design System — Colors & Type
   ============================================================
   Palette inspired by the French Riviera: deep nautical navy,
   warm editorial ivory, polished brass accents, and Mediterranean
   sea blue. Typography pairs a high-contrast Didone-style display
   serif (echoing the wordmark) with a clean humanist sans.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand Core ---------- */
  --brand-navy:        #0B2545;   /* primary — deep Mediterranean night */
  --brand-navy-deep:   #06162C;   /* for full-bleed hero / footer */
  --brand-ivory:       #F6F1E7;   /* editorial off-white, warm */
  --brand-sand:        #E8DEC9;   /* subtle secondary surface */
  --brand-brass:       #B08D57;   /* signature gold / brass accent */
  --brand-brass-bright:#C9A56A;   /* hover / highlight brass */
  --brand-sea:         #3A6EA5;   /* Côte d'Azur daylight blue */
  --brand-sea-light:   #7FA7CC;   /* sky / mist */
  --brand-ink:         #0A0A0A;   /* wordmark black */

  /* ---------- Neutrals (warm-cool balanced) ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF7F1;
  --neutral-100: #F1ECE2;
  --neutral-200: #E2DBCD;
  --neutral-300: #C9C1B1;
  --neutral-400: #9A9283;
  --neutral-500: #6E685D;
  --neutral-600: #4B463E;
  --neutral-700: #2E2A24;
  --neutral-800: #1A1713;
  --neutral-900: #0E0C0A;

  /* ---------- Semantic Foreground / Background ---------- */
  --fg-1:        var(--neutral-900);   /* primary text on light */
  --fg-2:        var(--neutral-700);   /* secondary text */
  --fg-3:        var(--neutral-500);   /* tertiary / captions */
  --fg-inverse:  var(--brand-ivory);   /* text on dark */
  --fg-muted-inverse: rgba(246, 241, 231, 0.72);

  --bg-1:        var(--brand-ivory);   /* page default */
  --bg-2:        var(--neutral-0);     /* cards / surfaces */
  --bg-3:        var(--neutral-100);   /* sunk / hover surface */
  --bg-dark:     var(--brand-navy);
  --bg-dark-deep:var(--brand-navy-deep);

  --border-1:    rgba(11, 37, 69, 0.12);
  --border-2:    rgba(11, 37, 69, 0.22);
  --border-strong: rgba(11, 37, 69, 0.55);
  --border-on-dark: rgba(246, 241, 231, 0.18);

  --accent:      var(--brand-brass);
  --accent-hover:var(--brand-brass-bright);
  --link:        var(--brand-navy);
  --link-hover:  var(--brand-brass);

  /* ---------- Status ---------- */
  --success: #2F6B4F;
  --warning: #B07A1F;
  --danger:  #9B2B2B;
  --info:    var(--brand-sea);

  /* ---------- Type Scale & Families ---------- */
  --font-display: 'Playfair Display', 'Didot', 'Bodoni 72', 'Times New Roman', serif;
  --font-serif:   'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  --font-sans:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Modular scale — generous editorial rhythm */
  --fs-hero:   clamp(56px, 8vw, 120px);
  --fs-h1:     clamp(40px, 5vw, 72px);
  --fs-h2:     clamp(30px, 3.4vw, 48px);
  --fs-h3:     clamp(22px, 2.2vw, 30px);
  --fs-h4:     20px;
  --fs-eyebrow:12px;
  --fs-lg:     18px;
  --fs-base:   16px;
  --fs-sm:     14px;
  --fs-xs:     12px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.22em;   /* eyebrows / small caps labels */

  /* ---------- Spacing ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;

  /* ---------- Radii ---------- */
  --radius-0:  0;            /* default — editorial / architectural */
  --radius-1:  2px;
  --radius-2:  4px;
  --radius-3:  8px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(11, 37, 69, 0.06), 0 1px 3px rgba(11, 37, 69, 0.08);
  --shadow-2: 0 4px 12px rgba(11, 37, 69, 0.08), 0 2px 4px rgba(11, 37, 69, 0.06);
  --shadow-3: 0 12px 32px rgba(11, 37, 69, 0.14), 0 4px 8px rgba(11, 37, 69, 0.08);
  --shadow-float: 0 24px 60px rgba(11, 37, 69, 0.22);
  --shadow-inset: inset 0 0 0 1px rgba(11, 37, 69, 0.12);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---------- Layout ---------- */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1360px;
  --gutter:           clamp(20px, 4vw, 56px);
}

/* ============================================================
   Base element styling — semantic defaults
   ============================================================ */

html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); }
body { font: 400 var(--fs-base)/var(--lh-normal) var(--font-sans); color: var(--fg-1); -webkit-font-smoothing: antialiased; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--fs-h1); font-weight: 500; line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: 500; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; margin: 0; }

/* Hero — display style, often italic like "Deals" in the wordmark */
.display-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.display-hero em, .display-hero .italic {
  font-style: italic;
  font-weight: 500;
}

/* Eyebrow — small caps label, brass color typical */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-brass);
}

/* Body variants */
p { margin: 0 0 var(--space-4); color: var(--fg-2); line-height: var(--lh-loose); text-wrap: pretty; }
.lede { font-family: var(--font-serif); font-size: var(--fs-lg); font-style: italic; color: var(--fg-1); line-height: var(--lh-normal); }

small, .small { font-size: var(--fs-sm); color: var(--fg-3); }
.caption { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); }

a { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--link-hover); }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--space-7) 0; }

/* Utility — thin divider with brass center (editorial motif) */
.rule-ornament {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--brand-brass);
}
.rule-ornament::before, .rule-ornament::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: .6;
}