/* Tokens de diseño. Todo el sitio sale de estas variables. */

:root {
  /* Color */
  --fondo: #f5f4f0;
  --superficie: #fdfcfa;
  --hundido: #ebe9e3;
  --tinta: #1b1d1c;
  --tinta-suave: #585c5a;
  --borde: #dfddd5;
  --borde-fuerte: #b9b6ab;
  --acento: #12464b;
  --acento-tinta: #ffffff;

  /* Estados: texto y fondo para chips, sólido para el mosaico. */
  --cumplida-texto: #1a6340;
  --cumplida-fondo: #e1f0e6;
  --cumplida-solido: #2f8f5b;
  --en-proceso-texto: #214c8a;
  --en-proceso-fondo: #e3ebf6;
  --en-proceso-solido: #3b6fbf;
  --parcial-texto: #7d5200;
  --parcial-fondo: #f7ebd0;
  --parcial-solido: #d2961a;
  --incumplida-texto: #94372f;
  --incumplida-fondo: #f5e3e0;
  --incumplida-solido: #b5524a;
  --sin-iniciar-texto: #585c5a;
  --sin-iniciar-fondo: #eae8e2;
  --sin-iniciar-solido: #cbc8be;
  --cambio-texto: #5e4179;
  --cambio-fondo: #ede6f3;
  --cambio-solido: #8a6baa;

  /* Tipografía */
  --familia: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto-xs: 0.8125rem;
  --texto-s: 0.9375rem;
  --texto-m: 1.0625rem;
  --texto-l: 1.3125rem;
  --texto-xl: 1.75rem;
  --texto-2xl: clamp(2rem, 1.2rem + 3vw, 2.75rem);
  --texto-3xl: clamp(2.375rem, 1rem + 6.4vw, 4.75rem);

  /* Espaciado: grilla de 8 px */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 1rem;
  --e4: 1.5rem;
  --e5: 2rem;
  --e6: 3rem;
  --e7: 4rem;
  --e8: 6rem;

  /* Forma */
  --radio-s: 8px;
  --radio-m: 12px;
  --radio-l: 16px;
  --sombra: 0 1px 2px rgb(40 36 20 / 0.04), 0 8px 24px -12px rgb(40 36 20 / 0.14);

  --transicion: 160ms ease-out;
  --ancho-maximo: 72rem;
  --ancho-lectura: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #161816;
    --superficie: #1f2220;
    --hundido: #272a28;
    --tinta: #ecebe6;
    --tinta-suave: #a5a9a4;
    --borde: #323633;
    --borde-fuerte: #555a56;
    --acento: #8fcfd0;
    --acento-tinta: #0d2426;

    --cumplida-texto: #8fd6ab;
    --cumplida-fondo: #1c3327;
    --cumplida-solido: #45a871;
    --en-proceso-texto: #a3c2f2;
    --en-proceso-fondo: #1e2c44;
    --en-proceso-solido: #5b8bd6;
    --parcial-texto: #edc56c;
    --parcial-fondo: #3a2e12;
    --parcial-solido: #d2961a;
    --incumplida-texto: #f0a59c;
    --incumplida-fondo: #40221f;
    --incumplida-solido: #c9675e;
    --sin-iniciar-texto: #b1b5b0;
    --sin-iniciar-fondo: #2b2e2c;
    --sin-iniciar-solido: #4a4e4b;
    --cambio-texto: #cdb3e6;
    --cambio-fondo: #32283f;
    --cambio-solido: #9c7fbd;

    --sombra: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.6);
  }
}