/**
 * Design tokens de @nexa/ui. Siempre se incluyen si se usa cualquier
 * componente — cualquier CSS externo puede seguir funcionando junto a
 * estos, son variables normales, no un framework que tome el control.
 *
 * Tema oscuro (Fase 43, issue #11): los componentes existentes ya usan
 * estos tokens para todos sus colores (verificado leyendo cada .css —
 * ninguno tiene un color hardcodeado), así que darles una variante
 * oscura acá alcanza, sin tocar ningún componente. Dos capas, mismo
 * patrón que usan sitios reales:
 * - Sin JS: `@media (prefers-color-scheme: dark)` respeta el sistema
 *   operativo, salvo que el propio proyecto haya forzado `light` a mano.
 * - Con JS (`platform.theme.set("dark"|"light")`, `theme.ts`):
 *   `[data-theme]` en `<html>` gana siempre, sin importar el sistema.
 */
:root {
    --nx-color-primary: #2563eb;
    --nx-color-primary-hover: #1d4ed8;
    --nx-color-on-primary: #ffffff;
    --nx-color-surface: #ffffff;
    --nx-color-text: #111827;
    --nx-color-border: #d1d5db;
    --nx-color-danger: #dc2626;
    --nx-color-on-danger: #ffffff;
    --nx-color-success: #16a34a;
    --nx-color-on-success: #ffffff;
    --nx-color-warning: #d97706;
    --nx-color-on-warning: #1f2937;
    --nx-color-zebra: #f3f4f6;

    --nx-space-1: 0.25rem;
    --nx-space-2: 0.5rem;
    --nx-space-3: 0.75rem;
    --nx-space-4: 1rem;

    --nx-radius-sm: 0.25rem;
    --nx-radius-md: 0.5rem;

    --nx-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;

    --nx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --nx-color-primary: #3b82f6;
        --nx-color-primary-hover: #60a5fa;
        --nx-color-on-primary: #0b1120;
        --nx-color-surface: #1f2937;
        --nx-color-text: #f3f4f6;
        --nx-color-border: #4b5563;
        --nx-color-danger: #f87171;
        --nx-color-on-danger: #1f0a0a;
        --nx-color-success: #22c55e;
        --nx-color-on-success: #052e16;
        --nx-color-warning: #f59e0b;
        --nx-color-on-warning: #1f2937;
        --nx-color-zebra: #263142;

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --nx-color-primary: #3b82f6;
    --nx-color-primary-hover: #60a5fa;
    --nx-color-on-primary: #0b1120;
    --nx-color-surface: #1f2937;
    --nx-color-text: #f3f4f6;
    --nx-color-border: #4b5563;
    --nx-color-danger: #f87171;
    --nx-color-on-danger: #1f0a0a;
    --nx-color-success: #22c55e;
    --nx-color-on-success: #052e16;
    --nx-color-warning: #f59e0b;
    --nx-color-on-warning: #1f2937;
    --nx-color-zebra: #263142;

    color-scheme: dark;
}

.nx-grid {
    display: grid;
    gap: var(--nx-space-4);
}

.nx-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.nx-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.nx-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 640px) {
    .nx-grid-cols-2,
    .nx-grid-cols-3,
    .nx-grid-cols-4 {
        grid-template-columns: 1fr;
    }
}