/* ============================================================
   Tweak Themes — mood / voice / portfolio-style
   Drive the whole feel from three data attrs on <html>:
     data-mood="blush|moody|botanical"
     data-voice="romantic|editorial|modern"
     data-folio="polaroid|moodboard|gallery"
   ============================================================ */

/* ---------- MOOD: palette rewire ---------- */

/* Default (blush) is already in enhanced.css / base.css — no override needed,
   but we redeclare with the selector so switching back to it undoes the others. */
html[data-mood="blush"]:root,
html[data-mood="blush"] {
  --color-bg:          #FAF6F3;
  --color-bg-warm:     #F3EAE4;
  --color-surface:     #FFFFFF;
  --color-surface-alt: #F5EEE9;
  --color-border:      #E5D9D1;
  --color-divider:     #EADFD7;
  --color-ink:         #2B1C1F;
  --color-text:        #3D2B2B;
  --color-text-muted:  #8A7070;
  --color-text-faint:  #BBA8A8;
  --color-primary:       #8B4A5E;
  --color-primary-hover: #6E3748;
  --color-primary-light: #F3E8EC;
  --color-gold:          #B08E5A;
  --color-star:          #B08E5A;
}

/* MOODY — deep burgundy/ink on bone with champagne gold */
html[data-mood="moody"] {
  --color-bg:          #1C1519;
  --color-bg-warm:     #241A1E;
  --color-surface:     #2A1F24;
  --color-surface-alt: #22181C;
  --color-border:      #3C2E34;
  --color-divider:     #3A2B31;
  --color-ink:         #F2E8DC;
  --color-text:        #E6D8C8;
  --color-text-muted:  #A18A84;
  --color-text-faint:  #6C5A58;
  --color-primary:       #D9A566;   /* champagne gold */
  --color-primary-hover: #E8B877;
  --color-primary-light: #3A2B26;
  --color-gold:          #D9A566;
  --color-star:          #D9A566;
}

/* BOTANICAL — terracotta + sage + cream, brighter & airier */
html[data-mood="botanical"] {
  --color-bg:          #FBF7EE;
  --color-bg-warm:     #EFE6D2;
  --color-surface:     #FFFDF6;
  --color-surface-alt: #F0E9D6;
  --color-border:      #D8CDB4;
  --color-divider:     #E2D8C2;
  --color-ink:         #2E3226;
  --color-text:        #3E4432;
  --color-text-muted:  #7A8268;
  --color-text-faint:  #B4B99E;
  --color-primary:       #B25A3C;   /* terracotta */
  --color-primary-hover: #914530;
  --color-primary-light: #F6E3D9;
  --color-gold:          #8B9670;   /* sage used as secondary accent */
  --color-star:          #B25A3C;
}

/* Moody adjustments — tone down paper textures & darken cards */
html[data-mood="moody"] .work-pinboard,
html[data-mood="moody"] .hero-pinboard {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(217,165,102,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(139,74,94,0.08) 0%, transparent 55%),
    linear-gradient(180deg, #241A1E 0%, #1C1519 100%);
  border-color: rgba(217,165,102,0.18);
}
html[data-mood="moody"] .work-pinboard::before {
  opacity: 0.35;
  mix-blend-mode: overlay;
}
html[data-mood="moody"] .site-header {
  background: rgba(28, 21, 25, 0.82) !important;
  border-bottom-color: rgba(217,165,102,0.18);
}
html[data-mood="moody"] .hero-bgword,
html[data-mood="botanical"] .hero-bgword {
  opacity: 0.5;
}
html[data-mood="moody"] .hero-marquee {
  background: #1C1519;
  border-color: rgba(217,165,102,0.18);
}
html[data-mood="moody"] .about-photo-wrap,
html[data-mood="moody"] img.logo-mark {
  filter: brightness(0.92) contrast(1.05);
}
html[data-mood="moody"] .btn-primary {
  color: #1C1519;
}
html[data-mood="moody"] .pin {
  background: #F2E8DC;
  box-shadow: 0 10px 24px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.4);
}

/* Botanical — swap warm pinboard paper for cream-parchment */
html[data-mood="botanical"] .work-pinboard,
html[data-mood="botanical"] .hero-pinboard {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(178,90,60,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 80%, rgba(139,150,112,0.1) 0%, transparent 55%),
    linear-gradient(180deg, #F0E9D6 0%, #E6DCC2 100%);
  border-color: rgba(139,150,112,0.3);
}

/* ---------- VOICE: display typography ---------- */

/* ROMANTIC (default) — no override needed */
html[data-voice="romantic"] {
  --font-display: 'Cormorant', 'Cormorant Garamond', 'Georgia', serif;
  --display-italic-style: italic;
  --display-weight: 300;
  --display-tracking: -0.01em;
}

/* EDITORIAL — Playfair Display, higher contrast, dramatic */
html[data-voice="editorial"] {
  --font-display: 'Playfair Display', 'Cormorant', 'Georgia', serif;
  --display-italic-style: italic;
  --display-weight: 400;
  --display-tracking: -0.02em;
}
html[data-voice="editorial"] .hero-title,
html[data-voice="editorial"] .section-h {
  font-weight: 500;
  letter-spacing: -0.025em;
}
html[data-voice="editorial"] .hero-title .italic,
html[data-voice="editorial"] .section-h em {
  font-weight: 400;
}

/* MODERN — Switzer caps display (sans-serif editorial, Aesop/Glossier territory) */
html[data-voice="modern"] {
  --font-display: 'Switzer', 'Helvetica Neue', sans-serif;
  --display-italic-style: normal;
  --display-weight: 300;
  --display-tracking: -0.03em;
}
html[data-voice="modern"] .hero-title,
html[data-voice="modern"] .section-h,
html[data-voice="modern"] .service-name,
html[data-voice="modern"] .about-sign-name,
html[data-voice="modern"] .logo-name {
  font-family: 'Switzer', 'Helvetica Neue', sans-serif;
  font-weight: 300;
  letter-spacing: -0.035em;
  text-transform: none;
}
html[data-voice="modern"] .hero-title .italic,
html[data-voice="modern"] .section-h em,
html[data-voice="modern"] .about-quote em {
  font-style: normal;
  font-weight: 500;
  color: var(--color-primary);
}
html[data-voice="modern"] .hero-title .amp {
  font-style: normal;
  font-weight: 300;
  opacity: 0.5;
}
html[data-voice="modern"] .about-quote,
html[data-voice="modern"] .hero-eyebrow {
  font-family: 'Switzer', sans-serif;
}
html[data-voice="modern"] .about-quote {
  font-style: normal;
  font-weight: 300;
}
html[data-voice="modern"] .hero-bgword {
  font-family: 'Switzer', sans-serif;
  font-style: normal;
  font-weight: 200;
  letter-spacing: -0.04em;
}

/* Editorial — amp it up visually */
html[data-voice="editorial"] .hero-bgword {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
}

/* Apply --font-display where it can filter through */
.hero-title,
.section-h,
.hero-bgword,
.about-quote,
.about-sign-name,
.service-name,
.pinboard-stamp-l1 {
  font-family: var(--font-display);
}

/* ---------- FOLIO: portfolio presentation style ---------- */

/* POLAROID (default) — already styled; re-declare for clean switching */
html[data-folio="polaroid"] .pin {
  border-radius: 0;
}

/* MOODBOARD — washi tape + tear, looser rotations */
html[data-folio="moodboard"] .pin {
  padding: 4px !important;
  background: var(--color-surface);
  border-radius: 2px;
  box-shadow: 0 14px 34px rgba(43,28,31,0.18), 0 4px 10px rgba(43,28,31,0.1);
}
html[data-folio="moodboard"] .pin::before {
  /* Washi tape — translucent crossed strip */
  content: "";
  position: absolute;
  top: -12px !important;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: 72px !important;
  height: 20px !important;
  border-radius: 1px !important;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.55) 0 2px,
    rgba(139,74,94,0.35) 2px 10px,
    rgba(255,255,255,0.55) 10px 12px
  ) !important;
  box-shadow: 0 2px 6px rgba(43,28,31,0.18) !important;
  opacity: 0.9;
}
html[data-folio="moodboard"] .pin-2::before {
  background: repeating-linear-gradient(
    -60deg,
    rgba(233,215,199,0.85) 0 6px,
    rgba(176,142,90,0.7) 6px 12px
  ) !important;
  transform: translateX(-50%) rotate(8deg) !important;
}
html[data-folio="moodboard"] .pin-4::before {
  background: linear-gradient(135deg, rgba(139,74,94,0.85), rgba(196,123,133,0.7)) !important;
  transform: translateX(-50%) rotate(-3deg) !important;
}
html[data-folio="moodboard"] .pin-5::before {
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.7) 0 4px,
    rgba(233,215,199,0.85) 4px 8px
  ) !important;
}
html[data-folio="moodboard"] .pin-6::before {
  background: linear-gradient(135deg, rgba(241,228,212,0.95), rgba(217,191,161,0.9)) !important;
  transform: translateX(-50%) rotate(5deg) !important;
}
/* Bigger, messier rotations */
html[data-folio="moodboard"] .pin-1 { transform: rotate(-4.5deg) !important; }
html[data-folio="moodboard"] .pin-2 { transform: rotate(3.8deg) translateY(6px) !important; }
html[data-folio="moodboard"] .pin-3 { transform: rotate(5.2deg) !important; }
html[data-folio="moodboard"] .pin-4 { transform: rotate(-5deg) !important; }
html[data-folio="moodboard"] .pin-5 { transform: rotate(4deg) !important; }
html[data-folio="moodboard"] .pin-6 { transform: rotate(-6deg) !important; }
html[data-folio="moodboard"] .hero-pinboard .pin-1 { transform: rotate(-3.5deg) !important; }
html[data-folio="moodboard"] .hero-pinboard .pin-2 { transform: rotate(2.5deg) translateY(10px) !important; }
html[data-folio="moodboard"] .hero-pinboard .pin-3 { transform: rotate(3.5deg) translateY(14px) !important; }
html[data-folio="moodboard"] .hero-pinboard .pin-4 { transform: rotate(-4deg) translateY(4px) !important; }
html[data-folio="moodboard"] .hero-pinboard .pin-5 { transform: rotate(4.2deg) !important; }
html[data-folio="moodboard"] .hero-pinboard .pin-6 { transform: rotate(-2.8deg) translateY(8px) !important; }

/* GALLERY — refined black frames, no rotation, museum wall */
html[data-folio="gallery"] .work-pinboard,
html[data-folio="gallery"] .hero-pinboard {
  background: var(--color-bg-warm) !important;
  border: 1px solid var(--color-border);
}
html[data-folio="gallery"] .work-pinboard::before {
  opacity: 0 !important;
}
html[data-folio="gallery"] .pin {
  padding: 14px 14px 14px !important;
  background: #141012;
  border: 1px solid #0A0708;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 12px 28px rgba(20,16,18,0.45),
    0 3px 6px rgba(20,16,18,0.3);
  border-radius: 1px;
  transform: none !important;
}
html[data-mood="moody"][data-folio="gallery"] .pin {
  background: #F2E8DC;
  border-color: #D9CFC2;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.08) inset,
    0 16px 32px rgba(0,0,0,0.6),
    0 4px 8px rgba(0,0,0,0.4);
}
html[data-folio="gallery"] .pin::before {
  display: none !important;
}
html[data-folio="gallery"] .pin::after {
  /* museum caption plate */
  content: "";
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 44%;
  height: 2px;
  background: var(--color-primary);
  opacity: 0.5;
}
html[data-folio="gallery"] .pin:hover {
  transform: translateY(-4px) !important;
}
html[data-folio="gallery"] .pinboard-stamp {
  display: none !important;
}

/* ---------- Moody palette: rescue low-contrast ink controls ---------- */
html[data-mood="moody"] .btn-ghost {
  color: var(--color-text);
  border-bottom-color: var(--color-text-muted);
}
html[data-mood="moody"] .btn-ghost:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
html[data-mood="moody"] .nav-cta {
  color: var(--color-ink);
  border-color: var(--color-text-muted);
}
html[data-mood="moody"] .nav-cta:hover {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}
html[data-mood="moody"] .header-nav-main a {
  color: var(--color-text);
}
html[data-mood="moody"] .header-socials a {
  color: var(--color-text-muted);
}
html[data-mood="moody"] .header-socials a:hover {
  color: var(--color-primary);
}

/* ---------- Snappier transitions while folio is flipping ---------- */
/* The .pin rotations use a 450ms+300ms-easing shorthand which feels sluggish
   when users toggle modes. Tighten it globally — hover transform still reads. */
.pin {
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1),
    z-index 0s 260ms !important;
}
.pin:hover {
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
    z-index 0s !important;
}
html[data-mood="moody"] .pinboard-stamp {
  background: rgba(28,21,25,0.8) !important;
  color: var(--color-primary) !important;
  border-color: rgba(217,165,102,0.4) !important;
}
html[data-mood="botanical"] .pinboard-stamp {
  background: rgba(251,247,238,0.85) !important;
  color: var(--color-primary) !important;
  border-color: rgba(178,90,60,0.3) !important;
}