/* 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), pero su licencia sigue sin resolverse y NO existe un
       @font-face para ella (ver fonts.css) — nunca poner aquí un nombre de
       fuente que no tenga su propio @font-face: si el visitante tiene
       instalada CUALQUIER fuente con ese nombre exacto (aunque no tenga
       nada que ver con la marca), el navegador la usa igual, con la
       cobertura de glifos que sea — bug real detectado: en varios equipos
       "Belgium" coincidía con una fuente local sin acentos españoles
       completos, así que Ó/Ñ se veían con una tipografía distinta al
       resto del texto. Archivo Black es el sustituto real mientras tanto
       (geométrica y "escuadrada" como Belgium, SIL OFL); se reactiva
       'Belgium' aquí SOLO junto con su propio @font-face en fonts.css,
       nunca antes. */
    --k-font-display: 'Archivo Black', 'Arial Black', sans-serif;
    --k-font-display-weight: 900;
    --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,
.cotizacion-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);
}