/* ═══════════════════════════════════════════
   Sommplicity Design System
   ═══════════════════════════════════════════
   Fonts: Playfair Display (display), Cormorant Garamond (subhead), DM Sans (body)
   Colors: Burgundy #722F37 (action), Gold #C9A961 (decorative), Cream #F5F1E8 (bg)
   Type scale: hero 2rem, section 1.5rem, card 1.1rem, body 0.95rem, caption 0.82rem, label 0.7rem
   Buttons: btn-primary (burgundy solid), btn-secondary (outlined), btn-tertiary (text link)
*/

/* ═══════════════════════════════════════════
   Google Fonts — loaded via <link> in HTML for performance
   Playfair Display · Cormorant Garamond · DM Sans
   All use font-display: swap via the &display=swap URL parameter
════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   Design Tokens
════════════════════════════════════════════ */
/* Breakpoints (reference only — CSS custom properties can't be used in media queries) */
/* --bp-mobile: 480px; --bp-tablet: 768px; --bp-desktop: 1024px; */

:root {
  /* ── Typography ── */
  --font-display: "Playfair Display", Georgia, serif;
  --font-subhead: "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Type Scale ── */
  --text-hero: 2rem;
  --text-section: 1.5rem;
  --text-card: 1.1rem;
  --text-body: 0.95rem;
  --text-caption: 0.82rem;
  --text-label: 0.7rem;

  /* ── Premium Dark — warm undertone near-black ── */
  --ink:          #1A1A1A;
  --ink-mid:      #3D3D3D;
  --ink-light:    #4A4A4A;
  --ink-xlight:   #6B6B6B;

  /* ── Wine Red / Burgundy — deep accent ── */
  --maroon:       #722F37;
  --maroon-mid:   #8B3A44;
  --maroon-light: #B06070;

  /* ── Navy — classic secondary ── */
  --navy:         #1C2E50;

  /* ── Luxury Gold — warm, muted ── */
  --gold:         #C9A961;
  --gold-mid:     #B8963E;
  --gold-light:   #D4B872;
  --gold-pale:    #E2CC8E;
  --gold-faint:   #F0E5CD;

  /* ── Warm Cream & Off-White — never pure white ── */
  --cream:        #F5F1E8;
  --cream-mid:    #EDE8DC;
  --cream-dark:   #DED8CA;
  --white:        #F9F7F4;

  /* ── Extended palette ── */
  --burgundy: var(--maroon);
  --burgundy-dark: #5A252C;
  --burgundy-muted: #9A5A61;
  --gold-soft: #E5D5A8;
  --parchment: #F9F7F4;
  --ink-muted: #6B6B6B;

  /* ── Dark premium backgrounds ── */
  --dark-bg:      #1A1A1A;

  /* ── Semantic ── */
  --header-height: 64px;
  --border:        rgba(114,47,55,0.18);
  --border-ink:    rgba(26,26,26,0.10);

  /* Shadows — warm-tinted */
  --shadow-sm:  0 2px 8px rgba(26,26,26,0.06);
  --shadow-md:  0 4px 20px rgba(26,26,26,0.10);
  --shadow-lg:  0 8px 40px rgba(26,26,26,0.14);

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --transition: 0.2s ease;
}

/* ═══════════════════════════════════════════
   Reset & Base — Luxury Typography System
════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, var(--text-hero));
  font-weight: 400;
  color: var(--maroon);
  letter-spacing: 0.05em;
  line-height: 1.15;
}
h2 {
  font-family: var(--font-subhead);
  font-size: var(--text-section);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.03em;
}
h3 {
  font-family: var(--font-subhead);
  font-size: var(--text-card);
  font-weight: 500;
  color: var(--ink-mid);
  letter-spacing: 0.02em;
}
p  { line-height: 1.7; color: var(--ink-light); font-size: var(--text-body); }
ul { list-style: none; }

/* Accent/quote typography */
blockquote, .quote-text {
  font-family: var(--font-subhead);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--ink-mid);
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  transition: var(--transition);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--maroon, #722F37);
  outline-offset: 2px;