/* ================================================================
   Tone B — Warm Studio
   Same 12px rule as base, but cream palette + brown text + italic
   serif accents. Slightly softer.
   ================================================================ */

body[data-tone="b"] {
  --color-text:        #2A211A;
  --color-text-soft:   #6B5F52;
  --color-text-softer: #8B7E70;
  --color-bg:          #F5F2EC;
  --color-bg-soft:     #ECE8DF;
  --color-bg-input:    #E8E3D7;
  --color-line:        #D9D3C7;
  --color-line-soft:   #E5DFD3;
  --color-on-dark:     #F5F2EC;
}

/* Italic serif accents for emphasis (em tags throughout) */
body[data-tone="b"] em {
  font-family: var(--font-family-italic);
  font-style: italic;
}

/* Slightly softer hero overlay */
body[data-tone="b"] .hero__visual::after {
  background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(42,33,26,0.45) 100%);
}

/* Cap-card images: soft rounded corners + drop shadow on garment */
body[data-tone="b"] .cap-card__image {
  background: #ECE8DF;
  padding: 16px;
  border-radius: 4px;
}
body[data-tone="b"] .cap-card__image img {
  border-radius: 2px;
  filter: drop-shadow(0 8px 16px rgba(60, 40, 20, 0.12));
}
body[data-tone="b"] .cap-card:hover .cap-card__image img {
  filter: drop-shadow(0 12px 22px rgba(60, 40, 20, 0.16));
}

/* Gallery: soft rounded */
body[data-tone="b"] .gallery-item { border-radius: 4px; }

/* Manifesto eyebrow softer */
body[data-tone="b"] .eyebrow { text-transform: none; letter-spacing: 0.08em; }

/* RFQ form softer surface */
body[data-tone="b"] .rfq-form {
  background: #ECE8DF;
  border-radius: 4px;
}
body[data-tone="b"] .field input,
body[data-tone="b"] .field textarea {
  background: var(--color-bg);
  border-radius: 2px;
}

/* CTA buttons: pill */
body[data-tone="b"] .cta--primary,
body[data-tone="b"] .cta--header {
  border-radius: 999px;
  padding-inline: 22px;
}

/* Header on scroll: cream */
body[data-tone="b"] .site-header.is-scrolled {
  background: rgba(245, 242, 236, 0.98);
}