/* ============================================================
   Sonans fashion theme — editorial overlay for the marketing site.
   Loaded after sonans-ai.webflow.css. Pure CSS, no HTML changes.
   ============================================================ */

/* --- Tokens: redefine the variables sonans-ai.webflow.css uses --- */
:root {
  --_colors---white: #F5F1E8;     /* cream (was: pure white) */
  --_colors---yellow: #E8DCC0;    /* champagne (was: #ffff78 neon) */
  --_colors---dark: #1A1A1A;      /* warm charcoal (was: #050506) */
  --_colors---purple: #A89684;    /* warm taupe (was: #8752fa electric) */
  --_fonts---sonans-font: "Cormorant Garamond", "Playfair Display", Georgia, serif; /* body (was: Funnel Sans) */

  --sf-cream: #F5F1E8;
  --sf-cream-soft: #FBF7EE;
  --sf-charcoal: #2A2A2A;
  --sf-charcoal-deep: #1A1A1A;
  --sf-taupe: #A89684;
  --sf-taupe-deep: #8C7A6A;
  --sf-champagne: #E8DCC0;
  --sf-rule: rgba(26, 26, 26, 0.10);
  --sf-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sf-body: "Cormorant Garamond", "Playfair Display", Georgia, serif;
}

/* --- Page background: drop dark + the two pattern BG images --- */
html,
body,
.body,
.body-2 {
  background-color: var(--sf-cream) !important;
  background-image: none !important;
  color: var(--sf-charcoal);
  font-family: var(--sf-body);
}

/* --- Headings: Playfair Display, charcoal, refined spacing --- */
h1, h2, h3, h4, h5, h6,
.hero-heading,
[class*="heading-"],
.clients-tag,
.individual-name,
.footer-text {
  font-family: var(--sf-serif);
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6,
.hero-heading,
[class*="heading-"],
.clients-tag {
  color: var(--sf-charcoal-deep);
  font-weight: 500;
}

/* --- Yellow-as-text → charcoal (champagne is invisible on cream) --- */
.heading-2.yellow,
.heading-2.yellow-bg,
.heading-19,
.heading-20,
.small-text.yellow,
.subheadeling,
.subheadeling.pricing,
.margin-bottom-24px-3,
[class*="yellow"]:not([class*="-bg"]):not(.yellow-button) {
  color: var(--sf-charcoal-deep) !important;
}

/* --- Body text & paragraphs: charcoal on cream --- */
body,
.body,
.body-2,
p,
.main-text,
.pricing-card-text,
.footer-text {
  color: var(--sf-charcoal);
}

/* Yellow-bg pill on body text → drop it entirely, just charcoal on cream */
.main-text.yellow-bg,
.heading-2.yellow-bg {
  background-color: transparent !important;
  color: var(--sf-charcoal) !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* The yellow-text accent span (used on hero subheading and learn-more h2) */
.text-span,
.text-span-2 {
  color: var(--sf-charcoal-deep) !important;
}

/* Inner button text — originally var(--_colors---dark), invisible on charcoal */
.button-text,
.button-text-2 {
  color: var(--sf-cream) !important;
}

/* Hero CTA inner text on taupe bg */
.button-text.purple,
.button-text-2.purple {
  color: var(--sf-cream) !important;
}

/* --- Navigation --- */
.nav-menu,
.nav-link,
.nav-link-2,
.nav-bar-link {
  font-family: var(--sf-serif);
  color: var(--sf-charcoal-deep);
}

.nav-bar-link:hover,
.nav-link:hover,
.nav-link-2:hover {
  color: var(--sf-taupe-deep);
}

/* --- Buttons: invert for proper contrast on cream --- */
.main-button,
.yellow-button,
.main-button-2 {
  background-color: var(--sf-charcoal-deep) !important;
  color: var(--sf-cream) !important;
  border: 1px solid var(--sf-charcoal-deep);
  font-family: var(--sf-body);
  letter-spacing: 0.02em;
}

.main-button:hover,
.yellow-button:hover,
.main-button-2:hover {
  background-color: var(--sf-taupe) !important;
  color: var(--sf-cream) !important;
  border-color: var(--sf-taupe);
}

.main-button.purple,
.main-button-2.purple,
.main-button.nav {
  background-color: var(--sf-taupe-deep) !important;
  color: var(--sf-cream) !important;
  border-color: var(--sf-taupe-deep);
}

/* Header CTA: match footer/hero CTA sizing (.nav otherwise compresses it) */
.main-button.nav {
  min-width: 100px !important;
  padding: 10px 16px 10px 20px !important;
  font-weight: 400 !important;
  font-family: var(--sf-body);
}

/* The header's inner .button-text has min-width: 200px; footer's .button-text.purple
   has min-width: auto. Force the header to shrink-to-fit like the footer. */
.main-button.nav .button-text {
  min-width: auto !important;
  max-width: none !important;
}

.main-button.purple:hover,
.main-button-2.purple:hover {
  background-color: var(--sf-charcoal-deep) !important;
  color: var(--sf-cream) !important;
  border-color: var(--sf-charcoal-deep);
}

/* --- Hero overlay panels (were bright purple boxes) --- */
.hero-picture-2,
.hero-picture-3,
.div-block-2 {
  background-color: var(--sf-taupe) !important;
  color: var(--sf-cream);
}

.hero-picture-2 *,
.hero-picture-3 *,
.div-block-2 * {
  color: var(--sf-cream);
}

/* --- Testimonial cards --- */
.pricing-card-wrapper {
  background-color: var(--sf-cream-soft) !important;
  border: 1px solid var(--sf-rule);
  color: var(--sf-charcoal);
}

.pricing-card-wrapper.growth {
  background-color: var(--sf-taupe) !important;
  border-color: var(--sf-taupe);
  color: var(--sf-cream);
}

.pricing-card-wrapper.growth .pricing-card-text,
.pricing-card-wrapper.growth .individual-name {
  color: var(--sf-cream) !important;
}

.pricing-card-text {
  font-family: var(--sf-serif);
  font-style: italic;
}

.individual-name {
  font-family: var(--sf-body);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--sf-taupe-deep) !important;
  opacity: 1;
}

/* --- Section dividers --- */
.logos-title-small {
  border-bottom-color: var(--sf-rule) !important;
  background-color: transparent;
}

/* --- Footer + any dark-section overrides --- */
.footer,
.pricing-overview {
  background-color: var(--sf-cream) !important;
  background-image: none !important;
  color: var(--sf-charcoal);
}

.footer-text {
  color: var(--sf-charcoal);
  opacity: 0.55;
}

/* --- Ensemble tag --- */
.clients-tag {
  color: var(--sf-charcoal-deep);
  font-style: italic;
  font-weight: 400;
}

/* --- Privacy / ToS specific dark blocks --- */
.pricing-overview,
[class*="heading-7"],
[class*="heading-8"],
[class*="heading-9"],
[class*="heading-1"] {
  color: var(--sf-charcoal-deep);
}

/* Body paragraphs on Privacy / ToS — hardcoded #fff in source CSS */
.text-block-7,
.paragraph-10,
.paragraph-11,
.paragraph-12,
.paragraph-13,
.paragraph-14,
.paragraph-15,
.paragraph-16,
.paragraph-17,
.paragraph-18,
.paragraph-19,
.paragraph-20,
.paragraph-21,
.paragraph-22 {
  color: var(--sf-charcoal) !important;
}

/* --- Form / input refinements (cream paper feel) --- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background-color: #FBF7EE;
  border: 1px solid var(--sf-rule);
  color: var(--sf-charcoal);
}

/* --- Image-on-dark elements that used to live on the dark body --- */
.hero-pic,
.hero-picture {
  background-color: transparent;
}

/* ============================================================
   Font consolidation — collapse to two families:
   Playfair Display (display/headings) + Cormorant Garamond (body).
   Bitter and Archivo are no longer loaded, so any orphan
   `font-family: Bitter, serif` would fall back to generic
   serif. Map them explicitly here instead.
   ============================================================ */

/* Heading-style Bitter usages → Playfair Display */
.heading,
.centered-heading-2,
.centered-heading-3,
.centered-subheading,
.testimonial-main-heading,
.clients-title,
.logos-title-large,
.hero-without-image-2,
.footer-form-title {
  font-family: var(--sf-serif) !important;
}

/* Body / UI Bitter usages → Cormorant Garamond */
.testimonial-text-two,
.features-paragraph,
.footer-block-three,
.footer-copyright,
.footer-legal-link,
.button-primary,
.button-primary-2,
.margin-bottom-24px,
.paragraph,
.paragraph-2,
.paragraph-4,
.paragraph-5,
.paragraph-6,
.paragraph-7,
.paragraph-8,
.paragraph-9,
.pricing-overview,
.section,
.team-card,
.team-grid,
.team-member-name,
.team-member-position,
.text-block-4,
.text-block-5,
.text-block-6 {
  font-family: var(--sf-body) !important;
}