/* ============================================================================
 * La Toxica  Design System V5  Wave 1 Foundation
 * ----------------------------------------------------------------------------
 * File:        assets/css/design-system-v5.css
 * Created:     2026-05-04
 * Sprint:      V5 Wave 1 (foundation tokens, type, utilities)
 * Source:      seo-audit-v2.0/design-system/source.html (canonical reference)
 *              + V5 prompt DNA (palette, type, components)
 * Loads at:    wp_enqueue_scripts priority 26
 * Cascade:     after layout-overhaul (25), before press-mentions / reservation /
 *              reviews-marquee.
 *
 * DO NOT EDIT BY HAND outside the V5 sprint. Wave audits at the end of the
 * sprint will diff this file against the canonical source. Hand edits will be
 * silently overwritten.
 *
 * Conventions
 * - Zero raw hot pink, zero legacy display serif from V4.
 * - All chroma comes from the 13 palette tokens declared on :root below.
 * - Type comes from the 4 family tokens (display / sans / script / mono).
 * - Backwards-compat shim --latoxica-pink remaps to --or-cierge so any
 *   straggler in legacy files still resolves to gold during the swap.
 * ========================================================================== */


/* ----------------------------------------------------------------------------
 * 1. Palette tokens  13 canonical V5 colours
 * -------------------------------------------------------------------------- */
:root {
    /* Noirs (70% of the palette weight) */
    --noir-azabache: #0A0707;
    --noir-velours:  #16100E;
    --noir-charbon:  #221917;

    /* Os blanchi & creme (text + soft surfaces, ~18%) */
    --creme-tortilla: #F2EAD6;
    --os-blanchi:     #FBF6E9;

    /* Or & cempasuchil (gold + marigold accents, ~8%) */
    --or-cierge:        #C9A56C;
    --or-cierge-soft:   rgba(201, 165, 108, 0.55);
    --cempasuchil:      #E76F00;
    --cempasuchil-soft: rgba(231, 111, 0, 0.18);

    /* Rouge sang (blood red, papel picado, ~4%) */
    --rouge-sang:      #8B1538;
    --rouge-sang-soft: rgba(139, 21, 56, 0.20);

    /* Gris (translucent neutrals over noir backgrounds) */
    --gris-fumee: rgba(242, 234, 214, 0.10);
    --gris-clair: rgba(242, 234, 214, 0.55);
    /* gris-fonce renamed from gris-fonce-with-accent: the e-acute character
       confuses some PostCSS / SCSS preprocessors, so we keep it ASCII here. */
    --gris-fonce: rgba(242, 234, 214, 0.85);
}


/* ----------------------------------------------------------------------------
 * 2. Type tokens  4 families, fluid sizes, line-height + letter-spacing
 * -------------------------------------------------------------------------- */
:root {
    /* Families */
    --latoxica-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --latoxica-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --latoxica-font-script:  'Caveat', 'Brush Script MT', cursive;
    --latoxica-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Fluid display sizes (clamp min, fluid mid, max) */
    --latoxica-fs-h1:       clamp(3.25rem, 1.6rem + 7.2vw, 8.25rem);     /* up to 132px (Hero D) */
    --latoxica-fs-h1-tight: clamp(2.75rem, 1.4rem + 6.0vw, 6.875rem);   /* up to 110px (Hero A) */
    --latoxica-fs-h2:       clamp(2.25rem, 1.2rem + 4.4vw, 5.0rem);     /* up to 80px  (Hero B / C) */
    --latoxica-fs-h3:       clamp(1.625rem, 1.0rem + 2.4vw, 2.75rem);   /* up to 44px  */
    --latoxica-fs-h4:       clamp(1.25rem, 0.9rem + 1.4vw, 1.875rem);   /* up to 30px  */

    /* Letter-spacing scale (negative for display, neutral for body, wide for mono) */
    --latoxica-ls-display: -0.04em;
    --latoxica-ls-body:    0em;
    --latoxica-ls-mono:    0.18em;

    /* Line-height scale */
    --latoxica-lh-display: 0.92;
    --latoxica-lh-tight:   1.15;
    --latoxica-lh-body:    1.55;
}


/* ----------------------------------------------------------------------------
 * 3. Backwards-compat shim
 * --------------------------------------------------------------------------
 * Any legacy `var(--latoxica-pink)` reference still resolves to the new gold
 * during the cross-file retire. Wave 6 audit will verify zero references and
 * we will remove this shim in a follow-up commit.
 * TEMPORARY shim  to be removed after Wave 6 audit confirms zero references.
 * -------------------------------------------------------------------------- */
:root {
    --latoxica-pink:      var(--or-cierge);
    --latoxica-pink-soft: var(--or-cierge-soft);
}


/* ----------------------------------------------------------------------------
 * 4. Heading italic accent rules
 * --------------------------------------------------------------------------
 * Inline <em> inside any heading flips to the Fraunces italic + or-cierge
 * accent. This is the canonical "italic accent" treatment used on every hero
 * variant. Applies both to native h1/h2/h3 and to .latoxica-h*-prefixed
 * utility classes for components that need a non-semantic title.
 * -------------------------------------------------------------------------- */
h1 em,
h2 em,
h3 em,
.latoxica-h1 em,
.latoxica-h2 em,
.latoxica-h3 em {
    font-family: var(--latoxica-font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--or-cierge);
}


/* ----------------------------------------------------------------------------
 * 5. Stroke utility
 * --------------------------------------------------------------------------
 * Hero D variant: gold-stroked italic glyphs sitting transparent over the
 * dark hero. Use sparingly, max one word per page.
 * -------------------------------------------------------------------------- */
.latoxica-stroke {
    -webkit-text-stroke: 1.2px var(--or-cierge);
    color: transparent;
    font-style: italic;
    font-weight: 400;
}


/* ----------------------------------------------------------------------------
 * 6. Eyebrow utility
 * --------------------------------------------------------------------------
 * Mono caps eyebrow. Animates two thin gold rules from 32px to 64px when the
 * parent .latoxica-reveal becomes visible (handled by IntersectionObserver in
 * Wave 4 JS  the CSS keyframe is ready to receive it).
 * -------------------------------------------------------------------------- */
.latoxica-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--latoxica-font-mono);
    font-size: 0.6875rem;          /* 11px */
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--or-cierge);
    line-height: 1;
    margin: 0;
}

.latoxica-eyebrow::before,
.latoxica-eyebrow::after {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--or-cierge-soft);
    transition: width 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.latoxica-reveal.is-visible .latoxica-eyebrow::before,
.latoxica-reveal.is-visible .latoxica-eyebrow::after {
    width: 64px;
}


/* ----------------------------------------------------------------------------
 * 7. Vertical meta label utility
 * --------------------------------------------------------------------------
 * Hero A bottom-right corner: "4,3 stars 2 014 avis Google" set sideways
 * in mono. Hidden below 1280px so we never compete with mobile content.
 * -------------------------------------------------------------------------- */
.latoxica-meta-vertical {
    position: absolute;
    right: 56px;
    bottom: 64px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--latoxica-font-mono);
    font-size: 0.65625rem;         /* 10.5px */
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gris-clair);
    pointer-events: none;
}

@media (max-width: 1279.98px) {
    .latoxica-meta-vertical { display: none; }
}


/* ----------------------------------------------------------------------------
 * 8. Papel picado strip
 * --------------------------------------------------------------------------
 * Inline SVG flag bunting in or-cierge + rouge-sang. Tiles horizontally at
 * 60px x 32px. Used in Hero C and any cantina-style section break.
 * -------------------------------------------------------------------------- */
.latoxica-papel-strip {
    width: 100%;
    height: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 32' fill='none'><rect x='0' y='0' width='30' height='14' fill='%23C9A56C' fill-opacity='0.55'/><circle cx='15' cy='7' r='2.5' fill='%230A0707'/><circle cx='8' cy='7' r='1.2' fill='%230A0707'/><circle cx='22' cy='7' r='1.2' fill='%230A0707'/><path d='M0 14 L7.5 22 L15 14 L22.5 22 L30 14' stroke='%23C9A56C' stroke-opacity='0.55' stroke-width='1.2' fill='none'/><rect x='30' y='0' width='30' height='14' fill='%238B1538' fill-opacity='0.5'/><circle cx='45' cy='7' r='2.5' fill='%230A0707'/><path d='M30 14 L37.5 22 L45 14 L52.5 22 L60 14' stroke='%238B1538' stroke-opacity='0.5' stroke-width='1.2' fill='none'/></svg>");
    background-repeat: repeat-x;
    background-size: 60px 32px;
    background-position: 0 0;
}


/* ----------------------------------------------------------------------------
 * 9. Caveat script accent
 * --------------------------------------------------------------------------
 * Hand-script accent in marigold. Use for prices, signatures, hand-written
 * specials. Never set body copy in this family.
 * -------------------------------------------------------------------------- */
.latoxica-script-accent {
    font-family: var(--latoxica-font-script);
    font-weight: 600;
    font-size: 1.625rem;           /* 26px base, scales with cascade */
    color: var(--cempasuchil);
    line-height: 1.2;
}


/* ----------------------------------------------------------------------------
 * 10. Hero background composition utility
 * --------------------------------------------------------------------------
 * Layered radial glows + diagonal gold weave + bottom gradient fade. Used as
 * the underlay for any full-bleed dark hero. Mount on a .latoxica-hero-bg
 * div positioned absolute inset:0 inside a hero container.
 * -------------------------------------------------------------------------- */
.latoxica-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 70% 30%, var(--cempasuchil-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%);
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.latoxica-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(236, 44, 145, 0.06) 0,
        rgba(236, 44, 145, 0.06) 1px,
        transparent 1px,
        transparent 18px
    );
    mix-blend-mode: overlay;
}

.latoxica-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 30%,
        rgba(10, 7, 7, 0.7) 80%,
        rgba(10, 7, 7, 0.95) 100%
    );
}


/* ----------------------------------------------------------------------------
 * 11. Buttons  primary, ghost, filled-cream
 * -------------------------------------------------------------------------- */
.latoxica-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    font-family: var(--latoxica-font-sans);
    font-size: 0.8125rem;          /* 13px */
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition:
        background 240ms ease,
        color 240ms ease,
        border-color 240ms ease,
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    line-height: 1;
    will-change: transform;
}

.latoxica-button:hover {
    transform: translateY(-1px);
}

.latoxica-button:active {
    transform: translateY(0);
}

.latoxica-button--primary {
    background: var(--or-cierge);
    color: var(--noir-azabache);
    border-color: var(--or-cierge);
}

.latoxica-button--primary:hover {
    background: var(--cempasuchil);
    border-color: var(--cempasuchil);
    color: var(--os-blanchi);
}

.latoxica-button--ghost {
    background: transparent;
    color: var(--creme-tortilla);
    border-color: var(--or-cierge-soft);
}

.latoxica-button--ghost:hover {
    background: var(--gris-fumee);
    border-color: var(--or-cierge);
    color: var(--os-blanchi);
}

.latoxica-button--filled-cream {
    background: var(--creme-tortilla);
    color: var(--noir-azabache);
    border-color: var(--creme-tortilla);
}

.latoxica-button--filled-cream:hover {
    background: var(--os-blanchi);
    border-color: var(--os-blanchi);
}


/* ----------------------------------------------------------------------------
 * 12. Pills  gold, ink, cream variants
 * -------------------------------------------------------------------------- */
.latoxica-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-family: var(--latoxica-font-mono);
    font-size: 0.6875rem;          /* 11px */
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid var(--or-cierge-soft);
    background: var(--gris-fumee);
    color: var(--gris-fonce);
    line-height: 1;
}

.latoxica-pill--gold {
    background: var(--or-cierge);
    color: var(--noir-azabache);
    border-color: var(--or-cierge);
}

.latoxica-pill--ink {
    background: var(--noir-azabache);
    color: var(--or-cierge);
    border-color: var(--or-cierge-soft);
}

.latoxica-pill--cream {
    background: var(--creme-tortilla);
    color: var(--noir-azabache);
    border-color: var(--creme-tortilla);
}


/* ----------------------------------------------------------------------------
 * 13. Cards  dark + cream variants
 * -------------------------------------------------------------------------- */
.latoxica-card-dark {
    background: var(--noir-velours);
    color: var(--creme-tortilla);
    border: 1px solid var(--gris-fumee);
    border-radius: 14px;
    padding: 32px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 24px 48px rgba(0, 0, 0, 0.45);
}

.latoxica-card-dark h3,
.latoxica-card-dark .latoxica-card-title {
    font-family: var(--latoxica-font-display);
    font-weight: 700;
    color: var(--os-blanchi);
    margin: 0 0 12px;
    letter-spacing: var(--latoxica-ls-display);
    line-height: var(--latoxica-lh-tight);
}

.latoxica-card-cream {
    background: var(--creme-tortilla);
    color: var(--noir-azabache);
    border: 1px solid rgba(10, 7, 7, 0.08);
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 18px 40px rgba(10, 7, 7, 0.18);
}

.latoxica-card-cream h3,
.latoxica-card-cream .latoxica-card-title {
    font-family: var(--latoxica-font-display);
    font-weight: 700;
    color: var(--noir-azabache);
    margin: 0 0 12px;
    letter-spacing: var(--latoxica-ls-display);
    line-height: var(--latoxica-lh-tight);
}


/* ----------------------------------------------------------------------------
 * 14. CTA bands  noir + cream variants
 * -------------------------------------------------------------------------- */
.latoxica-cta-band {
    background: var(--noir-velours);
    color: var(--creme-tortilla);
    padding: 64px 32px;
    border-top: 1px solid var(--gris-fumee);
    border-bottom: 1px solid var(--gris-fumee);
    text-align: center;
}

.latoxica-cta-band h2,
.latoxica-cta-band .latoxica-cta-band__title {
    font-family: var(--latoxica-font-display);
    font-weight: 700;
    font-size: var(--latoxica-fs-h2);
    line-height: var(--latoxica-lh-tight);
    letter-spacing: var(--latoxica-ls-display);
    color: var(--os-blanchi);
    margin: 0 0 16px;
}

.latoxica-cta-band p {
    color: var(--gris-fonce);
    font-family: var(--latoxica-font-sans);
    font-size: 1.0625rem;          /* 17px */
    line-height: var(--latoxica-lh-body);
    max-width: 56ch;
    margin: 0 auto 28px;
}

.latoxica-cta-band--cream {
    background: var(--creme-tortilla);
    color: var(--noir-azabache);
    border-top-color: rgba(10, 7, 7, 0.08);
    border-bottom-color: rgba(10, 7, 7, 0.08);
}

.latoxica-cta-band--cream h2,
.latoxica-cta-band--cream .latoxica-cta-band__title {
    color: var(--noir-azabache);
}

.latoxica-cta-band--cream p {
    color: rgba(10, 7, 7, 0.74);
}


/* ============================================================================
 * End of design-system-v5.css  Wave 1 foundation. Wave 2 will add hero
 * partials that consume these utilities. Do not modify this file outside the
 * V5 sprint.
 * ========================================================================== */