/*
 * Tokens.css — identidad visual Ticketeando (manual de marca, la misma del estilo «ticketeando» del ERP:
 * Areas/Main/Styles/Estilos/ticketeando.css). TODO color y fuente de la interfaz sale de aquí: nada de colores fijos en App.css.
 * Codigo/Temas.cs repite los valores claros para lo que no lee CSS (manifiesto, correos). Mantener iguales.
 *   Violeta eléctrico #5B3DF6 (marca, acción) · Índigo noche #14103A (cabecera, texto) · Cian #22D3EE (acento, foco)
 *   Magenta #EC3FA0 (destacado) · Ámbar #FFB238 (aviso, tiempo) · Bruma #F6F5FC (fondo)
 *   Letras: Space Grotesk (títulos y cifras) · Plus Jakarta Sans (interfaz)
 */
:root {
    --tkt-violeta: #5b3df6;
    --tkt-violeta-oscuro: #4528d9;
    --tkt-violeta-suave: #ece8fe;
    --tkt-indigo: #14103a;
    --tkt-indigo-2: #221b5c;
    --tkt-negro: #0b0a17;
    --tkt-cian: #22d3ee;
    --tkt-cian-suave: #d9f7fc;
    --tkt-magenta: #ec3fa0;
    --tkt-ambar: #ffb238;
    --tkt-violeta-rgb: 91 61 246;
    --tkt-cian-rgb: 34 211 238;
    --color-velo: rgb(255 255 255 / .08);
    --color-velo-borde: rgb(255 255 255 / .14);
    --color-sombra-texto: rgb(0 0 0 / .25);
    /* el QR siempre negro sobre blanco (los lectores fallan con colores invertidos), también en modo oscuro */
    --color-qr-fondo: #ffffff;
    --color-qr-tinta: #14103a;

    --color-fondo: #f6f5fc;
    --color-superficie: #ffffff;
    --color-superficie-2: #f0eefa;
    --color-borde: #e1def2;
    --color-borde-fuerte: #8a84ad;   /* bordes de campos y botones: 3.7:1 sobre blanco (WCAG 1.4.11) */
    --color-texto: #14103a;
    --color-texto-2: #4d4870;
    --color-texto-3: #716d8a;
    --color-primario: var(--tkt-violeta);
    --color-primario-hover: var(--tkt-violeta-oscuro);
    --color-sobre-primario: #ffffff;
    --color-primario-suave: var(--tkt-violeta-suave);
    --color-enlace: var(--tkt-violeta);
    --color-acento: var(--tkt-cian);
    --color-sobre-acento: var(--tkt-indigo);
    --color-cabecera: var(--tkt-indigo);
    --color-sobre-cabecera: #ffffff;
    --color-sobre-cabecera-2: #b9b4e0;
    --color-exito: #0f8a5f;
    --color-exito-suave: #dcf5ea;
    --color-alerta: #9a5b00;
    --color-alerta-suave: #fff1d6;
    --color-error: #c4283c;
    --color-error-suave: #fde4e7;
    --color-foco: var(--tkt-cian);
    --color-sombra: 20 16 58;
    --color-libre: #ffffff;
    --color-ocupado: #d8d5ea;
    --color-elegido: var(--tkt-violeta);

    --letra-titulo: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --letra-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

    --radio-s: 10px;
    --radio-m: 16px;
    --radio-l: 24px;
    --sombra-1: 0 1px 2px rgb(var(--color-sombra) / .06), 0 2px 8px rgb(var(--color-sombra) / .06);
    --sombra-2: 0 8px 28px rgb(var(--color-sombra) / .14);
    --curva: cubic-bezier(.2, .8, .2, 1);
    --ancho: 1120px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-fondo: #0b0a17;
        --color-superficie: #15122e;
        --color-superficie-2: #1d1940;
        --color-borde: #2c2756;
        --color-borde-fuerte: #6b64a3;
        --color-texto: #f3f1ff;
        --color-texto-2: #c9c4ec;
        --color-texto-3: #9a95c2;
        --color-primario: #6a52fb;
        --color-primario-hover: #7f6aff;
        --color-enlace: #a99bff;
        --color-primario-suave: #2a2260;
        --color-cabecera: #0b0a17;
        --color-exito: #3ccf95;
        --color-exito-suave: #0f3328;
        --color-alerta: #ffc766;
        --color-alerta-suave: #3a2a0c;
        --color-error: #ff6b7e;
        --color-error-suave: #3d1420;
        --color-sombra: 0 0 0;
        --color-libre: #221d4a;
        --color-ocupado: #2c2756;
        --color-elegido: #6a52fb;
        --tkt-violeta-suave: #2a2260;
        --tkt-cian-suave: #0d3a44;
        color-scheme: dark;
    }
}