/* ═══════════════════════════════════════════════════════════════════════════
   STYLE-ARCHETYPE STRUCTURAL RULES (Design-System Coherence SPEC §4.3)

   Moved here out of components/social-icons/social-icons.css (where they were
   mislocated). Body class from includes/helpers/archetype.php
   (`hzo-archetype-<slug>`). Token VALUES live in the generated
   tokens.archetype.css (:root); the rules below add only what tokens can't
   express and set PROPERTIES ONLY — never re-declare tokens (a body-scoped
   custom property would beat the design widget's :root overrides by inheritance
   proximity). Professional (default) has NO rules — the engine defaults ARE it.

   Most of each archetype's look is now token-driven via the fixed dial-set
   (radius/shadow/btn/motion in tokens.archetype.css): Bold's pill CTAs, Elegant's
   flat+near-square surfaces + serif heading default, Warm's rounding. Only the
   few things tokens can't express live here.

   Dark color-mode: the retired `midnight` palette's ~20 fight-the-pipeline
   structural rules are intentionally DROPPED (recoverable from git history at
   9b7b48a). Dark mode is a fast-follow on the color-mode axis and will be rebuilt
   via mode-aware OKLCH derivation rather than per-property overrides (SPEC §4).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bold — confident, typographic, high-contrast. Uppercase CTAs (btn-transform). */
.hzo-archetype-bold .hzo-btn {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9375rem;
}
.hzo-archetype-bold .hzo-section--dark:not(.hzo-section--dark-glow) {
    background: linear-gradient(160deg,
        var(--bg-dark-section) 0%,
        color-mix(in srgb, var(--bg-dark-section) 55%, var(--brand-deep)) 100%);
}

/* Warm — soft, layered, welcoming. Borderless cards; softened image scrims. */
.hzo-archetype-warm .hzo-card { border-color: transparent; }
.hzo-archetype-warm .hzo-section--dark:not(.hzo-section--dark-glow) {
    background: linear-gradient(180deg,
        var(--bg-dark-section) 0%,
        color-mix(in srgb, var(--bg-dark-section) 70%, var(--brand-deep)) 100%);
}
/* Desktop only: below 768px the side scrims flatten to the WCAG-floor wash
   (min(strength*1.25, 90%)) — multiplying that by 0.92 would drop the guaranteed
   minimum, so the softening never applies on mobile. */
@media (min-width: 768px) {
    .hzo-archetype-warm .hzo-hero--image::before,
    .hzo-archetype-warm .hzo-section--image::before {
        opacity: 0.92;
    }
}