/* ==========================================================================
   Ergosetup · 1-tokens.css
   Variables de diseño. Único sitio donde se definen colores, tipos y medidas.
   Cambia aquí la identidad visual y se propaga a todo el sitio.

   El sitio tiene UN SOLO TEMA, el oscuro. No hay paleta clara, ni selector
   de tema, ni bloque @media (prefers-color-scheme): todo lo que se pinta
   sale de estos tokens. Si algún día vuelve el tema claro, se añade aquí y
   no en las hojas siguientes, que solo consumen variables.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Color: superficies ------------------------------------------------ */
  --paper:        #0E1214;   /* fondo general */
  --surface:      #161B1E;   /* tarjetas y bloques elevados */
  --surface-2:    #1D2428;   /* bloques secundarios, cabeceras de tabla */
  --surface-3:    #262E33;   /* separadores rellenos, estados hover */

  /* --- Color: texto ------------------------------------------------------ */
  --ink:          #ECEFF1;   /* titulares y texto principal */
  --ink-2:        #A9B4BB;   /* texto secundario, entradillas */
  --ink-3:        #7F8B93;   /* metadatos, notas al pie */

  /* --- Color: marca ------------------------------------------------------ */
  --brand:        #35C7AC;   /* teal: acento principal */
  --brand-hover:  #4FD8BF;
  --brand-soft:   #0F2E2A;   /* fondo suave de marca */
  --brand-line:   #1D4A43;

  /* --- Color: llamada a la acción (Amazon) ------------------------------- */
  --cta:          #E8963C;
  --cta-hover:    #F5AE55;
  --cta-soft:     #2E2113;
  --cta-line:     #4D3B21;

  /* --- Color: semántica de datos ----------------------------------------- */
  --bien:         #3DBE8F;   /* ventaja ergonómica, pros */
  --bien-soft:    #102E24;
  --mal:          #E4796A;   /* contras, desventajas */
  --mal-soft:     #331B17;
  --neutro:       #8A959D;   /* empates, sin dato */
  --neutro-soft:  #21282C;
  --aviso:        #DDB25A;   /* advertencias y matices */
  --aviso-soft:   #2C2415;
  --aviso-line:   #4A3D1F;

  /* --- Líneas y sombras -------------------------------------------------- */
  --line:         #2A3237;
  --line-fuerte:  #3B454B;
  --sombra-1: 0 1px 2px rgba(0,0,0,.3);
  --sombra-2: 0 2px 4px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.28);
  --sombra-3: 0 8px 24px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.3);

  /* --- Tipografía -------------------------------------------------------- */
  --fuente-titulo: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fuente-texto:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Escala tipográfica fluida: se adapta al ancho sin media queries */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   clamp(1.125rem, 0.9rem + 0.7vw, 1.375rem);
  --t-xl:   clamp(1.375rem, 1.05rem + 1.2vw, 1.875rem);
  --t-2xl:  clamp(1.75rem, 1.25rem + 2.1vw, 2.625rem);
  --t-3xl:  clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem);

  /* --- Espaciado --------------------------------------------------------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 6rem;

  /* --- Radios ------------------------------------------------------------ */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 24px;  --r-full: 999px;

  /* --- Medidas de layout ------------------------------------------------- */
  --ancho-max:    1200px;   /* contenedor general */
  --ancho-texto:  68ch;     /* medida de lectura cómoda en artículos */
  --alto-cabecera: 68px;

  --transicion: 160ms cubic-bezier(.4,0,.2,1);
}