/**
 * DEPRECATED (2026-03-12): No section file uses the `--variant-{name}` class
 * naming convention this file targets. Kept for backward compatibility but
 * has zero runtime effect. Remove after confirming no regressions.
 *
 * CHLOM v2 — Variant Visual Differentiation
 *
 * Shared CSS that makes the 5 variant identities visually distinct
 * beyond pure color-token swaps.  Targets the GENERIC variant class
 * (e.g. `.cta--variant-corporate`) so it works across ALL themes.
 *
 * Identity contract:
 *   corporate       — crisp, minimal, sharp 4px radii, 1px solid borders
 *   premium_electric — high-contrast, glow accents, gradient edges
 *   creative        — playful, softer 16px radii, organic shadows
 *   dark_neon       — dark surfaces, neon edge/glow, light text
 *   modern_flair    — clean gradients, smooth 0.4s transitions, polished
 *
 * Token consumption:
 *   --cv-accent, --cv-accent-glow, --cv-surface, --cv-surface2,
 *   --cv-border, --cv-glow, --cv-cta-bg, --cv-cta-text
 *
 * Loaded AFTER section-tokens.css, BEFORE theme CSS.
 * Uses :where() for zero specificity — theme CSS always wins.
 */

/* ═══════════════════════════════════════════════
   §1  CORPORATE — Crisp, Minimal, Professional
   ═══════════════════════════════════════════════ */

:where([class*="--variant-corporate"]) {
    --_cv-radius: 4px;
    --_cv-radius-lg: 6px;
    --_cv-shadow: 0 1px 3px rgba(0,0,0,0.06);
    --_cv-border-w: 1px;
    --_cv-transition: 0.2s ease;
}

:where([class*="--variant-corporate"]) :where([class*="-card"], [class*="-item"], [class*="-package"]) {
    border-radius: var(--_cv-radius-lg);
    border: var(--_cv-border-w) solid var(--cv-border, #e2e8f0);
    box-shadow: var(--_cv-shadow);
    transition: box-shadow var(--_cv-transition), transform var(--_cv-transition);
}

:where([class*="--variant-corporate"]) :where([class*="-card"]:hover, [class*="-item"]:hover) {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

:where([class*="--variant-corporate"]) :where(button, [class*="-btn"], [class*="-cta"]) {
    border-radius: var(--_cv-radius);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.85em;
    font-weight: 700;
}

:where([class*="--variant-corporate"]) :where([class*="-badge"], [class*="-tag"], [class*="-pill"]) {
    border-radius: var(--_cv-radius);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════
   §2  PREMIUM ELECTRIC — High-contrast Glow
   ═══════════════════════════════════════════════ */

:where([class*="--variant-premium_electric"]) {
    --_cv-radius: 12px;
    --_cv-radius-lg: 16px;
    --_cv-glow-spread: 20px;
    --_cv-transition: 0.3s ease;
}

:where([class*="--variant-premium_electric"]) :where([class*="-card"], [class*="-item"], [class*="-package"]) {
    border-radius: var(--_cv-radius-lg);
    box-shadow: 0 4px var(--_cv-glow-spread) var(--cv-glow, rgba(124,58,237,0.12));
    transition: box-shadow var(--_cv-transition), transform var(--_cv-transition);
}

:where([class*="--variant-premium_electric"]) :where([class*="-card"]:hover, [class*="-item"]:hover) {
    box-shadow: 0 8px 32px var(--cv-glow, rgba(124,58,237,0.2));
    transform: translateY(-2px);
}

:where([class*="--variant-premium_electric"]) :where(button, [class*="-btn"], [class*="-cta"]) {
    border-radius: var(--_cv-radius);
    box-shadow: 0 4px 16px var(--cv-accent-glow, var(--cv-glow, rgba(124,58,237,0.25)));
    transition: box-shadow var(--_cv-transition), transform var(--_cv-transition);
}

:where([class*="--variant-premium_electric"]) :where(button:hover, [class*="-btn"]:hover, [class*="-cta"]:hover) {
    box-shadow: 0 6px 24px var(--cv-accent-glow, var(--cv-glow, rgba(124,58,237,0.35)));
    transform: translateY(-1px);
}

:where([class*="--variant-premium_electric"]) :where([class*="-badge"], [class*="-tag"], [class*="-pill"]) {
    border-radius: 20px;
    box-shadow: 0 2px 8px var(--cv-glow, rgba(124,58,237,0.15));
}


/* ═══════════════════════════════════════════════
   §3  CREATIVE — Playful, Organic, Soft
   ═══════════════════════════════════════════════ */

:where([class*="--variant-creative"]) {
    --_cv-radius: 16px;
    --_cv-radius-lg: 24px;
    --_cv-shadow: 0 8px 30px rgba(0,0,0,0.06);
    --_cv-transition: 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

:where([class*="--variant-creative"]) :where([class*="-card"], [class*="-item"], [class*="-package"]) {
    border-radius: var(--_cv-radius-lg);
    box-shadow: var(--_cv-shadow);
    border: none;
    transition: box-shadow var(--_cv-transition), transform var(--_cv-transition);
}

:where([class*="--variant-creative"]) :where([class*="-card"]:hover, [class*="-item"]:hover) {
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
    transform: translateY(-4px);
}

:where([class*="--variant-creative"]) :where(button, [class*="-btn"], [class*="-cta"]) {
    border-radius: 50px;
    transition: transform var(--_cv-transition), box-shadow var(--_cv-transition);
}

:where([class*="--variant-creative"]) :where(button:hover, [class*="-btn"]:hover, [class*="-cta"]:hover) {
    transform: translateY(-2px) scale(1.02);
}

:where([class*="--variant-creative"]) :where([class*="-badge"], [class*="-tag"], [class*="-pill"]) {
    border-radius: 50px;
}

:where([class*="--variant-creative"]) :where(img, [class*="-photo"], [class*="-avatar"]) {
    border-radius: var(--_cv-radius-lg);
}


/* ═══════════════════════════════════════════════
   §4  DARK NEON — Dark Surfaces, Neon Edges
   ═══════════════════════════════════════════════ */

:where([class*="--variant-dark_neon"]) {
    --_cv-radius: 10px;
    --_cv-radius-lg: 14px;
    --_cv-transition: 0.3s ease;
    color: #e2e8f0;
}

:where([class*="--variant-dark_neon"]) :where(h1,h2,h3,h4,h5,h6) {
    color: #f1f5f9;
}

:where([class*="--variant-dark_neon"]) :where(p, li, span, td, label) {
    color: #94a3b8;
}

:where([class*="--variant-dark_neon"]) :where([class*="-card"], [class*="-item"], [class*="-package"]) {
    border-radius: var(--_cv-radius-lg);
    background: var(--cv-surface2, rgba(255,255,255,0.04));
    border: 1px solid var(--cv-border, rgba(255,255,255,0.08));
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow var(--_cv-transition), border-color var(--_cv-transition);
}

:where([class*="--variant-dark_neon"]) :where([class*="-card"]:hover, [class*="-item"]:hover) {
    border-color: var(--cv-accent, #06b6d4);
    box-shadow: 0 0 20px var(--cv-accent-glow, rgba(6,182,212,0.15));
}

:where([class*="--variant-dark_neon"]) :where(button, [class*="-btn"], [class*="-cta"]) {
    border-radius: var(--_cv-radius);
    box-shadow: 0 0 12px var(--cv-accent-glow, rgba(6,182,212,0.2));
    transition: box-shadow var(--_cv-transition);
}

:where([class*="--variant-dark_neon"]) :where(button:hover, [class*="-btn"]:hover, [class*="-cta"]:hover) {
    box-shadow: 0 0 24px var(--cv-accent-glow, rgba(6,182,212,0.35));
}

:where([class*="--variant-dark_neon"]) :where(input, textarea, select) {
    background: var(--cv-surface2, rgba(255,255,255,0.06));
    border-color: var(--cv-border, rgba(255,255,255,0.12));
    color: #e2e8f0;
}

:where([class*="--variant-dark_neon"]) :where(input:focus, textarea:focus, select:focus) {
    border-color: var(--cv-accent, #06b6d4);
    box-shadow: 0 0 0 3px var(--cv-accent-glow, rgba(6,182,212,0.15));
}

:where([class*="--variant-dark_neon"]) :where([class*="-badge"], [class*="-tag"], [class*="-pill"]) {
    background: var(--cv-surface2, rgba(255,255,255,0.08));
    border: 1px solid var(--cv-border, rgba(255,255,255,0.12));
    color: var(--cv-accent, #06b6d4);
}


/* ═══════════════════════════════════════════════
   §5  MODERN FLAIR — Clean Gradients, Polished
   ═══════════════════════════════════════════════ */

:where([class*="--variant-modern_flair"]) {
    --_cv-radius: 12px;
    --_cv-radius-lg: 16px;
    --_cv-transition: 0.4s cubic-bezier(0.22,1,0.36,1);
}

:where([class*="--variant-modern_flair"]) :where([class*="-card"], [class*="-item"], [class*="-package"]) {
    border-radius: var(--_cv-radius-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    border: 1px solid var(--cv-border, rgba(0,0,0,0.06));
    transition: box-shadow var(--_cv-transition), transform var(--_cv-transition);
}

:where([class*="--variant-modern_flair"]) :where([class*="-card"]:hover, [class*="-item"]:hover) {
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

:where([class*="--variant-modern_flair"]) :where(button, [class*="-btn"], [class*="-cta"]) {
    border-radius: var(--_cv-radius);
    transition: all var(--_cv-transition);
}

:where([class*="--variant-modern_flair"]) :where(button:hover, [class*="-btn"]:hover, [class*="-cta"]:hover) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

:where([class*="--variant-modern_flair"]) :where([class*="-badge"], [class*="-tag"], [class*="-pill"]) {
    border-radius: 8px;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════
   §6  REDUCED MOTION — Disable all variant transforms
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    :where([class*="--variant-"]) :where([class*="-card"], [class*="-item"], [class*="-package"],
        button, [class*="-btn"], [class*="-cta"]) {
        transition: none;
        transform: none !important;
    }
    :where([class*="--variant-"]) :where([class*="-card"]:hover, [class*="-item"]:hover,
        button:hover, [class*="-btn"]:hover, [class*="-cta"]:hover) {
        transform: none !important;
    }
}