/*!
 * Flow V2 Sovereign Router — Design Tokens
 * ─────────────────────────────────────────────────────────────────────
 * Version: v68.103-S0
 * Pairing: /Users/eduardo/Downloads/v68.103-V2-SOVEREIGN-ROUTER-ALGORITHM.md
 *          + heritage CLAUDE.md "Stage 1A Locked DNA"
 *
 * SCOPE
 *   S0: tokens + cloak CSS only. No stage-specific styles (those land
 *   in v2-stage-*.js IIFE-injected <style> blocks at S1+).
 *
 * INVARIANTS
 *   • Stage 1A Locked DNA values (52px input+CTA / 3px radius / Inter 17px·500·0.5px /
 *     12px gap / 24px spine / 5vh gravity) are encoded as CSS custom properties.
 *   • Brand colors (#5caa6a green, #009EE3 MP blue, #B22222 error) defined here.
 *   • All tokens scoped under .flow-v2-page body class so they don't bleed
 *     to heritage pages on the same domain.
 * ───────────────────────────────────────────────────────────────────── */

/* ─── Brand + DNA tokens ───────────────────────────────────────────── */
body.flow-v2-page {
    /* Brand colors */
    --v2-green:        #5caa6a;
    --v2-green-hover:  #4e9a5c;
    --v2-mp-blue:      #009EE3;
    --v2-mp-blue-hover:#0086c7;
    --v2-red-muted:    #B22222;
    --v2-text:         #222;
    --v2-text-muted:   #666;
    --v2-text-hint:    #999;
    --v2-bg:           #ffffff;
    --v2-bg-soft:      #f5f5f5;
    --v2-border:       #e0e0e0;
    --v2-border-strong:#5B5B5B;

    /* Stage 1A Locked DNA */
    --v2-input-h:      52px;
    --v2-cta-h:        52px;
    --v2-radius:       3px;
    --v2-gap:          12px;        /* input → CTA gap */
    --v2-spine:        24px;        /* horizontal page padding */
    --v2-gravity-top:  5vh;         /* vertical breathing on Stage 1A */

    /* Typography */
    --v2-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --v2-font-mono:    ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace;
    --v2-cta-size:     17px;
    --v2-cta-weight:   500;
    --v2-cta-spacing:  0.5px;
    --v2-input-size:   16px;        /* iOS Safari requires ≥16px to prevent zoom-on-focus */

    /* Motion */
    --v2-ease:         cubic-bezier(0.4, 0, 0.2, 1);
    --v2-fade:         400ms var(--v2-ease);
    --v2-fill:         900ms var(--v2-ease);

    /* Z-index ceiling for Sovereign Overlays (max int32) */
    --v2-overlay-z:    2147483647;
}

/* ─── Base page reset ──────────────────────────────────────────────── */
html, body { margin: 0; padding: 0; }

body.flow-v2-page {
    font-family: var(--v2-font);
    color: var(--v2-text);
    background: var(--v2-bg);
    min-height: 100vh;
    /* Prevent iOS rubber-band scroll inside fixed overlays */
    overscroll-behavior-y: none;
    /* Prevent text autoscaling on landscape */
    -webkit-text-size-adjust: 100%;
}

/* Anti-FOUC cloak (mirrors template's inline rule, kept here so the
   token sheet is the single source of truth for cloak behavior) */
#fc-v2-cloak {
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms ease-in-out;
    min-height: 100vh;
}
html.flow-v2-ready #fc-v2-cloak {
    opacity: 1;
    visibility: visible;
}

/* ─── Root mount point + stage stage data attribute ────────────────── */
#fc-v2-root {
    /* Container for Sovereign Overlay stages. Stages inject their own
       overlay <div> as children — overlays use position:fixed so this
       container doesn't need a layout. */
    position: relative;
    min-height: 100vh;
}

/* ─── Pagamento zone (S7 will populate) ────────────────────────────── */
#fc-v2-pagamento-zone[hidden] {
    /* Defensive: even with [hidden] attribute, force display:none
       so heritage Pagamento CSS doesn't accidentally show through. */
    display: none !important;
}

/* ─── Desktop fallback (V2 has no desktop UI yet) ──────────────────── */
@media (min-width: 769px) {
    /* S0: show the placeholder message centered. Later sprint may
       redirect desktop hits to heritage. */
    body.flow-v2-page { background: var(--v2-bg-soft); }
}

/* ─── S0 placeholder styling ──────────────────────────────────────── */
#fc-v2-s0-placeholder { user-select: none; -webkit-user-select: none; }
#fc-v2-s0-diag { font-family: var(--v2-font-mono); }

/* ─── V2 Header — shared across stages (S3+) ─────────────────────── */
.fc-v2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: #ffffff;
    border-bottom: 1px solid #ececec;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Logo — left side */
.fc-v2-header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}
.fc-v2-header-logo img,
.fc-v2-header-logo .custom-logo {
    max-height: 32px;
    width: auto;
    display: block;
}
.fc-v2-header-logo-text {
    font-family: var(--v2-font);
    font-size: 17px;
    font-weight: 700;
    color: var(--v2-text);
    letter-spacing: -0.4px;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}
.fc-v2-header-logo-text span {
    display: block;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--v2-text-muted);
    margin-top: 2px;
}

/* Cart pill — right side */
.fc-v2-header-cart {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.fc-v2-header-total {
    font-family: var(--v2-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--v2-text);
    letter-spacing: -0.2px;
    line-height: 1;
}
/* S6.14.2 — v1 heritage cart-icon parity (Eduardo's standard): BARE black
 * 26px cart (no filled circle behind it) + #E55922 pill badge at -4/-8.
 * Values copied verbatim from v1's .fc-mob-bag / .fc-mob-badge. */
.fc-v2-header-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    color: #1a1a1a;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 150ms ease;
}
.fc-v2-header-cart-btn:active { opacity: 0.7; }
.fc-v2-header-cart-icon {
    width: 26px;
    height: 26px;
    color: #1a1a1a;
}
.fc-v2-header-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #E55922;
    color: #ffffff;
    border-radius: 99px;
    font-family: var(--v2-font);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
}
.fc-v2-header-badge[data-empty="true"] {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   UNIVERSAL V2 BUTTON BEHAVIOR — Single Source of Truth (S6.3.8)
   ═══════════════════════════════════════════════════════════════════
   Applied to EVERY interactive element under `body.flow-v2-page` —
   buttons, links, role="button" cards, radio cards, swatches, etc.
   This is the SENIOR PATTERN that ensures consistent tap behavior
   across the entire V2 SPA. Any new stage automatically inherits it.

   What it kills (the bug Eduardo kept seeing):
     • iOS Safari's default red/gray tap-highlight flash
     • The 300ms tap delay (touch-action:manipulation)
     • The long-press callout menu (link previews, image saves)
     • Text-selection on tap

   What it guarantees:
     • Single-tap activation (no double-tap zoom delay)
     • No surprise color flashes
     • Premium app-like feel on every interactive surface

   Stage-specific buttons can STILL define their own :active background
   (darker green, opacity dim, etc.) — this universal rule only kills
   the BROWSER DEFAULT chrome that would otherwise leak through.
   ═══════════════════════════════════════════════════════════════════ */
/* WILDCARD — every element under V2 body, no exceptions.
   The * selector + !important guarantees iOS Safari's red/pink tap-highlight
   default cannot leak through ANY element including ::before/::after pseudos. */
body.flow-v2-page *,
body.flow-v2-page *::before,
body.flow-v2-page *::after {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

/* Interactive elements — kill 300ms tap delay + long-press callout + text-select */
body.flow-v2-page button,
body.flow-v2-page a,
body.flow-v2-page [role="button"],
body.flow-v2-page [role="radio"] {
    -webkit-touch-callout: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* ───────────────────────────────────────────────────────────────────
   "Voltar" / "Retornar" / "Back" buttons — STRICT no-background rule.
   Eduardo's spec: NEVER any background color on these, in any state.
   Catches every back button across stages by `*-back` class pattern. */
body.flow-v2-page [class*="-back"],
body.flow-v2-page [class*="-back"]:hover,
body.flow-v2-page [class*="-back"]:focus,
body.flow-v2-page [class*="-back"]:active,
body.flow-v2-page [class*="-back"]:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    outline: none !important;
}