/* ===================================================================
   ZapSpy Design System — LEGACY VARIABLE BRIDGE
   Backwards-compat mapping for older inline CSS that uses ad-hoc names
   like --green-primary, --bg-primary, --red-alert etc.

   Loading this AFTER any inline <style> in the page makes every legacy
   var() lookup resolve to the new design-system token, instantly
   unifying the visual language WITHOUT touching any HTML structure or
   JavaScript.

   Load order MUST be:
     1. (page's own <style> block, if any)
     2. /shared/css/zapspy.css           ← defines new tokens & components
     3. /shared/css/funnel-bridge.css    ← THIS file (maps old → new)

   Pages must also have <body class="theme-light"> or "theme-dark".
   =================================================================== */

:root {
    /* ── Backgrounds ─────────────────────────────────────────── */
    --bg-primary:        var(--bg);
    --bg-secondary:      var(--surface);
    --bg-tertiary:       var(--surface-2);
    --bg-conversation:   var(--surface);
    --bg-light:          var(--bg);
    --bg-card:           var(--surface);
    --bg:                var(--bg);
    --surface:           var(--surface);
    --black:             var(--text-1);   /* legacy quiz alias */
    --white:             var(--text-1);   /* legacy quiz alias */

    /* ── Text ─────────────────────────────────────────────────── */
    --text-primary:      var(--text-1);
    --text-secondary:    var(--text-2);
    --text-muted:        var(--text-3);

    /* ── Brand greens (every alias points to WhatsApp green) ──── */
    --green:             var(--brand-primary);
    --green-primary:     var(--brand-primary);
    --green-dark:        var(--brand-primary-strong);
    --green-dim:         var(--brand-primary-strong);
    --green-light:       var(--brand-success);

    /* ── Borders / dividers ──────────────────────────────────── */
    --border:            var(--border);
    --border-color:      var(--border);
    --divider:           var(--border);

    /* ── Status / semantic ───────────────────────────────────── */
    --red:               var(--color-danger);
    --red-alert:         var(--color-danger);
    --red-bg:            var(--color-danger-soft);
    --red-border:        rgba(220, 53, 69, 0.22);
    --orange-alert:      var(--color-warning);
    --yellow:            var(--color-warning);
    --yellow-bg:         var(--color-warning-soft);
    --yellow-border:     rgba(245, 158, 11, 0.22);
    --ok:                var(--brand-success);
    --ok-bg:             rgba(37, 211, 102, 0.10);
    --ok-border:         rgba(37, 211, 102, 0.22);
    --blue-check:        #53BDEB;          /* WhatsApp double-check blue */

    /* ── Chat bubbles (chat.html / conversas.html) ───────────── */
    --msg-in:            var(--bubble-in);
    --msg-out:           var(--bubble-out);

    /* ── Radius (legacy quiz aliases) ────────────────────────── */
    --radius:            var(--radius-md);

    /* ── Font (legacy quiz alias) ────────────────────────────── */
    --font:              var(--font-body);
    --ease:              var(--ease-out);
}

/* ── Page-level typography upgrade ───────────────────────────── */
html, body {
    font-family: var(--font-body) !important;
    background: var(--bg);
    color: var(--text-1);
}

/* Headings get the display font automatically — no class needed.
   We don't override sizes/weights so existing layouts stay intact. */
h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: var(--tracking-snug);
}

/* ── Universal upgrades for very common ad-hoc patterns ─────── */

/* Most pages have a generic .btn-primary / .cta button — upgrade them */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-strong)) !important;
    color: var(--text-on-brand) !important;
    box-shadow: var(--shadow-cta);
    border-color: transparent !important;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    box-shadow: 0 14px 28px rgba(0, 168, 132, 0.40), 0 4px 8px rgba(0, 128, 105, 0.25);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0) scale(0.99); }

/* Inputs — softer focus ring matching brand */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand-primary) !important;
    box-shadow: var(--shadow-ring);
}

/* Selection */
::selection { background: var(--brand-primary-ring); color: var(--text-1); }
