/* === CARD FOUNDATIONS - Variables y base neutral para tarjetas === */

/* Variables neutrales para tarjetas (derivadas de tokens existentes) */
:root {
    /* Fondos y colores */
    --card-bg: var(--color-card-bg);
    --card-fg: var(--color-text);
    --card-fg-secondary: var(--color-text-secondary);
    --card-border: var(--color-border);
    
    /* Dimensiones y espaciado */
    --card-radius: var(--border-radius-lg);
    --card-padding: var(--spacing-lg);
    --card-gap: var(--spacing-md);
    
    /* Sombras */
    --card-shadow: var(--shadow-sm);
    --card-hover-shadow: var(--shadow-md);
    
    /* Iconos */
    --card-icon-size: 2.5rem;
    --card-icon-color: var(--color-primary);
    
    /* Transiciones */
    --card-transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    --card-hover-transform: translateY(-5px);
    
    /* Glow tokens */
    --nx-glow-start: #14ffe9;
    --nx-glow-end: #7a5cff;
    --card-border-width: 1px;
}

/* Base opt-in de baja especificidad para .nx-card */
.nx-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius);
    transition: var(--card-transition);
}

/* Trazabilidad: estas variables alimentan a:
 * - .feature-card (08-features.css)
 * - .dashboard-card, .dash-card (03-grid-cards.css)
 */

/* Dashboard adopta el look del Index (valores tomados de 08-features.css) */
#dashboard-root,
body[data-context="dashboard"] {
    --card-bg: var(--color-card-bg);
    --card-fg: var(--color-text);
    --card-border: var(--color-border);
    --card-radius: var(--border-radius-lg);
    --card-padding: var(--spacing-lg);
    --card-shadow: var(--shadow-sm);
    --card-hover-shadow: var(--shadow-md);
    --card-icon-size: 2.5rem;
    --card-icon-color: var(--color-primary);
    --card-transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    --card-hover-transform: translateY(-5px);
}

/* Dashboard adopta look del Index: ampliar scope (sin cambiar valores) */
:is(#dashboard-root, body[data-context="dashboard"], body[data-mode="dashboard"], main#dashboard, .dashboard-page) {
    --card-radius: var(--border-radius-lg, 16px);
    --card-padding: var(--spacing-lg, 24px);
    --card-shadow: var(--shadow-sm, 0 4px 16px rgba(0,0,0,.24));
    --card-hover-shadow: var(--shadow-md, 0 10px 26px rgba(0,0,0,.28));
    --card-hover-transform: translateY(-5px);
    --card-icon-size: 2.5rem;
    --card-icon-color: var(--color-primary, #56e3ff);
}