/* ============================================================================
   TOKENS.CSS  —  El panel de mandos del diseño
   ----------------------------------------------------------------------------
   Este es el ÚNICO fichero que necesitas tocar para cambiar el aspecto global
   de todos los apuntes. Cambia un valor aquí y cambia en todas las páginas.

   Bloques editables:
     [1] Paleta — modo claro
     [2] Paleta — modo oscuro
     [3] Acentos semánticos (fila, columna, resultado, escalar...)
     [4] Tipografía
     [5] Escala de espaciado
     [6] Bordes, sombras y radios
     [7] Geometría de las matrices
     [8] Tiempos de animación
   ========================================================================== */

:root {

  /* == [1] PALETA — MODO CLARO ============================================ */
  --c-fondo:          #faf8f4;   /* fondo de la página (papel)              */
  --c-superficie:     #ffffff;   /* tarjetas, cajas, paneles                */
  --c-superficie-2:   #f2eee6;   /* superficie hundida, cabeceras de tabla  */
  --c-texto:          #201d1a;   /* texto principal                         */
  --c-texto-suave:    #55504a;   /* párrafos secundarios, descripciones     */
  --c-texto-tenue:    #8b8378;   /* metadatos, numeración, notas al pie     */
  --c-borde:          #e4ded2;   /* líneas y separadores                    */
  --c-borde-fuerte:   #2b2724;   /* delimitadores de matriz, reglas gruesas */
  --c-marca:          #4b3fa8;   /* color de marca / enlaces                */
  --c-marca-suave:    #ece9f9;   /* fondo tintado con el color de marca     */
  --c-sombra:         28 24 20;  /* RGB sin coma, para usar con alpha       */

  /* == [3] ACENTOS SEMÁNTICOS ============================================= */
  /* Cada rol tiene un color de trazo y un fondo tintado a juego.           */
  --c-fila:           #2563c9;   /* azul    — filas                         */
  --c-fila-bg:        #e5eefc;
  --c-columna:        #c02a86;   /* magenta — columnas                      */
  --c-columna-bg:     #fce7f3;
  --c-resultado:      #0f7a6c;   /* verde   — resultados                    */
  --c-resultado-bg:   #dcf5f0;
  --c-escalar:        #b06a05;   /* ámbar   — escalares y constantes        */
  --c-escalar-bg:     #fdf1dc;
  --c-hecho:          #4d8a2f;   /* oliva   — pasos ya completados          */
  --c-hecho-bg:       #ecf6e3;

  /* == [4] TIPOGRAFÍA ===================================================== */
  --f-prosa:  "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
              Georgia, "Times New Roman", serif;
  --f-ui:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
              Arial, sans-serif;
  --f-mono:   ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --t-xs:   0.75rem;   /* 12px — etiquetas                                  */
  --t-sm:   0.875rem;  /* 14px — metadatos, pies                            */
  --t-base: 1.0625rem; /* 17px — cuerpo de texto                            */
  --t-md:   1.1875rem; /* 19px — entradilla                                 */
  --t-lg:   1.5rem;    /* 24px — h3                                         */
  --t-xl:   2rem;      /* 32px — h2                                         */
  --t-2xl:  2.75rem;   /* 44px — h1                                         */
  --t-3xl:  3.75rem;   /* 60px — portada                                    */

  --lh-apretado: 1.2;
  --lh-normal:   1.5;
  --lh-prosa:    1.75;

  /* == [5] ESPACIADO (escala de 4 px) ===================================== */
  --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;

  --ancho-prosa:  38rem;   /* medida óptima de lectura (~70 caracteres)      */
  --ancho-pagina: 64rem;   /* contenedor general                            */
  --ancho-ancho:  84rem;   /* para figuras que se salen del texto           */

  /* == [6] BORDES, RADIOS Y SOMBRAS ======================================= */
  --r-sm: 4px;   --r-md: 8px;   --r-lg: 14px;   --r-full: 999px;

  --s-1: 0 1px 2px  rgb(var(--c-sombra) / 0.06);
  --s-2: 0 2px 8px  rgb(var(--c-sombra) / 0.08);
  --s-3: 0 8px 28px rgb(var(--c-sombra) / 0.12);

  /* == [7] GEOMETRÍA DE LAS MATRICES ===================================== */
  --celda:        3.25rem;   /* lado de una celda                           */
  --celda-hueco:  0.5rem;    /* separación entre celdas                     */
  --delim-ancho:  0.7rem;    /* grosor visual del paréntesis/corchete       */
  --delim-trazo:  2.5px;     /* grosor de línea del delimitador             */

  /* == [8] TIEMPOS ======================================================= */
  --v-rapido: 140ms;
  --v-medio:  280ms;
  --v-lento:  520ms;
  --curva:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* == [2] PALETA — MODO OSCURO ============================================ */
/* Se aplica cuando el sistema está en oscuro y el usuario no ha elegido,
   o cuando el usuario elige oscuro explícitamente.                        */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --c-fondo:        #15171b;
    --c-superficie:   #1d2026;
    --c-superficie-2: #262a31;
    --c-texto:        #e9e6e1;
    --c-texto-suave:  #b3aea6;
    --c-texto-tenue:  #7d7871;
    --c-borde:        #333941;
    --c-borde-fuerte: #cfcac2;
    --c-marca:        #a99bf5;
    --c-marca-suave:  #262347;
    --c-sombra:       0 0 0;

    --c-fila:         #6ba4f8;  --c-fila-bg:      #1b2b44;
    --c-columna:      #f07ec4;  --c-columna-bg:   #3d1d33;
    --c-resultado:    #4fd6bf;  --c-resultado-bg: #123832;
    --c-escalar:      #f0b45c;  --c-escalar-bg:   #3b2c14;
    --c-hecho:        #9ad46f;  --c-hecho-bg:     #22331a;
  }
}

:root[data-tema="oscuro"] {
  --c-fondo:        #15171b;
  --c-superficie:   #1d2026;
  --c-superficie-2: #262a31;
  --c-texto:        #e9e6e1;
  --c-texto-suave:  #b3aea6;
  --c-texto-tenue:  #7d7871;
  --c-borde:        #333941;
  --c-borde-fuerte: #cfcac2;
  --c-marca:        #a99bf5;
  --c-marca-suave:  #262347;
  --c-sombra:       0 0 0;

  --c-fila:         #6ba4f8;  --c-fila-bg:      #1b2b44;
  --c-columna:      #f07ec4;  --c-columna-bg:   #3d1d33;
  --c-resultado:    #4fd6bf;  --c-resultado-bg: #123832;
  --c-escalar:      #f0b45c;  --c-escalar-bg:   #3b2c14;
  --c-hecho:        #9ad46f;  --c-hecho-bg:     #22331a;
}