:root {
    /* Paleta acolhedora/orgânica — nomeada, não genérica */
    --areia: #EFE6D8;
    --areia-escura: #D9CBB4;
    --musgo: #4A5D43;
    --musgo-escuro: #384732;
    --vinho: #6B3540;
    --mostarda: #C08B2E;
    --carvao: #2E2A25;
    --carvao-suave: #6B6457;

    --bg-primary: #FFFDF9;
    --bg-secondary: var(--areia);
    --text-primary: var(--carvao);
    --text-secondary: var(--carvao-suave);
    --accent: var(--musgo);
    --accent-hover: var(--musgo-escuro);
    --border: var(--areia-escura);
    --card-shadow: 0 4px 24px rgba(46, 42, 37, 0.08);
    --card-radius: 20px;
    --success: var(--musgo);
    --danger: var(--vinho);
    --warning: var(--mostarda);
    --gradient: linear-gradient(135deg, var(--musgo), var(--musgo-escuro));

    --font-display: 'Lora', Georgia, serif;
    --font-body: 'Karla', 'Segoe UI', sans-serif;
}

[data-tema="escuro"] {
    --bg-primary: #221F1B;
    --bg-secondary: #2E2A24;
    --text-primary: #F2EBDF;
    --text-secondary: #B5AB98;
    --border: #45402F;
    --card-shadow: 0 4px 24px rgba(0,0,0,0.35);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: var(--font-body);
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: 0.3s;
}

h1, h2, h3, .display {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.card { background: var(--bg-primary); border-radius: var(--card-radius); padding: 24px; box-shadow: var(--card-shadow); border: 1px solid var(--border); }

.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:999px; border:none; font-weight:600; font-family: var(--font-body); cursor:pointer; text-decoration:none; transition:0.2s; }
.btn-primary { background: var(--gradient); color: var(--bg-primary); }
.btn-primary:hover { opacity:0.92; transform:translateY(-1px); }
.btn-outline { background:transparent; border:2px solid var(--border); color: var(--text-primary); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.input { width:100%; padding:12px 16px; border:2px solid var(--border); border-radius:14px; background:var(--bg-primary); color:var(--text-primary); font-family: var(--font-body); }
.input:focus { outline:none; border-color:var(--accent); }

.toggle-tema { width:48px; height:24px; background:var(--border); border-radius:12px; cursor:pointer; position:relative; }
.toggle-tema::after { content:''; width:20px; height:20px; background:var(--bg-primary); border-radius:50%; position:absolute; top:2px; left:2px; transition:0.3s; }
.toggle-tema.ativo { background:var(--accent); }
.toggle-tema.ativo::after { transform:translateX(24px); }

/* Elemento-assinatura: círculo que "respira", usado no hero e como indicador de carregamento */
.respiro {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--musgo), var(--musgo-escuro));
    animation: respirar 5s ease-in-out infinite;
}
@keyframes respirar {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .respiro { animation: none; }
}

/* demais classes conforme necessário */