/* =========================
   VARIÁVEIS BASE (CLARO)
========================= */
:root{
    --bg:#ffffff;
    --text:#111827;
    --primary:#1e3a5f;
    --secondary:#2c5282;
    --accent:#ffcc00;
    --card:#ffffff;
    --border:#d1d5db;
}

/* =========================
   DARK MODE AUTOMÁTICO
========================= */
@media (prefers-color-scheme: dark){
    :root{
        --bg:#0f172a;
        --text:#f9fafb;
        --primary:#0d3b66;
        --secondary:#1e40af;
        --accent:#facc15;
        --card:#1e293b;
        --border:#334155;
    }
}

/* =========================
   ALTO CONTRASTE AUTOMÁTICO
========================= */
@media (prefers-contrast: more){
    :root{
        --bg:#000000;
        --text:#ffffff;
        --primary:#0000ff;
        --accent:#ffff00;
        --card:#000000;
        --border:#ffffff;
    }
}

/* =========================
   BASE
========================= */
body{
    font-family:'DM Sans', sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
}

/* NAVBAR */
.custom-nav{
    background:var(--primary);
}

/* LINKS */
.nav-link{
    color:var(--text) !important;
    font-weight:600;
}

.nav-link:hover,
.nav-link:focus{
    color:var(--accent) !important;
    text-decoration:underline;
}

/* HERO */
.banner{
    background:var(--primary);
    color:#fff;
    padding:100px 20px;
}

/* BOTÃO */
.custom-btn{
    background:var(--accent);
    color:#000;
    padding:14px 28px;
    border-radius:8px;
    font-weight:bold;
    text-decoration:none;
    border:2px solid transparent;
}

.custom-btn:hover{
    filter:brightness(0.9);
}

.custom-btn:focus{
    outline:3px solid var(--text);
    outline-offset:3px;
}

/* CARDS */
.fancy-card{
    background:var(--card);
    border:2px solid var(--border);
    border-radius:12px;
    transition:0.3s;
}

.fancy-card:hover{
    border-color:var(--primary);
}

/* CONTEÚDO */
.content-box{
    background:var(--card);
    padding:30px;
    border-radius:12px;
    border:1px solid var(--border);
}

/* INPUTS */
input, textarea{
    width:100%;
    padding:12px;
    margin:10px 0;
    border-radius:6px;
    border:2px solid var(--border);
    background:var(--bg);
    color:var(--text);
}

input:focus, textarea:focus{
    border-color:var(--accent);
    outline:none;
}

/* FOOTER */
footer{
    background:var(--primary);
    color:#fff;
    text-align:center;
    padding:20px;
}

/* FOCO ACESSÍVEL GLOBAL */
a:focus, button:focus{
    outline:3px solid var(--accent);
    outline-offset:3px;
}

/* REDUZIR ANIMAÇÕES */
@media (prefers-reduced-motion: reduce){
    *{
        animation:none !important;
        transition:none !important;
    }
}