/* Kanedey — tokens de diseño. Brutalismo oscuro/neón: fondo casi negro,
   acentos neón de alto impacto (magenta/cian/lima) para que los productos
   impresos "salten" sobre la interfaz. */

:root {
    /* Color base */
    --k-black: #0a0a0a;
    --k-white: #fafaf7;

    --k-bg: #0b0b0e;
    --k-surface: #17171d; /* no subir más allá de ~#1a1a20: compromete el contraste del magenta */
    --k-fg: #f5f5f7;

    /* Neón — para titulares, bordes, glows y CTAs; NUNCA como color de texto
       de cuerpo (demasiado saturado para lectura prolongada). */
    --k-magenta: #ff2e9c;
    --k-cyan: #00f0ff;
    --k-lime: #d6ff3f;
    --k-accent: var(--k-magenta);

    /* Regla de contraste: un fondo relleno en --k-lime o --k-cyan lleva
       texto oscuro (--k-bg), NUNCA --k-fg — en luminancia son casi
       blancos, "texto claro sobre lima" es casi ilegible. */
    --k-on-neon: var(--k-bg);

    /* Tipografía — Belgium es la fuente de marca (logo vectorizado real del
       cliente); Sora la sustituye hasta tener la licencia comercial (ver
       nota en fonts.css). No se cambia de familia en este rediseño: la
       "tipografía imponente" se logra con tamaño/peso sobre fondo oscuro. */
    --k-font-display: 'Belgium', 'Sora', 'Arial Black', sans-serif;
    --k-font-display-weight: 800;
    --k-font-secondary: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

    /* Espaciado */
    --k-space-1: 0.5rem;
    --k-space-2: 1rem;
    --k-space-3: 1.5rem;
    --k-space-4: 2.5rem;
    --k-space-5: 4rem;
    --k-space-6: 7rem;

    /* Otros */
    --k-radius: 2px;
    --k-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --k-border: 4px solid var(--k-fg); /* corregido: antes hardcodeado a --k-black (invisible en fondo oscuro) */

    /* Semántico — separado del acento de marca (magenta/lima/cian) a
       propósito: esos significan "marca/interactivo", no
       "correcto/incorrecto". Usado primero por el switch grande de tienda
       abierta/cerrada (admin) y su aviso espejo en el sitio público. Un
       solo valor por token: son rellenos sólidos (pill, banner), funcionan
       igual sobre el fondo oscuro público que sobre el claro del admin. */
    --k-success: #16a34a;
    --k-danger: #e11d48;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --k-ease: linear;
    }
}

/* Panel de administración y módulo de cliente: se conserva el brutalismo
   SOLO en la parte pública del sitio. Aquí se usa un lenguaje visual
   distinto a propósito — limpio, minimalista, tipo agencia premium — para
   que las tareas de trabajo (gestionar pedidos, editar un producto, revisar
   una compra) se sientan claras y rápidas, sin el peso visual del brutalismo
   (bordes gruesos, mayúsculas forzadas, neón) que sí tiene sentido en el
   sitio público como lenguaje de marca. El magenta de marca se conserva como
   único acento (botones, foco, estado activo del nav) para no caer en el
   azul/índigo genérico de cualquier plantilla de dashboard. */
.admin-shell,
.cuenta-shell,
.auth-page {
    --k-bg: #f6f6f8;
    --k-surface: #ffffff;
    --k-fg: #17171b;
    --k-fg-muted: #6b6b76;
    --k-line: #e7e7ec;
    --k-border: 1px solid var(--k-line);
    --k-radius: 12px;
    --k-radius-sm: 8px;
    --k-shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.045);
    --k-shadow-md: 0 12px 32px -12px rgba(20, 20, 30, 0.16);
    --k-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--k-accent) 18%, transparent);
}