/* ============================================================
   MS JOURNEY — Design Tokens
   Mentoria premium • Larissa Otolini
   Estética: editorial, feminina, luxuosa
   ============================================================ */

/* --- Webfonts (Google Fonts) ----------------------------------
   These are the substitution stack for an MS Journey-style identity:
   - Display serif:    Cormorant Garamond  (editorial fashion serif)
   - Body sans:        Montserrat          (clean, premium)
   - Script accent:    Pinyon Script       (very sparing, key phrases)
   If/when proper licensed brand fonts are received, swap the @import
   line and update the --font-* vars. Nothing else needs to change.
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Montserrat:wght@300;400;500;600;700&family=Pinyon+Script&display=swap');

:root {
  /* ---------- BRAND PALETTE ---------- */
  --c-noir:        #1A1A1A;  /* primary — black, used on hero + impact sections */
  --c-noir-soft:   #232323;  /* slightly lifted black for layered dark surfaces */
  --c-taupe:       #7A5C47;  /* secondary — warm brown, body accents */
  --c-taupe-deep:  #5E4636;  /* hover / pressed taupe */
  --c-champagne:   #D4C4B0;  /* warm highlight — used on dark bg */
  --c-champagne-soft: #E5DACA; /* lighter champagne for subtle fills */
  --c-cream:       #FAF8F5;  /* off-white background */
  --c-cream-warm:  #F2EDE5;  /* slightly warmer card / panel surface */
  --c-gray-mid:    #6B6B6B;  /* secondary text on light bg */
  --c-gray-line:   #DAD3C9;  /* hairline dividers on light bg */
  --c-gray-line-dark: #2E2A26; /* hairline dividers on dark bg */
  --c-gold:        #C4A265;  /* premium accent — gold (use sparingly) */
  --c-gold-bright: #D8B97C;  /* hover gold */

  /* ---------- SEMANTIC — LIGHT SURFACE ---------- */
  --bg:            var(--c-cream);
  --bg-alt:        var(--c-cream-warm);
  --bg-card:       #FFFFFF;
  --fg:            var(--c-noir);
  --fg-muted:      var(--c-gray-mid);
  --fg-subtle:     #9A9286;
  --border:        var(--c-gray-line);
  --accent:        var(--c-taupe);
  --accent-warm:   var(--c-champagne);
  --accent-gold:   var(--c-gold);

  /* ---------- SEMANTIC — DARK SURFACE ---------- */
  --bg-dark:       var(--c-noir);
  --bg-dark-alt:   var(--c-noir-soft);
  --fg-dark:       var(--c-cream);
  --fg-dark-muted: var(--c-champagne);
  --fg-dark-subtle: #8A8275;
  --border-dark:   var(--c-gray-line-dark);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display:  'Cormorant Garamond', 'EB Garamond', 'Playfair Display', Georgia, serif;
  --font-body:     'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-script:   'Pinyon Script', 'Great Vibes', cursive;

  /* ---------- TYPE SCALE (fluid where useful) ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    clamp(24px, 2.4vw, 28px);
  --fs-2xl:   clamp(30px, 3.2vw, 38px);
  --fs-3xl:   clamp(38px, 4.4vw, 56px);
  --fs-4xl:   clamp(48px, 6.4vw, 84px);
  --fs-5xl:   clamp(64px, 9vw, 124px);

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-base:   1.55;
  --lh-loose:  1.75;

  --ls-tight:   -0.02em;
  --ls-display: -0.015em;
  --ls-base:    0;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.22em;

  /* ---------- SPACING (8pt-ish, generous editorial) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* ---------- RADII ---------- */
  --r-none:  0;
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    16px;
  --r-pill:  999px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-sm:  0 1px 2px rgba(26,26,26,0.06), 0 2px 6px rgba(26,26,26,0.04);
  --shadow-md:  0 4px 14px rgba(26,26,26,0.08), 0 12px 28px rgba(26,26,26,0.06);
  --shadow-lg:  0 10px 30px rgba(26,26,26,0.10), 0 24px 60px rgba(26,26,26,0.10);
  --shadow-gold: 0 4px 24px rgba(196,162,101,0.25);
  --shadow-photo: 0 30px 80px -20px rgba(26,26,26,0.45), 0 12px 28px rgba(26,26,26,0.18);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 0.65, 0);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 480ms;
  --dur-4: 720ms;

  /* ---------- LAYOUT ---------- */
  --container:    1200px;
  --container-sm: 720px;
  --gutter:       clamp(20px, 4vw, 40px);
}

/* ============================================================
   BASE ELEMENTS
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg);
  text-wrap: pretty;
}

.body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
}

.eyebrow--gold { color: var(--accent-gold); }

.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--accent);
}

.script--champagne { color: var(--c-champagne); }
.script--gold      { color: var(--accent-gold); }

.lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
}

a { color: inherit; text-decoration: none; }

/* ============================================================
   UTILITY HELPERS
   ============================================================ */
.bg-noir   { background: var(--bg-dark); color: var(--fg-dark); }
.bg-cream  { background: var(--bg);      color: var(--fg); }
.bg-warm   { background: var(--bg-alt);  color: var(--fg); }

.rule {
  height: 1px;
  background: var(--border);
  border: 0;
}
.bg-noir .rule { background: var(--border-dark); }
.rule--gold { background: var(--accent-gold); }

.hairline {
  display: inline-block;
  height: 1px;
  width: 48px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 12px;
  opacity: 0.7;
}