/* ===========================================================================
   Tokens: la única capa que hace falta tocar para rediseñar.
   ===========================================================================

   Un valor se declara **una vez**, con sus dos temas dentro. Antes la paleta
   oscura estaba escrita tres veces —`:root`, `:root[data-theme="dark"]` y otra
   copia dentro de `@media (prefers-color-scheme: dark)`— y cambiar un color
   obligaba a acertar en las tres.

   `light-dark()` necesita `color-scheme`, que además hace que los controles
   nativos (fechas, barras de desplazamiento) sigan el tema sin más trabajo.
   El botón de tema escribe `data-theme` en el `<html>`, y eso es lo que
   manda sobre la preferencia del sistema.
   =========================================================================== */

:root {
    color-scheme: light dark;

    /* --- Marca -------------------------------------------------------- */
    /* El mismo en los dos temas a propósito: es el color de la marca, no una
       superficie. Sin `light-dark()`, que con los dos lados iguales solo
       hacía parecer que alguna vez fueron distintos. El mismo valor está en
       `manifest.json` y en el `theme-color` de `index.html`, que durante un
       tiempo fue otro azul. */
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;

    /* --- Estado ------------------------------------------------------- */
    --success-color: #10b981;
    --success-hover: #059669;
    --warning-color: #f59e0b;
    --warning-hover: #d97706;
    --danger-color: #ef4444;
    --danger-hover: #dc2626;

    /* Los puntos del semáforo compiten con el texto de al lado, así que van
       más saturados que los colores de estado. */
    --semaphore-red: #dc2626;
    --semaphore-yellow: #d97706;
    --semaphore-green: #16a34a;

    /* --- Superficies y texto ------------------------------------------ */
    --text-primary: light-dark(#1f2937, #f9fafb);
    --text-secondary: light-dark(#6b7280, #d1d5db);
    --bg-primary: light-dark(#ffffff, #1f2937);
    --bg-secondary: light-dark(#f9fafb, #111827);
    --bg-tertiary: light-dark(#f3f4f6, #374151);
    --border-color: light-dark(#e5e7eb, #4b5563);
    --border-strong: light-dark(#d1d5db, #6b7280);
    /* Fondo oscuro fijo: detrás del vídeo del escáner el tema no pinta nada. */
    --bg-inverse: #111827;
    /* Texto sobre una superficie de marca o de estado: en los dos temas
       el fondo es el mismo color fuerte, así que el texto también. */
    --text-on-accent: #ffffff;

    /* --- Avisos de las páginas de acceso ------------------------------- */
    --notice-bg: light-dark(#dcfce7, #14532d);
    --notice-text: light-dark(#166534, #dcfce7);
    --danger-text: light-dark(#b91c1c, #fca5a5);

    /* --- Sombras ------------------------------------------------------ */
    /* Solo cambia la opacidad entre temas, así que el color es el token y la
       forma se escribe una vez. */
    --shadow-color: light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 30%));
    --shadow-color-soft: light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 20%));
    --shadow: 0 1px 3px 0 var(--shadow-color), 0 1px 2px 0 var(--shadow-color-soft);
    --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color-soft);
    --shadow-primary: 0 4px 12px rgb(37 99 235 / 40%);
    --shadow-primary-strong: 0 8px 25px rgb(37 99 235 / 50%);
    --shadow-primary-soft: 0 6px 18px rgb(37 99 235 / 40%);
    --shadow-card: 0 10px 30px rgb(0 0 0 / 13%);
    --focus-ring: 0 0 0 3px rgb(37 99 235 / 10%);
    --backdrop: rgb(0 0 0 / 50%);

    /* --- Espaciado ---------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    /* Nombre histórico del paso de 1rem; lo usan decenas de reglas. */
    --spacing: var(--space-4);

    /* --- Tipografía ---------------------------------------------------- */
    /* La regla 26 dice que un rediseño solo toca esta capa. Para el color era
       verdad; para la letra no lo era: había 79 `font-size` sueltas en cuatro
       ficheros con 16 valores distintos, y ocho de ellos apelotonados entre
       0,625rem y 1rem. Eso no es una escala, es ruido, y es lo que hace que
       una interfaz parezca mal hecha aunque los colores estén bien. */
    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Ocho pasos, y ninguno a medio camino de otro. */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 3rem;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Apretado para titulares, cómodo para párrafos. */
    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.6;

    /* Desvanecido por el borde derecho, para decir «aquí sigue habiendo
       cosas» en una fila que se desliza. Vive aquí porque lleva un color
       literal dentro, aunque de él solo importe la opacidad. */
    --mask-fade-right: linear-gradient(to right, #000 85%, transparent);

    /* --- Disposición --------------------------------------------------- */
    /* Ancho de lectura de una columna de texto. La aplicación entera vivía en
       `max-width: 800px` **sin una sola media query**, de modo que en un
       monitor de 1280 era una columna estrecha en medio de la nada y dentro
       de ella los nombres de producto se partían en cuatro líneas. */
    --content-width: 1100px;
    --content-width-narrow: 820px;
    /* El hueco que los botones flotantes necesitan para no taparlo todo. */
    --fab-size: 56px;
    --fab-gutter: 20px;

    /* --- Formas y movimiento ------------------------------------------ */
    --radius: 0.5rem;
    --radius-sm: 0.375rem;
    --radius-pill: 999px;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* El botón de tema manda sobre la preferencia del sistema. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }