/* Generado por diseno/scripts/tokens.py desde diseno/fuente/tokens.json:
   no se edita a mano (diseno/README.md, "Tokens"). */

/* Claro: el de siempre. */
:root {
  --qs-fondo: #EEEEF1;
  --qs-superficie-1: #FFFFFF;
  --qs-superficie-2: #E2E2E5;
  --qs-superficie-3: #FAFAFC;
  --qs-tinta-1: #0A0A0A;
  --qs-tinta-2: #262626;
  --qs-tinta-3: #4A4A4A;
  --qs-tinta-4: #AEAEB2;
  --qs-tinta-inversa: #FFFFFF;
  --qs-linea-suave: rgba(0,0,0,0.08);
  --qs-linea-media: rgba(0,0,0,0.16);
  --qs-linea-fuerte: #898989;
  --qs-estado-bien: #248A3D;
  --qs-estado-bien-suave: rgba(36,138,61,0.12);
  --qs-estado-bien-tinta: #1E7232;
  --qs-estado-aviso: #9A6B23;
  --qs-estado-aviso-suave: rgba(154,107,35,0.12);
  --qs-estado-aviso-tinta: #815A1D;
  --qs-estado-peligro: #9B3A34;
  --qs-estado-peligro-suave: rgba(155,58,52,0.12);
  --qs-estado-peligro-tinta: #9B3A34;
  --qs-estado-info: #2A5DB0;
  --qs-estado-info-suave: rgba(42,93,176,0.12);
  --qs-estado-info-tinta: #2A5DB0;
  --qs-vidrio-relleno: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.36));
  --qs-vidrio-relleno-fuerte: linear-gradient(180deg, rgba(255,255,255,0.80), rgba(250,250,252,0.66));
  --qs-vidrio-borde: inset 0 1px 0.5px rgba(255,255,255,0.95), inset 0 0 0 0.5px rgba(255,255,255,0.7), 0 0 0 0.5px rgba(0,0,0,0.07);
  --qs-vidrio-brillo: radial-gradient(120% 70% at 18% -10%, rgba(255,255,255,0.75), transparent 55%);
  --qs-vidrio-tinte: rgba(255,255,255,0.58);
  --qs-vidrio-desenfoque: 20px;
  --qs-sombra-1: 0 1px 2px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.04);
  --qs-sombra-2: inset 0 1px 0 #FFFFFF, 0 0 0 0.5px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.10);
  --qs-sombra-3: 0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.05);
  --qs-radio-chico: 8px;
  --qs-radio-medio: 16px;
  --qs-radio-grande: 24px;
  --qs-radio-capsula: 999px;
  --qs-luz-qs-a: #3A3A3A;
  --qs-luz-qs-b: #0A0A0A;
  --qs-luz-food-a: #AEB8C3;
  --qs-luz-food-b: #4F5A67;
  --qs-luz-volte-a: #FFD43B;
  --qs-luz-volte-b: #D69E00;
  --qs-ambiente-qs: radial-gradient(40% 30% at 20% 12%, rgba(255,255,255,0.9), transparent 70%);
  --qs-ambiente-food: radial-gradient(50% 30% at 20% 20%, rgba(185,132,106,0.12), transparent 70%), radial-gradient(45% 30% at 85% 45%, rgba(143,155,114,0.10), transparent 70%);
  --qs-ambiente-volte: radial-gradient(55% 45% at 20% 28%, rgba(176,150,112,0.16), transparent 70%), radial-gradient(50% 45% at 64% 86%, rgba(110,124,138,0.14), transparent 70%);
  --qs-fuente-texto: 'Geist', system-ui, sans-serif;
  --qs-fuente-datos: 'Geist Mono', ui-monospace, monospace;
}

@media (min-width: 641px) {
  :root {
    --qs-vidrio-desenfoque: 28px;
  }
}

/* Oscuro: por elección guardada (data-esquema) o por el sistema, salvo que se haya elegido claro. */
:root[data-esquema='oscuro'] {
  --qs-fondo: #08080A;
  --qs-superficie-1: #1A1A1D;
  --qs-superficie-2: #19191B;
  --qs-superficie-3: #262626;
  --qs-tinta-1: #FAFAFA;
  --qs-tinta-2: #D4D4D4;
  --qs-tinta-3: #A3A3A3;
  --qs-tinta-4: #737373;
  --qs-tinta-inversa: #0A0A0B;
  --qs-linea-suave: rgba(255,255,255,0.10);
  --qs-linea-media: rgba(255,255,255,0.20);
  --qs-linea-fuerte: #737373;
  --qs-estado-bien: #5FC48C;
  --qs-estado-bien-suave: rgba(95,196,140,0.16);
  --qs-estado-bien-tinta: #5FC48C;
  --qs-estado-aviso: #E3B341;
  --qs-estado-aviso-suave: rgba(227,179,65,0.16);
  --qs-estado-aviso-tinta: #E3B341;
  --qs-estado-peligro: #F2766B;
  --qs-estado-peligro-suave: rgba(242,118,107,0.16);
  --qs-estado-peligro-tinta: #F2766B;
  --qs-estado-info: #7AA7FF;
  --qs-estado-info-suave: rgba(122,167,255,0.16);
  --qs-estado-info-tinta: #7AA7FF;
  --qs-vidrio-relleno: linear-gradient(180deg, rgba(70,70,78,0.50), rgba(36,36,40,0.42));
  --qs-vidrio-relleno-fuerte: linear-gradient(180deg, rgba(46,46,52,0.78), rgba(28,28,32,0.70));
  --qs-vidrio-borde: inset 0 1px 0.5px rgba(255,255,255,0.28), inset 0 0 0 0.5px rgba(255,255,255,0.14), 0 0 0 0.5px rgba(0,0,0,0.6);
  --qs-vidrio-brillo: radial-gradient(120% 70% at 18% -10%, rgba(255,255,255,0.16), transparent 55%);
  --qs-vidrio-tinte: rgba(10,10,10,0.72);
  --qs-sombra-1: 0 0 0 0.5px rgba(255,255,255,0.07), 0 4px 14px rgba(0,0,0,0.4);
  --qs-sombra-2: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 0.5px rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.35);
  --qs-sombra-3: 0 14px 36px rgba(0,0,0,0.55);
  --qs-luz-qs-a: #FFFFFF;
  --qs-luz-qs-b: #9A9A9A;
  --qs-luz-food-a: #EEF2F6;
  --qs-luz-food-b: #97A3B1;
  --qs-luz-volte-a: #FFE580;
  --qs-luz-volte-b: #F5BE00;
  --qs-ambiente-qs: radial-gradient(40% 30% at 20% 12%, rgba(255,255,255,0.10), transparent 70%);
  --qs-ambiente-food: radial-gradient(50% 30% at 20% 20%, rgba(185,132,106,0.14), transparent 70%), radial-gradient(45% 30% at 85% 45%, rgba(143,155,114,0.10), transparent 70%);
  --qs-ambiente-volte: radial-gradient(55% 45% at 20% 28%, rgba(176,150,112,0.14), transparent 70%), radial-gradient(50% 45% at 64% 86%, rgba(110,124,138,0.14), transparent 70%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-esquema='claro']) {
    --qs-fondo: #08080A;
    --qs-superficie-1: #1A1A1D;
    --qs-superficie-2: #19191B;
    --qs-superficie-3: #262626;
    --qs-tinta-1: #FAFAFA;
    --qs-tinta-2: #D4D4D4;
    --qs-tinta-3: #A3A3A3;
    --qs-tinta-4: #737373;
    --qs-tinta-inversa: #0A0A0B;
    --qs-linea-suave: rgba(255,255,255,0.10);
    --qs-linea-media: rgba(255,255,255,0.20);
    --qs-linea-fuerte: #737373;
    --qs-estado-bien: #5FC48C;
    --qs-estado-bien-suave: rgba(95,196,140,0.16);
    --qs-estado-bien-tinta: #5FC48C;
    --qs-estado-aviso: #E3B341;
    --qs-estado-aviso-suave: rgba(227,179,65,0.16);
    --qs-estado-aviso-tinta: #E3B341;
    --qs-estado-peligro: #F2766B;
    --qs-estado-peligro-suave: rgba(242,118,107,0.16);
    --qs-estado-peligro-tinta: #F2766B;
    --qs-estado-info: #7AA7FF;
    --qs-estado-info-suave: rgba(122,167,255,0.16);
    --qs-estado-info-tinta: #7AA7FF;
    --qs-vidrio-relleno: linear-gradient(180deg, rgba(70,70,78,0.50), rgba(36,36,40,0.42));
    --qs-vidrio-relleno-fuerte: linear-gradient(180deg, rgba(46,46,52,0.78), rgba(28,28,32,0.70));
    --qs-vidrio-borde: inset 0 1px 0.5px rgba(255,255,255,0.28), inset 0 0 0 0.5px rgba(255,255,255,0.14), 0 0 0 0.5px rgba(0,0,0,0.6);
    --qs-vidrio-brillo: radial-gradient(120% 70% at 18% -10%, rgba(255,255,255,0.16), transparent 55%);
    --qs-vidrio-tinte: rgba(10,10,10,0.72);
    --qs-sombra-1: 0 0 0 0.5px rgba(255,255,255,0.07), 0 4px 14px rgba(0,0,0,0.4);
    --qs-sombra-2: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 0.5px rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.35);
    --qs-sombra-3: 0 14px 36px rgba(0,0,0,0.55);
    --qs-luz-qs-a: #FFFFFF;
    --qs-luz-qs-b: #9A9A9A;
    --qs-luz-food-a: #EEF2F6;
    --qs-luz-food-b: #97A3B1;
    --qs-luz-volte-a: #FFE580;
    --qs-luz-volte-b: #F5BE00;
    --qs-ambiente-qs: radial-gradient(40% 30% at 20% 12%, rgba(255,255,255,0.10), transparent 70%);
    --qs-ambiente-food: radial-gradient(50% 30% at 20% 20%, rgba(185,132,106,0.14), transparent 70%), radial-gradient(45% 30% at 85% 45%, rgba(143,155,114,0.10), transparent 70%);
    --qs-ambiente-volte: radial-gradient(55% 45% at 20% 28%, rgba(176,150,112,0.14), transparent 70%), radial-gradient(50% 45% at 64% 86%, rgba(110,124,138,0.14), transparent 70%);
  }
}