/* ============================================================
   FLOW — DESIGN SYSTEM (compartilhado)
   Tema claro · Preto + Amarelo · "Eventos Esportivos"
   Carregar ANTES do CSS específico de cada página.
   Componentes com prefixo .flow-* para não colidir.
   ============================================================ */

:root {
    /* Marca */
    --yellow:      #FFD200;
    --yellow-600:  #F5C400;
    --yellow-700:  #E0AE00;
    --yellow-soft: #FFF6CC;
    --black:       #0E0F12;
    --black-2:     #1A1C22;

    /* Superfícies (claro) */
    --bg:          #FFFFFF;
    --bg-soft:     #F5F6F8;
    --bg-soft-2:   #EEF0F3;
    --surface:     #FFFFFF;

    /* Texto */
    --ink:         #16181D;
    --ink-2:       #565C68;
    --ink-3:       #8A909C;

    /* Linhas */
    --line:        #E7E9ED;
    --line-2:      #D7DAE0;

    /* Efeitos */
    --shadow-sm: 0 1px 2px rgba(16,18,22,.06), 0 1px 3px rgba(16,18,22,.05);
    --shadow:    0 6px 22px rgba(16,18,22,.08);
    --shadow-lg: 0 18px 50px rgba(16,18,22,.14);
    --shadow-yellow: 0 10px 28px rgba(255,210,0,.35);
    --transition: all .3s cubic-bezier(.25,.8,.25,1);

    --r:    8px;
    --r-lg: 14px;
    --r-pill: 999px;

    /* Aliases legados (compat. durante a migração) */
    --primary:        var(--yellow);
    --primary-dark:   var(--yellow-700);
    --fire:           var(--yellow);
    --accent:         var(--yellow);
    --text-primary:   var(--ink);
    --text-secondary: var(--ink-2);
    --white:          #FFFFFF;
    --gray:           var(--ink-2);
}

/* ── Tipografia base ── */
.flow, .flow-scope { color: var(--ink); }

.flow-display {
    font-family: 'Barlow Condensed', 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: .01em;
    color: var(--ink);
    margin: 0;
}

/* Eyebrow "// ..." */
.flow-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--yellow-700);
    display: block;
    margin-bottom: .5rem;
}

/* Marca-texto amarela numa palavra */
.flow-mark {
    background: var(--yellow);
    color: var(--black);
    padding: 0 .28em;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ── Seções / faixas ── */
.flow-section        { padding: 4rem 0; background: var(--bg); }
.flow-section--soft  { background: var(--bg-soft); }
.flow-band--dark {
    position: relative;
    padding: 4.5rem 0;
    background: var(--black);
    color: #fff;
}
.flow-band--dark::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: var(--yellow);
}
.flow-band--dark .flow-display,
.flow-band--dark h1, .flow-band--dark h2, .flow-band--dark h3 { color: #fff; }

.flow-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1;
    margin: 0;
}

/* ── Botões ── */
.flow-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .7rem 1.8rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: 1.5px;
    border-radius: var(--r-pill); border: 1.5px solid transparent;
    text-decoration: none; cursor: pointer; transition: var(--transition);
}
.flow-btn--primary { background: var(--yellow); color: var(--black); }
.flow-btn--primary:hover { background: var(--black); color: var(--yellow); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.flow-btn--dark { background: var(--black); color: #fff; }
.flow-btn--dark:hover { background: var(--yellow); color: var(--black); transform: translateY(-2px); box-shadow: var(--shadow-yellow); }
.flow-btn--outline { background: transparent; border-color: var(--black); color: var(--black); }
.flow-btn--outline:hover { background: var(--yellow); border-color: var(--yellow); color: var(--black); box-shadow: var(--shadow-yellow); }
.flow-btn i { transition: transform .25s ease; }
.flow-btn:hover i { transform: translateX(3px); }

/* ── Cards ── */
.flow-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.flow-card:hover { transform: translateY(-6px); border-color: var(--yellow); box-shadow: var(--shadow-lg); }

/* Card de evento (vitrine de corridas) */
.flow-event-card { display: flex; flex-direction: column; height: 100%; }
.flow-event-card .media { position: relative; aspect-ratio: 954/500; overflow: hidden; background: var(--bg-soft-2); }
.flow-event-card .media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.flow-event-card:hover .media img { transform: scale(1.05); }
.flow-event-card .body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.flow-event-card .title {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 1.18rem; line-height: 1.15; text-transform: uppercase; color: var(--ink); margin: 0;
}
.flow-event-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.flow-event-meta li { display: flex; align-items: center; gap: .55rem; color: var(--ink-2); font-size: .86rem; }
.flow-event-meta li i { color: var(--yellow-700); width: 15px; text-align: center; flex-shrink: 0; }

/* ── Selos de status ── */
.flow-badge {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: .68rem;
    text-transform: uppercase; letter-spacing: 1px;
    padding: .28rem .7rem; border-radius: var(--r-pill);
}
.flow-badge--aberto    { background: #16b455; color: #042312; }
.flow-badge--breve     { background: var(--yellow); color: var(--black); }
.flow-badge--esgotado  { background: #e23c3c; color: #fff; }
.flow-badge--encerrado { background: rgba(14,15,18,.78); color: #fff; }

/* ── Formulários ── */
.flow-input {
    width: 100%; padding: .75rem 1rem;
    border: 1px solid var(--line-2); border-radius: var(--r);
    background: #fff; color: var(--ink); font-size: 1rem;
    transition: border-color .25s, box-shadow .25s;
}
.flow-input::placeholder { color: var(--ink-3); }
.flow-input:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,210,0,.25); }

/* ── Utilitários ── */
.flow-divider { height: 1px; background: var(--line); border: 0; }
.flow-muted { color: var(--ink-2); }

/* ============================================================
   THEME ENGINE — claro/escuro para o site inteiro
   `html:not([data-theme="dark"])` e `:root[data-theme="dark"]`
   têm especificidade maior que os `:root` locais das páginas,
   então estes tokens valem em todo lugar que linka flow.css.
   ============================================================ */

html:not([data-theme="dark"]) {
    /* família A — home/sobre/calendário/componentes flow */
    --bg:          #FFFFFF;
    --bg-soft:     #F4F5F7;
    --bg-soft-2:   #ECEDF0;
    --surface:     #FFFFFF;
    --ink:         #16181D;
    --ink-2:       #545B66;
    --ink-3:       #8A909C;
    --line:        #E6E8EC;
    --line-2:      #D5D8DE;
    /* família B — vitrines + fluxo (login/conta/carrinho/checkout) */
    --bg-base:        #FFFFFF;
    --bg-surface:     #F4F5F7;
    --bg-elevated:    #ECEDF0;
    --text-primary:   #16181D;
    --text-secondary: #545B66;
    --border-subtle:  #E6E8EC;
    --border-mid:     #D5D8DE;
    /* família C — pagamento (pix/cartão) */
    --card:     #F4F5F7;
    --elevated: #ECEDF0;
    --tx:       #16181D;
    --tx-2:     #545B66;
    --tx-m:     #8A909C;
    --border:   #E6E8EC;
    /* efeitos */
    --shadow-sm: 0 1px 2px rgba(16,18,22,.05), 0 2px 6px rgba(16,18,22,.04);
    --shadow:    0 8px 28px rgba(16,18,22,.09);
    --shadow-lg: 0 22px 60px rgba(16,18,22,.16);
    /* acentos amarelos sobre claro */
    --fire-subtle: rgba(255,210,0,.12);
    --fire-border: rgba(255,210,0,.55);
    --fire-glow:   rgba(255,210,0,.30);
    /* navbar */
    --nav-bg:   rgba(255,255,255,.88);
    --nav-line: #E6E8EC;
    --toggler-invert: 0;
}

:root[data-theme="dark"] {
    --yellow-soft: rgba(255,210,0,.12);
    /* família A */
    --bg:          #0B0C10;
    --bg-soft:     #111318;
    --bg-soft-2:   #171A21;
    --surface:     #14161C;
    --ink:         #F2F3F6;
    --ink-2:       #A9B0BC;
    --ink-3:       #6E7480;
    --line:        #23262E;
    --line-2:      #2F333D;
    /* família B */
    --bg-base:        #0B0C10;
    --bg-surface:     #14161C;
    --bg-elevated:    #1A1D24;
    --text-primary:   #F2F3F6;
    --text-secondary: #A9B0BC;
    --border-subtle:  #23262E;
    --border-mid:     #2F333D;
    /* família C */
    --card:     #14161C;
    --elevated: #1A1D24;
    --tx:       #F2F3F6;
    --tx-2:     #A9B0BC;
    --tx-m:     #6E7480;
    --border:   #23262E;
    /* efeitos */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --shadow:    0 10px 30px rgba(0,0,0,.45);
    --shadow-lg: 0 24px 64px rgba(0,0,0,.6);
    --fire-subtle: rgba(255,210,0,.10);
    --fire-border: rgba(255,210,0,.4);
    --fire-glow:   rgba(255,210,0,.18);
    /* navbar */
    --nav-bg:   rgba(11,12,16,.88);
    --nav-line: #23262E;
    --toggler-invert: 1;
}

/* corpo acompanha o tema com transição suave (vence Bootstrap/CSS locais) */
html body { background-color: var(--bg-base, var(--bg)) !important; color: var(--text-primary, var(--ink)); transition: background-color .3s ease, color .3s ease; }

/* ── NAVBAR unificada (vence os .navbar locais das páginas) ── */
html .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1050;
    padding: .7rem 0;
    background: var(--nav-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--nav-line) !important;
    box-shadow: none;
    transition: background-color .3s ease, border-color .3s ease;
}
html .navbar .nav-link { color: var(--ink) !important; font-weight: 600; }
html .navbar .nav-link:hover, html .navbar .nav-link.active { color: var(--ink) !important; }
html .navbar .navbar-brand img { max-height: 40px; width: auto; object-fit: contain; }
[data-theme="dark"] .navbar .navbar-brand img { filter: brightness(0) invert(1); }
html .navbar .dropdown-menu { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 12px; box-shadow: var(--shadow) !important; }
html .navbar .dropdown-item { color: var(--ink-2) !important; border-radius: 8px; }
html .navbar .dropdown-item:hover { background: var(--bg-soft) !important; color: var(--ink) !important; }
html .navbar .btn-outline-primary {
    color: var(--ink) !important;
    border: 1.5px solid var(--ink) !important;
    background: transparent !important;
    border-radius: 999px;
    font-weight: 700;
}
html .navbar .btn-outline-primary:hover { background: var(--yellow) !important; border-color: var(--yellow) !important; color: #0E0F12 !important; }
html .navbar-toggler { border: 1.5px solid var(--line-2) !important; border-radius: 10px !important; }
html .navbar-toggler:focus { box-shadow: none !important; }
html .navbar-toggler-icon { filter: invert(var(--toggler-invert)); }
html #badge-carrinho { background: var(--yellow) !important; color: #0E0F12 !important; font-weight: 700; }

@media (max-width: 991px) {
    html .navbar .navbar-collapse {
        background: var(--surface) !important;
        border: 1px solid var(--line) !important;
        border-radius: 14px !important;
        padding: .75rem .6rem !important;
        margin-top: .75rem !important;
        box-shadow: var(--shadow) !important;
    }
    html .navbar .navbar-nav .nav-link { color: var(--ink) !important; border-radius: 9px; }
    html .navbar .navbar-nav .nav-link:hover,
    html .navbar .navbar-nav .nav-link.active { background: var(--bg-soft-2) !important; color: var(--ink) !important; }
    html .navbar .navbar-nav .dropdown-menu { background: var(--bg-soft) !important; box-shadow: none !important; }
}

/* ── Botão de tema (fixo, todas as páginas) ── */
.theme-toggle {
    position: fixed;
    right: 1.15rem;
    bottom: 1.15rem;
    z-index: 1040;
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.theme-toggle:hover { border-color: var(--yellow); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.theme-toggle svg { width: 21px; height: 21px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── Ajustes comuns no escuro (componentes com claro fixo) ── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] textarea {
    background-color: var(--bg-soft) !important;
    color: var(--ink) !important;
    border-color: var(--line-2) !important;
}
[data-theme="dark"] .form-control::placeholder { color: var(--ink-3) !important; }
[data-theme="dark"] .breadcrumb-section,
[data-theme="dark"] .breadcrumb-custom { background: var(--bg-soft); border-color: var(--line); }
[data-theme="dark"] .case-logo { background: #fff; } /* logos de marcas legíveis */
[data-theme="dark"] .flow-btn--outline { border-color: var(--ink); color: var(--ink); }
[data-theme="dark"] .btn-corridas-all,
[data-theme="dark"] .cases-header-link,
[data-theme="dark"] .btn-ver-loja,
[data-theme="dark"] .btn-ver-todos { border-color: var(--ink); color: var(--ink) !important; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }