/* tokens.css · el único archivo de tokens de hydracellapp.com (presentación, entrada y cuenta).
   Une los de la web v5 y los del portal: los colores de las dos coincidían y se conservan tal cual.
   Nombres del portal (--bg, --surface, --accent, --err, --warn...) y, debajo de cada bloque, los de la v5
   (--stage, --hc-link, --band...) como alias, para que el CSS de la portada no cambie.
   Fuera de este archivo no hay literales de color. Tema: claro en :root; oscuro con prefers-color-scheme
   (si nadie eligió «claro») y con [data-theme="dark"]. Los puntos de corte van como literal dentro de @media. */

:root {
  color-scheme: light dark;

  /* ── tipografía ── */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: Consolas, "Cascadia Mono", ui-monospace, monospace;
  --fw-normal: 400;
  --fw-medio: 500;
  --fw-fuerte: 600;
  --fw-marca: 800;                                       /* solo la palabra «HydraCell» */

  /* portada: 40–72 / 32–48 / 17 */
  --fs-display: clamp(2.5rem, min(1.6rem + 3.4vw, 9svh), 4.5rem);
  --fs-h2: clamp(2rem, 1.648rem + 1.502vw, 3rem);
  --fs-h3: clamp(1.5rem, 1.368rem + 0.563vw, 1.875rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-ui: 0.875rem;                                     /* 14 */
  --fs-nota: 0.8125rem;                                  /* 13 */

  /* cuenta: 12 / 14 / 16 / 20 / 28 (+ 18 de la marca) */
  --fs-app-nota: 12px;
  --fs-app-ui: 14px;
  --fs-app-cuerpo: 16px;
  --fs-app-marca: 18px;
  --fs-app-titulo: 20px;
  --fs-app-cifra: 28px;

  --lh-display: 1;
  --lh-h2: 1.1;
  --lh-h3: 1.25;
  --lh-lead: 1.55;
  --lh-body: 1.65;
  --lh-ui: 1.4;
  --lh-nota: 1.5;
  --lh-app: 1.5;
  --lh-app-titulo: 1.3;
  --lh-app-cifra: 1.15;

  --tr-display: -0.035em;
  --tr-h2: -0.045em;
  --tr-h3: -0.015em;
  --tr-lead: -0.01em;
  --tr-body: -0.01em;
  --tr-app-titulo: -0.015em;

  /* ── espacio: 4 / 8 / 12 / 16 / 24 / 40 / 48 / 56 ── */
  --s-0: 2px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 48px; --s-8: 56px;
  --container: 1296px;
  --margen: clamp(16px, 5vw, 72px);
  --margen-app: 16px;
  --margen-app-escritorio: 32px;
  --seccion: clamp(8rem, 6.6rem + 2.8vw, 10rem);
  --nav-h: 64px;

  /* ── anchos ── */
  --ancho-lectura: 720px;
  --ancho-lateral: 248px;
  --ancho-entrada: 440px;
  --ancho-dialogo: 480px;
  --ancho-texto: 34rem;

  /* ── forma: 0 / 8 / 16 / 999 ── */
  --r-0: 0;
  --r-campo: 8px;
  --r-lista: 12px;
  --r-frame: 12px;
  --r-hoja: 16px;
  --r-pill: 999px;
  --r-circulo: 50%;

  /* ── grosor: el segundo canal del estado ── */
  --b-1: 1px;
  --b-2: 2px;
  --b-3: 3px;
  --foco: 2px;
  --foco-separacion: 3px;

  /* ── alturas ── */
  --h-toque: 44px;
  --h-mouse: 36px;
  --h-pestanas: 48px;
  --h-fila: 48px;
  --glifo: 10px;
  --icono: 16px;

  /* ── movimiento ── */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-prog: cubic-bezier(0.25, 1, 0.5, 1);
  --t-toque: 100ms;
  --t-hover: 150ms;
  --t-hoja: 200ms;
  --t-estado: 240ms;
  --t-tema: 360ms;
  --t-fila: 520ms;
  --t-revela: 720ms;
  --t-medio: 960ms;
  --t-guarda-toque: 500ms;
  --desplaza-hoja: 8px;

  /* ── capas ── */
  --z-arriba: 20;
  --z-cab: 50;
  --z-hoja: 60;

  /* ── imágenes con versión clara y oscura (v5) ── */
  --show-light: block;
  --show-dark: none;
  --filtro-solo-claro: none;
  --borde-solo-claro: 0px;
  --ver-claro: inline-block;
  --ver-oscuro: none;
}

/* ── color · claro ── */
:root {
  --bg: #f3f2f2;
  --surface: #f8f4f4;
  --line: #ddd9d9;
  --text: #201e1d;
  --muted: #605d5d;
  --control: #dcd8d8;
  --field: #e4e0e0;

  /* rojo de marca: el emblema, la raya activa y el foco del campo; nunca texto corrido */
  --accent: #ec3013;
  --accent-fill: #dd2b0f;
  --accent-hover: #ae1800;
  --accent-pressed: #7c1405;
  --accent-text: #7c1405;
  --accent-soft: #ffe0d9;
  --accent-fg: #ffffff;

  /* estados: forma y texto, nunca solo color */
  --err: #b00020;
  --warn: #7a5c00;
  --ok: #0e7a3c;
  --idle: #7d7979;

  --btn-ink-bg: #201e1d;
  --btn-ink-fg: #f3f2f2;
  --btn-ink-hover: #3a3735;
  --scrim: #00000080;

  /* botón de Google según sus lineamientos de marca (tema claro y oscuro) */
  --google-fondo: #ffffff;
  --google-borde: #747775;
  --google-texto: #1f1f1f;
  --google-hover: #f1f1f1;

  /* red de «En camino» (lienzo) */
  --red-vivo: var(--accent);
  --red-gris: #b9b6b5;
  --red-ka: 1;

  /* el teléfono de las grabaciones: igual en claro y en oscuro (es un aparato, no la página) */
  --tel-pantalla: #000000;
  --tel-marco: #141313;
  --tel-borde: #555555;
  --tel-texto: #ffffff;
  --tel-fondo: #201e1d;
  --recorte-fondo: #f1f1f1;

  /* alias de la v5 */
  --stage: #ece9e8;
  --hc-link: #7c1405;
  --hc-control: #dcd8d8;
  --hc-field: #e4e0e0;
  --hc-secundario: #444141;
  --hc-segmento: #f8f4f4;
  --band: #1d1d1d;
  --band-text: #f3f2f2;
  --band-muted: #bab6b6;
  --band-line: #3a3a3a;
}

:root[data-theme="light"] { color-scheme: light; }

/* ── color · oscuro, por el sistema ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #201e1d;
    --surface: #2d2b2b;
    --line: #3d3a3a;
    --text: #f3f2f2;
    --muted: #bab6b6;
    --control: #3d3a3a;
    --field: #2d2b2b;
    --accent-text: #ff9783;
    --accent-soft: #4d170e;
    --err: #ff6b7a;
    --warn: #f5b544;
    --ok: #47c97e;
    --idle: #9b9797;
    --btn-ink-bg: #f3f2f2;
    --btn-ink-fg: #201e1d;
    --btn-ink-hover: #ffffff;
    --stage: #262423;
    --google-fondo: #131314;
    --google-borde: #8e918f;
    --google-texto: #e3e3e3;
    --google-hover: #1e1f20;
    --red-vivo: #ff6b4f;
    --red-gris: #5b5756;
    --red-ka: .88;
    --hc-link: #ff9783;
    --hc-control: #3d3a3a;
    --hc-field: #2d2b2b;
    --hc-secundario: #d7d3d3;
    --hc-segmento: #5a5656;
    --show-light: none;
    --show-dark: block;
    --filtro-solo-claro: brightness(0.7);
    --borde-solo-claro: 1px;
    --ver-claro: none;
    --ver-oscuro: inline-block;
  }
}

/* ── color · oscuro, elegido ── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #201e1d;
  --surface: #2d2b2b;
  --line: #3d3a3a;
  --text: #f3f2f2;
  --muted: #bab6b6;
  --control: #3d3a3a;
  --field: #2d2b2b;
  --accent-text: #ff9783;
  --accent-soft: #4d170e;
  --err: #ff6b7a;
  --warn: #f5b544;
  --ok: #47c97e;
  --idle: #9b9797;
  --btn-ink-bg: #f3f2f2;
  --btn-ink-fg: #201e1d;
  --btn-ink-hover: #ffffff;
  --stage: #262423;
  --google-fondo: #131314;
  --google-borde: #8e918f;
  --google-texto: #e3e3e3;
  --google-hover: #1e1f20;
  --red-vivo: #ff6b4f;
  --red-gris: #5b5756;
  --red-ka: .88;
  --hc-link: #ff9783;
  --hc-control: #3d3a3a;
  --hc-field: #2d2b2b;
  --hc-secundario: #d7d3d3;
  --hc-segmento: #5a5656;
  --show-light: none;
  --show-dark: block;
  --filtro-solo-claro: brightness(0.7);
  --borde-solo-claro: 1px;
  --ver-claro: none;
  --ver-oscuro: inline-block;
}

/* «reducir movimiento»: lo que se mueve al tocar dura 0 */
@media (prefers-reduced-motion: reduce) {
  :root { --t-toque: 0ms; --t-hover: 0ms; --t-hoja: 0ms; --t-estado: 0ms; --t-tema: 0ms; --desplaza-hoja: 0px; }
}

html, body { background: var(--bg); color: var(--text); }