/* ══════════════════════════════════════════════
   ATYC · TOKENS DE MARCA (claro / oscuro)
   Cargar en TODAS las páginas, antes que cualquier
   CSS específico de página (Nosotros, Proyectos...).
   ══════════════════════════════════════════════ */

:root {
    --t: 250ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --tc: #c8714a;
    --tc2: #e8936d;
    --radius: 6px;
}

[data-theme="dark"] {
    --bg: #0b0907;
    --bg2: #141210;
    --bg3: #1d1a17;
    --bg4: #252018;
    --surface: #201c19;
    --surf2: #2a2520;
    --cr: #f0e8df;
    --cr2: #c4b8ae;
    --cr3: #7a6f67;
    --line: rgba(200, 113, 74, 0.18);
    --line2: rgba(240, 232, 223, 0.06);
    --shadow: 0 4px 32px rgba(0, 0, 0, 0.55);
    --toggle-track: #2a2520;
}

[data-theme="light"] {
    --bg: #faf7f3;
    --bg2: #f3ede5;
    --bg3: #ede4d8;
    --bg4: #e6dace;
    --surface: #fff;
    --surf2: #f7f2ec;
    --cr: #1a1410;
    --cr2: #4a3f37;
    --cr3: #8a7d74;
    --line: rgba(200, 113, 74, 0.22);
    --line2: rgba(26, 20, 16, 0.08);
    --shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
    --toggle-track: #e6dace;
}

/* ── BOTÓN TOGGLE (para el header) ── */
.atyc-theme-toggle {
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: var(--toggle-track, #e6dace);
    border: 1px solid var(--line, rgba(200, 113, 74, 0.22));
    cursor: pointer;
    transition: background var(--t) var(--ease);
    display: inline-flex;
    align-items: center;
    padding: 3px;
    flex-shrink: 0;
}

.atyc-theme-toggle::after {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--tc);
    transition: transform var(--t) var(--ease);
    transform: translateX(0);
}

[data-theme="light"] .atyc-theme-toggle::after {
    transform: translateX(24px);
}