/* ============================================================================
* design-system-v6.css La Toxica V6 Wave 1 Pink Reset
* ----------------------------------------------------------------------------
* Date: 2026-05-04
* Wave: V6 Wave 1 (gold to pink swap)
* Author: V6 design sprint, executed by Claude Code subagent
* Source: COMMANDER pink #EC2C91 captured from
* https://latoxica.ca/wp-content/themes/la-toxica/style.css
* (legacy production .btn-primary background-color rgb(236 44 145)).
* Strategy:
* 1. Declare V6 pink token set.
* 2. Remap V5 candle gold tokens (--or-cierge, --or-cierge-soft) onto pink
* so every V5 file inherits pink without surgical edits.
* 3. Override the handful of rules that read directly from --cempasuchil
* or specific palette positions (eyebrow, script accent, stroke,
* marquise stars, hero background tints, primary button, gold pill).
* 4. Add sitewide hyperlink hover state in pink, with .latoxica-button kept
* isolated.
* 5. Re-skin the .latoxica-papel-strip SVG so the rouge-sang flags become
* pink while the gold flags remain (decorative motif preserved).
*
* Enqueued from functions.php at priority 35, AFTER all V5 stylesheets,
* so this file's cascade is the final word on accent colour.
* ========================================================================== */
/* 1. V6 token set
* -------------------------------------------------------------------------- */
:root {
--latoxica-pink: #EC2C91;
--latoxica-pink-soft: rgba(236, 44, 145, 0.18);
--latoxica-pink-bright: #ED419C;
--latoxica-pink-hover: #E02989;
}
/* 2. V5 candle gold deprecation
* Remap gold tokens to pink so any V5 rule that still references
* --or-cierge or --or-cierge-soft resolves to the new pink palette.
* -------------------------------------------------------------------------- */
:root {
--or-cierge: var(--latoxica-pink);
--or-cierge-soft: var(--latoxica-pink-soft);
}
/* 3. Heading italic accent override
* V5 design-system-v5.css colours h1/h2/h3 em with --or-cierge already
* (which now resolves to pink). This rule asserts the value explicitly so
* future cascade audits surface the V6 source clearly.
* -------------------------------------------------------------------------- */
h1 em,
h2 em,
h3 em,
.latoxica-h1 em,
.latoxica-h2 em,
.latoxica-h3 em {
color: var(--latoxica-pink);
}
/* 4. Eyebrow accent override
* The V5 .latoxica-eyebrow text is gold and the ::before / ::after lines
* are gold backgrounds. V6 swaps both to pink.
* -------------------------------------------------------------------------- */
.latoxica-eyebrow {
color: var(--latoxica-pink);
}
.latoxica-eyebrow::before,
.latoxica-eyebrow::after {
background: var(--latoxica-pink);
}
/* 5. Caveat script accent override
* V5 .latoxica-script-accent reads --cempasuchil (marigold). V6 directive:
* use brand pink so the script flourish unifies with the rest of the accent
* system.
* -------------------------------------------------------------------------- */
.latoxica-script-accent {
color: var(--latoxica-pink);
}
/* 6. Stroke variant override
* Outlined display text picks up pink for the stroke colour.
* -------------------------------------------------------------------------- */
.latoxica-stroke {
-webkit-text-stroke: 1.2px var(--latoxica-pink);
}
/* 7. Marquise stars override
* The five-star glyph row in the testimonials marquee uses pink. The text
* span beside it stays cream/ink as defined in V5.
* -------------------------------------------------------------------------- */
.latoxica-testimonials-marquee__rating {
color: var(--latoxica-pink);
}
/* 8. Hero background colour shifts
* V5 .latoxica-hero-bg radial gradients used --or-cierge-soft (now pink-soft
* via the remap above) and --cempasuchil-soft (marigold). To keep the brand
* pink prominent, override the marigold lobe with the new pink-soft. The
* rouge-sang lobe stays for warmth.
* -------------------------------------------------------------------------- */
.latoxica-hero-bg {
background:
radial-gradient(ellipse at 30% 20%, var(--latoxica-pink-soft) 0%, transparent 55%),
radial-gradient(ellipse at 70% 30%, var(--latoxica-pink-soft) 0%, transparent 50%),
radial-gradient(ellipse at 20% 80%, var(--rouge-sang-soft) 0%, transparent 55%),
linear-gradient(160deg, #2a1a14 0%, #160d0a 55%, var(--noir-azabache) 100%);
}
/* 9. Button primary override
* Solid pink fill, ink text, darker pink on hover.
* -------------------------------------------------------------------------- */
.latoxica-button--primary {
background: var(--latoxica-pink);
color: var(--noir-azabache);
border-color: var(--latoxica-pink);
text-decoration: none;
}
.latoxica-button--primary:hover,
.latoxica-button--primary:focus-visible {
background: var(--latoxica-pink-hover);
border-color: var(--latoxica-pink-hover);
color: var(--noir-azabache);
}
/* 10. Pill gold to pink rename
* Keep .latoxica-pill--gold as a backwards-compatible alias and declare a
* .latoxica-pill--pink twin so V6 templates can use the new name.
* -------------------------------------------------------------------------- */
.latoxica-pill--gold,
.latoxica-pill--pink {
background: var(--latoxica-pink);
color: var(--noir-azabache);
border-color: var(--latoxica-pink);
}
/* 11. Papel picado decorative SVG V6 exception
* V5 alternated gold and rouge-sang flags. V6 directive: keep gold (the
* cultural motif), swap rouge-sang to pink. Re-declares .latoxica-papel-strip
* with a fresh SVG; gold #C9A56C kept as decorative literal, pink #EC2C91
* inlined (URL-encoded as %23EC2C91).
* -------------------------------------------------------------------------- */
.latoxica-papel-strip {
background-image: url("data:image/svg+xml;utf8,");
}
/* 12. Sitewide hyperlink hover state
* Inherits the local text colour by default, then transitions to pink with a
* pink underline on hover and keyboard focus. Buttons are excluded with an
* explicit text-decoration: none on .latoxica-button so the underline never
* appears on chip/CTA surfaces.
* -------------------------------------------------------------------------- */
a {
color: currentColor;
text-decoration: underline;
text-decoration-color: rgba(0, 0, 0, 0);
text-underline-offset: 0.2em;
transition: color 0.2s ease-out, text-decoration-color 0.2s ease-out;
}
a:hover,
a:focus-visible {
color: var(--latoxica-pink);
text-decoration-color: var(--latoxica-pink);
}
.latoxica-button,
.latoxica-button:hover,
.latoxica-button:focus-visible {
text-decoration: none;
}
/* 13. V6 Wave 5 Footer À propos brand logo cap
* The footer's À propos column renders the La Toxica logo via
*
* inside .latoxica-wrap--wide. V6 directive: cap the displayed logo at 240 px
* on desktop with object-fit: contain so it never crowds the brand intro copy.
* Selector targets the logo image inside the footer's wide wrap so we stay
* scoped (no impact on the header logo or any other latoxica-logo.png usage).
* -------------------------------------------------------------------------- */
footer .latoxica-wrap--wide img[alt="La Toxica MTL"] {
max-width: 240px;
height: auto;
object-fit: contain;
}
/* End of design-system-v6.css */
* inside .latoxica-wrap--wide. V6 directive: cap the displayed logo at 240 px
* on desktop with object-fit: contain so it never crowds the brand intro copy.
* Selector targets the logo image inside the footer's wide wrap so we stay
* scoped (no impact on the header logo or any other latoxica-logo.png usage).
* -------------------------------------------------------------------------- */
footer .latoxica-wrap--wide img[alt="La Toxica MTL"] {
max-width: 240px;
height: auto;
object-fit: contain;
}
/* End of design-system-v6.css */