/* ============================================================
   DEVDA.APP — DESIGN SYSTEM
   ============================================================
   Define las variables CSS base del ecosistema.
   Todos los subdominios deben importarlo para mantener
   coherencia visual (colores, tipografía, espaciados).
   ============================================================ */

:root {
    /* --- PALETA DE COLORES --- */
    --color-primary:    #0f172a;   /* Azul noche */
    --color-secondary:  #1e293b;   /* Gris oscuro */
    --color-accent:     #38bdf8;   /* Cian eléctrico (acentos) */
    --color-accent-alt: #818cf8;   /* Violeta suave */
    --color-text:       #e2e8f0;   /* Texto principal */
    --color-text-muted: #94a3b8;   /* Texto secundario */
    --color-bg:         #020617;   /* Fondo principal */
    --color-card:       #0f172a;   /* Fondo de tarjetas */
    --color-border:     #1e293b;   /* Bordes sutiles */

    /* --- TIPOGRAFÍA --- */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* --- ESPACIADO --- */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* --- RADIOS Y SOMBRAS --- */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --shadow-glow: 0 0 30px rgba(56, 189, 248, 0.15);
}

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

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- UTILIDADES --- */
.text-gradient {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
    border-color: var(--color-accent);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }