/*
 * DraftedSkin Expressive mode
 *
 * Optional fashion-led campaign layer. The core technical system remains in
 * style.css; disable "Expressive visual mode" in the WordPress Customizer to
 * remove this entire layer and restore the original treatment.
 */

.draftedskin-expressive {
  --expression: #ef654d;
  --expression-soft: #f2b8a5;
  --expression-deep: #a74335;
  --accent-contrast: var(--bone);
  /* Expressive mode is intentionally monochromatic: all legacy technical
     blues resolve to the same vermilion family. */
  --blue: var(--expression);
  --blue-deep: var(--expression-deep);
}

/* Accent palettes are body-level token sets. No component owns a hard-coded
   campaign colour, so changing this class updates the complete experience. */
.draftedskin-accent-violet {
  --expression: #6752e8;
  --expression-soft: #d9d2fa;
  --expression-deep: #4937b8;
  --accent-contrast: var(--bone);
}

.draftedskin-accent-raspberry {
  --expression: #c83d64;
  --expression-soft: #efc4d2;
  --expression-deep: #8f2645;
  --accent-contrast: var(--bone);
}

.draftedskin-accent-acid {
  --expression: #c7e72f;
  --expression-soft: #eaf4b0;
  --expression-deep: #617500;
  --accent-contrast: var(--ink);
}

.draftedskin-accent-oxblood {
  --expression: #812f3f;
  --expression-soft: #e8cdd0;
  --expression-deep: #571b28;
  --accent-contrast: var(--bone);
}

.draftedskin-accent-cobalt {
  --expression: #3155d9;
  --expression-soft: #cbd6f6;
  --expression-deep: #1d3799;
  --accent-contrast: var(--bone);
}

.draftedskin-accent-petrol {
  --expression: #087e78;
  --expression-soft: #c4e3df;
  --expression-deep: #075651;
  --accent-contrast: var(--bone);
}

.draftedskin-accent-marigold {
  --expression: #dda51d;
  --expression-soft: #f2dfaa;
  --expression-deep: #765305;
  --accent-contrast: var(--ink);
}

.draftedskin-accent-aubergine {
  --expression: #663b68;
  --expression-soft: #ddcfdf;
  --expression-deep: #432445;
  --accent-contrast: var(--bone);
}

.draftedskin-accent-monochrome {
  --expression: #16191d;
  --expression-soft: #d8d4c9;
  --expression-deep: #000;
  --accent-contrast: var(--bone);
}

.draftedskin-accent-saffron {
  --expression: #c47a08;
  --expression-soft: #efd7aa;
  --expression-deep: #714202;
  --accent-contrast: var(--ink);
}

.draftedskin-accent-terracotta {
  --expression: #a9432d;
  --expression-soft: #e7c6ba;
  --expression-deep: #6d281a;
  --accent-contrast: var(--bone);
}

.draftedskin-accent-jade {
  --expression: #0d7252;
  --expression-soft: #bee0d2;
  --expression-deep: #064832;
  --accent-contrast: var(--bone);
}

.draftedskin-accent-midnight {
  --expression: #17355c;
  --expression-soft: #c7d2e1;
  --expression-deep: #091d38;
  --accent-contrast: var(--bone);
}

.draftedskin-accent-peacock {
  --expression: #006e7a;
  --expression-soft: #b9dde0;
  --expression-deep: #00434b;
  --accent-contrast: var(--bone);
}

.draftedskin-accent-flamingo {
  --expression: #e55a84;
  --expression-soft: #f3c8d5;
  --expression-deep: #a32650;
  --accent-contrast: var(--ink);
}

.draftedskin-accent-indigo {
  --expression: #4338a0;
  --expression-soft: #cbc8eb;
  --expression-deep: #292269;
  --accent-contrast: var(--bone);
}

.draftedskin-accent-copper {
  --expression: #95501f;
  --expression-soft: #e2cbb8;
  --expression-deep: #5f2f0f;
  --accent-contrast: var(--bone);
}

.draftedskin-accent-wasabi {
  --expression: #a8be35;
  --expression-soft: #e1e9ad;
  --expression-deep: #596b0b;
  --accent-contrast: var(--ink);
}

.draftedskin-accent-coral {
  --expression: #e35f45;
  --expression-soft: #f2c9be;
  --expression-deep: #9a2e1e;
  --accent-contrast: var(--ink);
}

.draftedskin-expressive ::selection {
  background: var(--expression);
  color: var(--accent-contrast);
}

.draftedskin-expressive .announcement,
.draftedskin-expressive .count {
  color: var(--accent-contrast);
}

.draftedskin-expressive:not(.home) .announcement {
  background: var(--ink);
  color: var(--bone);
}

/* Emotion uses warm colour and serif type; drafting facts remain cyan/mono. */
.draftedskin-expressive .hero .blue,
.draftedskin-expressive .footer-logo .blue {
  color: var(--expression);
}

.draftedskin-expressive .hero-definition {
  max-width: 640px;
  color: var(--ink);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}

.draftedskin-expressive .hero-copy {
  background-color: #f5eee4;
  background-image:
    linear-gradient(135deg, rgba(239, 101, 77, 0.07), transparent 44%),
    radial-gradient(var(--line) 1px, transparent 1px);
  background-size: auto, 24px 24px;
}

.draftedskin-expressive .hero-actions .btn:first-child,
.draftedskin-expressive #place_order,
.draftedskin-expressive .wc-proceed-to-checkout .checkout {
  background: var(--expression);
  border-color: var(--expression);
  color: var(--accent-contrast);
}

.draftedskin-expressive .hero-actions .btn:first-child:hover,
.draftedskin-expressive #place_order:hover,
.draftedskin-expressive .wc-proceed-to-checkout .checkout:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.draftedskin-expressive .development-head h2,
.draftedskin-expressive .reviews .section-head h2,
.draftedskin-expressive .expressive-heading {
  max-width: 780px;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.96;
}

.draftedskin-expressive .development-stages li:nth-child(2) {
  background: rgba(22, 25, 29, 0.035);
}

.draftedskin-expressive .development-stages li:nth-child(3) {
  background: rgba(239, 101, 77, 0.1);
}

.draftedskin-expressive .development-stages li:nth-child(4) {
  background: rgba(22, 25, 29, 0.06);
}

.draftedskin-expressive .development-stages strong {
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 400;
}

/* Collections behave like fashion stories while their metadata stays exact. */
.draftedskin-expressive .collection {
  border-color: var(--ink);
}

.draftedskin-expressive .collection h3 {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  text-transform: none;
}

.draftedskin-expressive .badge {
  background: var(--expression);
  color: var(--accent-contrast);
}

.draftedskin-expressive .catalogue-filter.active {
  box-shadow: none;
}

.draftedskin-expressive .catalogue-card .badge {
  background: var(--ink);
  color: var(--bone);
}

.draftedskin-expressive .product:hover .add,
.draftedskin-expressive .catalogue-card:hover .add {
  border-color: var(--expression);
  color: var(--expression);
}

.draftedskin-expressive .product-development {
  background: var(--ink);
}

.draftedskin-expressive .product-development h2 {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  text-transform: none;
}

.draftedskin-expressive .review:nth-child(2) {
  background: #f5e7dd;
}

.draftedskin-expressive .review blockquote {
  font-family: "Instrument Serif", serif;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.25;
}

.draftedskin-expressive .review .stars,
.draftedskin-expressive details[open] summary,
.draftedskin-expressive details summary::after {
  color: var(--expression);
}

.draftedskin-expressive .catalogue-filter-group > summary,
.draftedskin-expressive .catalogue-filter-group > summary::after {
  color: var(--ink) !important;
}

.draftedskin-expressive .fitting-address {
  background:
    linear-gradient(145deg, rgba(239, 101, 77, 0.2), transparent 55%),
    var(--ink);
}

.draftedskin-expressive .fitting-address h2 {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.draftedskin-expressive .faq-layout > div:first-child h2 {
  color: var(--expression);
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

@media (max-width: 600px) {
  .draftedskin-expressive .hero-definition {
    font-size: 1.3rem;
  }

  .draftedskin-expressive .review blockquote {
    font-size: 1.65rem;
  }
}