/* ═══════════════════════════════════════════════════════════════════════════
   BA Genetics · tokens de diseño del panel
   ═══════════════════════════════════════════════════════════════════════════

   Un único sitio donde viven color, tipografía, espaciado, radios y tiempos.
   Antes el navy estaba escrito a mano decenas de veces en `base.css` y en
   `header.css`, con cuatro escalas tipográficas distintas y cinco definiciones
   de botón: cambiar un color obligaba a buscar y reemplazar, y cada pantalla
   nueva heredaba la variante que tuviera más cerca.

   La paleta y las fuentes son deliberadamente **las de los informes en PDF**
   (`engines/render/style.py`): el portal y el informe tienen que reconocerse
   como la misma cosa. De ahí el fondo hueso en lugar del gris azulado de
   cualquier panel, los cinco colores de estado que ya usan los niveles de los
   informes, y las etiquetas en JetBrains Mono versalitas, que son la firma
   visual de la casa.

   Reglas de uso:
   · Ningún componente escribe un color literal: usa una variable.
   · El espaciado sale de la escala (--sp-1 … --sp-10), múltiplos de 4.
   · Los radios son pequeños (4 px). Nada de píldoras salvo el contador.
   · No hay sombras en el contenido: la profundidad la dan el papel sobre el
     fondo hueso y los filetes de 1 px. Sombra solo en lo que flota (menús).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  /* ── Color · superficie y tinta ─────────────────────────────────────────
     Fondo hueso (#FAF9F7), no gris azulado: es el papel de las portadas de
     los informes y lo que hace que el panel no parezca un SaaS cualquiera. */
  --c-ground:      #FAF9F7;   /* fondo de la página */
  --c-paper:       #FFFFFF;   /* tarjetas, tablas, formularios */
  --c-paper-2:     #F5F3F0;   /* cabeceras de tabla, filas alternas, chips */
  --c-line:        #E7E2DB;   /* filete de 1 px, cálido como el papel */
  --c-line-strong: #D6CFC5;   /* separador con más peso */

  --c-ink:         #12212E;   /* texto principal */
  --c-ink-2:       #55636F;   /* texto secundario */
  --c-ink-3:       #8A96A1;   /* texto apagado, etiquetas */
  --c-ink-on-dark: #FFFFFF;
  /* Texto sobre un fondo `--c-navy`. En claro es blanco; en oscuro el navy se
     invierte a un azul claro (para que se lea sobre el carbón) y entonces el
     texto encima tiene que ser oscuro, no blanco: con blanco, un botón primario
     o un chip activo en modo oscuro quedaban ilegibles. */
  --c-on-navy:     #FFFFFF;

  /* ── Color · estructura de marca ────────────────────────────────────────
     El navy de BA Genetics. El turquesa histórico (#2EC4B6) sale del panel:
     no aparece en ningún informe y era lo que más lo acercaba al aspecto de
     plantilla de arranque. */
  --c-navy:        #0B3D5B;
  --c-navy-2:      #0C1C2C;   /* barra superior, títulos sobre hueso */
  --c-navy-soft:   #EDF2F6;   /* fondo de selección/activo */

  /* ── Color · estado ─────────────────────────────────────────────────────
     Los mismos cinco de los niveles de acción de los informes
     (`engines/pharma/model.LEVEL_COLORS`) y de los niveles de los paneles. */
  --c-red:         #B91C1C;
  --c-orange:      #C2410C;
  --c-amber:       #D97706;
  --c-green:       #16A34A;
  --c-gray:        #94A3B8;
  --c-red-bg:      #FDF2F2;
  --c-orange-bg:   #FEF5EF;
  --c-amber-bg:    #FEF8EC;
  --c-green-bg:    #F1FAF3;
  --c-gray-bg:     #F4F6F8;
  /* Variantes para TEXTO sobre esos fondos. Los cinco de arriba son los del
     informe y no se tocan: son el color de la marca de nivel. Pero el verde y
     el ámbar de los informes, pensados para un relleno o un punto, sobre su
     propio fondo claro se quedan en 3,1:1, por debajo del 4,5 que pide una
     etiqueta como «Cargado» o «Pendiente». En oscuro los de nivel ya pasan
     de sobra, así que allí las dos variantes coinciden. */
  --c-red-ink:     #B91C1C;
  --c-orange-ink:  #C2410C;
  --c-amber-ink:   #92610A;
  --c-green-ink:   #15803D;

  /* ── Tipografía ─────────────────────────────────────────────────────────
     Cuerpo de 16 px en el móvil y 15 en pantallas grandes: el panel venía con
     12 px fijos («reducción global ≈ 20 %»), que en un teléfono es ilegible y
     además hace que iOS amplíe la página al enfocar un campo. Los formularios
     se quedan siempre en 16 px por ese motivo, sin excepción. */
  --f-body:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-title: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --f-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-body:   clamp(15px, 0.35vw + 14.2px, 16px);
  --fs-small:  clamp(13px, 0.25vw + 12.4px, 13.5px);
  --fs-micro:  11.5px;                                  /* etiquetas mono */
  --fs-input:  16px;                                    /* nunca menos */
  --fs-h1:     clamp(22px, 1.6vw + 18px, 28px);
  --fs-h2:     clamp(17px, 0.7vw + 15.4px, 19px);
  --fs-h3:     clamp(15px, 0.4vw + 14px, 16px);
  --lh-body:   1.55;
  --lh-title:  1.2;
  --tr-mono:   0.08em;                                  /* tracking versalitas */

  /* ── Espaciado ──────────────────────────────────────────────────────────*/
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;

  /* ── Geometría ──────────────────────────────────────────────────────────*/
  --r-sm: 3px; --r: 4px; --r-lg: 6px; --r-pill: 999px;
  --tap: 44px;                       /* objetivo táctil mínimo (WCAG 2.5.5) */
  --w-content: 1080px;               /* columna de contenido */
  --h-topbar: 54px;
  --h-bottomnav: 58px;
  --shadow-pop: 0 6px 24px -8px rgb(12 28 44 / 0.28), 0 1px 2px rgb(12 28 44 / 0.10);

  /* ── Movimiento ─────────────────────────────────────────────────────────*/
  --t-fast: 120ms;
  --t: 180ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ── Modo oscuro ──────────────────────────────────────────────────────────
   Mismo sistema, tokens redefinidos: ningún componente sabe en qué modo está.
   El hueso se convierte en un carbón cálido para que no se pierda el carácter
   de papel, y los colores de estado se aclaran lo justo para mantener el
   contraste sobre fondo oscuro sin dejar de ser reconocibles. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-ground:      #14171A;
    --c-paper:       #1B1F23;
    --c-paper-2:     #22272C;
    --c-line:        #2E343A;
    --c-line-strong: #3D454C;

    --c-ink:         #ECEAE6;
    --c-ink-2:       #A8B2BB;
    --c-ink-3:       #7C8894;

    --c-navy:        #7FB2D4;
    --c-navy-2:      #0F1418;
    --c-navy-soft:   #1E2A33;
    --c-on-navy:     #0B1116;

    --c-red:         #F87171;
    --c-orange:      #FB923C;
    --c-amber:       #FBBF24;
    --c-green:       #4ADE80;
    --c-gray:        #94A3B8;
    --c-red-bg:      #2A1A1B;
    --c-orange-bg:   #2A1F17;
    --c-amber-bg:    #292116;
    --c-green-bg:    #16241C;
    --c-gray-bg:     #22272C;
    --c-red-ink:     #F87171;
    --c-orange-ink:  #FB923C;
    --c-amber-ink:   #FBBF24;
    --c-green-ink:   #4ADE80;

    --shadow-pop: 0 8px 28px -8px rgb(0 0 0 / 0.6), 0 1px 2px rgb(0 0 0 / 0.4);
  }
}

/* Modo oscuro forzado por preferencia guardada, gane o no el sistema. */
:root[data-theme="dark"] {
  --c-ground: #14171A; --c-paper: #1B1F23; --c-paper-2: #22272C;
  --c-line: #2E343A; --c-line-strong: #3D454C;
  --c-ink: #ECEAE6; --c-ink-2: #A8B2BB; --c-ink-3: #7C8894;
  --c-navy: #7FB2D4; --c-navy-2: #0F1418; --c-navy-soft: #1E2A33; --c-on-navy: #0B1116;
  --c-red: #F87171; --c-orange: #FB923C; --c-amber: #FBBF24; --c-green: #4ADE80;
  --c-red-bg: #2A1A1B; --c-orange-bg: #2A1F17; --c-amber-bg: #292116;
  --c-green-bg: #16241C; --c-gray-bg: #22272C;
  --c-red-ink: #F87171; --c-orange-ink: #FB923C; --c-amber-ink: #FBBF24; --c-green-ink: #4ADE80;
  --shadow-pop: 0 8px 28px -8px rgb(0 0 0 / 0.6), 0 1px 2px rgb(0 0 0 / 0.4);
}

/* Quien pide menos movimiento no recibe ninguno. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}