body { font-family: "Inter", system-ui, sans-serif; }

:root{
    --page-bg: #f1f3f7;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: rgba(148,163,184,.45);
    --border-2: rgba(148,163,184,.28);

    --text: #4E606E;
    --muted: #64748b;
    --muted-2: #94a3b8;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --shadow-sm: 0 1px 2px rgba(2,6,23,.06);
    --shadow-md: 0 8px 20px rgba(2,6,23,.08);

    /* NUEVO: color acento (anaranjado/oro del proyecto) */
    --accent: #C7A869;

    /* (Opcional) un primary, si lo estás usando en clases tipo text-primary/bg-primary */
    --primary: #0f172a;

    --ring: 0 0 0 4px rgba(199,168,105,.22);
}


.hero-dark {
    background:
            radial-gradient(circle at 0% 0%, rgba(199,168,105,.18) 0, transparent 45%),
            radial-gradient(circle at 100% 0%, rgba(14,165,233,.18) 0, transparent 45%),
            linear-gradient(135deg, #020617, #020617, #111827);
}

.soft-card { backdrop-filter: blur(10px); }

.ui-card { border: 1px solid var(--border-2); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }
.ui-btn { transition: 180ms ease; }
.ui-btn:focus { outline: none; box-shadow: var(--ring); }
.ui-link { transition: 180ms ease; }
.ui-input:focus { outline: none; box-shadow: var(--ring); border-color: rgba(199,168,105,.55); }

.font-ui { font-weight: 500; }
.font-title { font-weight: 600; }
.font-hero { font-weight: 700; }

.bg-accent { background: var(--accent); }


/* Evitar que el bottom bar tape contenido */
@media (max-width: 767px){
    body{ padding-bottom: 72px; }
}