/* ===========================================================================
   tokens.css — ÚNICA fuente de verdad del sistema de diseño.

   Lo cargan los DOS frontends:
     · la app    → index.html, ANTES de styles.css
     · el panel  → landing/admin.html, ANTES de su <style> embebido
   El servidor lo sirve en las dos raíces (ver `p === 'tokens.css'` en
   server/index.js, mismo patrón que ui.js).

   Antes cada fichero declaraba su propia copia de la escala tipográfica, el
   radio, el gutter y la paleta neutra. Dos copias de un token es una copia
   que se olvida: en cuanto se toca una, las dos interfaces dejan de parecer
   la misma. Si añades o cambias un token compartido, va AQUÍ.

   Lo que NO vive aquí, porque es propio de cada entorno:
     · el tema OSCURO de la app (el panel es solo claro)
     · los colores por sección (--clr-*), que solo usa la app
     · sombras, transiciones y tonos de estado del panel
   =========================================================================== */

:root {
  /* --- Acento -------------------------------------------------------- */
  --accent: #4f8cff;
  --accent-strong: #2f6ff0;

  /* --- Escala tipográfica --------------------------------------------
     7 pasos. Antes había 20 tamaños distintos entre 8 y 26px en la app y 24
     entre 10 y 42px en el panel: eso no es una escala, es ruido, y hace que
     nada tenga jerarquía.
     **Usa una variable, no un px** — también en los estilos en línea.
     Nada por debajo de 11px: el público objetivo es no técnico y +40 años. */
  --fs-2xs: 11px;   /* pastillas, contadores, etiquetas mínimas */
  --fs-xs:  12.5px; /* metadatos, pies */
  --fs-sm:  13.5px; /* texto secundario, navegación */
  --fs-md:  15px;   /* cuerpo */
  --fs-lg:  17px;   /* título de fila */
  --fs-xl:  21px;   /* título de pantalla */
  --fs-2xl: 28px;   /* cifras grandes y saludo */

  /* --- Geometría ------------------------------------------------------
     --gutter es EL margen lateral, y es el mismo a cualquier ancho: si
     cambia con el viewport, la sección se mueve al redimensionar la
     ventana. En los media queries solo se toca el espacio VERTICAL. */
  --gutter: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --tap: 48px;      /* target táctil mínimo */

  /* --- Tipografía base ------------------------------------------------ */
  --font-sans: system-ui, -apple-system, "SF Pro Text", BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- Estados --------------------------------------------------------- */
  --success: #2ecc71;
  --warning: #f5a623;
  --danger:  #ff5d5d;
}

/* --- Paleta neutra en CLARO -------------------------------------------
   Lienzo BLANCO y cromo hundido en gris, como Things: el contenido es papel
   y la navegación se retira. Antes era al revés (fondo gris + tarjetas
   blancas), que es justo lo que obliga a encajonar cada fila para que se
   distinga del fondo.

   Se aplica a quien declare data-theme="light" (el panel admin siempre; la
   app cuando el usuario lo elige) y, si no hay elección explícita, cuando el
   sistema operativo prefiere claro. La app declara aparte su tema oscuro.  */
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --bg-elev-2: #f1f2f5;
  --sunken: #f7f8fa;
  --text: #16171c;
  --muted: #565a63;
  --text-soft: #8a8f9a;
  --border: #ebecf0;
  --border-soft: #f0f1f5;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff;
    --bg-elev: #ffffff;
    --bg-elev-2: #f1f2f5;
    --sunken: #f7f8fa;
    --text: #16171c;
    --muted: #565a63;
    --text-soft: #8a8f9a;
    --border: #ebecf0;
    --border-soft: #f0f1f5;
  }
}