/* ==========================================================
   tokens.css — sistema de diseño Fern v2.1
   ==========================================================

   ÚNICO lugar del proyecto donde vive un color, un radio, una sombra o una
   duración. Un hex fuera de este archivo es un error, y es greppable:

     grep -rnE '#[0-9a-fA-F]{3,6}' app/views app/theme | grep -v tokens.css

   Dos capas. Los valores crudos viven en la Layer 1 y los referencia SOLO la
   Layer 2. Los componentes leen únicamente la Layer 2, y eso es lo que hace que
   el modo oscuro no cueste nada: se redefine la Layer 2 y ningún componente se
   entera.

   Copiado sin cambios de fuentes/Reference/fern-design-system.html, con una
   sola adición nuestra, marcada más abajo: el bloque de preferencia del sistema.

   ---------------------------------------------------------------------------
   LAYER 1 — valores crudos. No usar directamente en un componente.
   --------------------------------------------------------------------------- */
:root{
  --w0:#ffffff; --w1:#fbfbfa; --w2:#f6f6f4; --w3:#efefec; --w4:#e4e4e0;
  --w5:#d3d3ce; --w6:#aaaaa4; --w7:#84847d; --w8:#5c5c56; --w9:#36362f; --w10:#1d1d1a;

  --p50:#eff5f2; --p100:#dcebe5; --p200:#b8d6cb; --p300:#8bbcac;
  --p400:#4c8b76; --p500:#2f7a64; --p600:#1e5245; --p700:#173f35;

  --a50:#fdf3e3; --a100:#f9e6c6; --a500:#c98a2b; --a600:#9a6410;
  --r50:#fcece9; --r100:#f8d8d3; --r500:#c0473c; --r600:#99342c;

  /* Chart series — muted, similar in value, none of them a state colour */
  --d1:#2f7a64; --d2:#a0603c; --d3:#7a5470; --d4:#7f7a3d; --d5:#5f6b78;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:28px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  --rs:10px; --rm:14px; --rl:18px; --rx:24px; --rp:999px;

  --ff:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fm:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* SEGUNDA ADICIÓN NUESTRA: la serif de los DOCUMENTOS que se le entregan al
     cliente —hoy el acta de reunión—. No es de Fern y no se usa en ninguna
     pantalla de la aplicación: existe justamente para que un documento no se
     vea como la herramienta que lo generó, que fue lo que la firma reportó el
     22-10 («es una foto de la pantalla»). Es la misma combinación del documento
     que ellos mandaron como ejemplo: serif en los títulos, sans en el cuerpo.
     Son fuentes del SISTEMA a propósito: una tercera familia de Google Fonts
     sería una descarga más en una página que se imprime, y el respaldo de una
     serif es otra serif. */
  --fd:Georgia,'Iowan Old Style','Times New Roman',Times,serif;
  --f12:12px; --f13:13px; --f14:14px; --f15:15px; --f17:17px;
  --f20:20px; --f24:24px; --f28:28px; --f30:30px; --f38:38px;

  --tq:120ms; --tm:180ms; --ts:260ms;
  --ease:cubic-bezier(.2,.8,.25,1);
  --ease-in:cubic-bezier(.4,0,1,1);

  --z-bar:100; --z-scrim:300; --z-rail:310; --z-pop:320; --z-over:340; --z-note:400;
  --ctl:40px;
}

/* ---------------------------------------------------------------------------
   LAYER 2 — semántica. Es la única que leen los componentes.
   --------------------------------------------------------------------------- */
:root,[data-mode="light"]{
  --page:var(--w2); --card:var(--w0); --inset:var(--w2); --hover:var(--w2); --press:var(--w3);
  /* La superficie y el borde de un CONTROL secundario (Fase 13).
     Existían por accidente: `.btn--soft` usaba `--card`, que es el mismo color
     de la página, así que las pastillas de filtro tenían 1.04 de contraste
     contra el fondo en claro y 1.11 en oscuro — invisibles como superficie, y
     la firma las reportó como «botones blancos que no se ven».
     `--line-ctl` es `--w7` y NO se redefine en oscuro a propósito: es de la
     Capa 1, así que el mismo valor da 3.48 contra la página clara y 4.63 contra
     la oscura. Los dos pasan el 3:1 que WCAG 1.4.11 pide para el borde de un
     control, que es donde de verdad se sostiene «esto es un botón». */
  /* El relleno sale de la RAMPA DE LA FIRMA, no de la escala de grises: un
     control gris en una aplicación con identidad se ve apagado, y la firma lo
     pidió así. `--p50` es el escalón más claro, así que el botón queda teñido
     sin competir con el principal.
     El borde sigue siendo neutro y sigue siendo `--w7`: es lo que garantiza el
     3:1 que WCAG pide para el contorno de un control, y ese número no puede
     depender del color que elija cada firma. */
  --ctl-bg:var(--p50); --line-ctl:var(--w7);
  /* La superficie del rail (Fase 13). Es el tono MÁS OSCURO de la rampa de la
     firma, no `--acc`: `--acc` es color de texto y de interfaz, y estirado a una
     columna entera de 900px de alto compite con todo lo que hay al lado.
     `--p700` con blanco encima pasa contraste de sobra en las dos rampas, y es
     el mismo gesto que usa la marca de Coonexa —azul noche de fondo, blanco
     encima—. No se redefine en oscuro: el rail es de la FIRMA, no del tema. */
  --rail-bg:var(--p700); --rail-fg:var(--w0);
  /* Los estados del rail van con alfa sobre el fondo de la firma y no con un
     tono fijo: así siguen sirviendo con CUALQUIER color de marca, que es de lo
     que se trata. Un tono fijo habría que recalcularlo por firma. */
  --rail-hover:rgba(255,255,255,.12); --rail-activo:rgba(255,255,255,.18);
  /* El texto secundario SOBRE la superficie de marca. Es blanco con alfa y no un
     gris: un gris fijo sobre un fondo que cambia con cada firma da un contraste
     distinto en cada instalación. Con alfa, la relación con el fondo se
     mantiene sea cual sea. */
  --rail-fg2:rgba(255,255,255,.72);
  --ink:var(--w10); --ink2:var(--w8); --ink3:var(--w7); --onaccent:#ffffff;
  --line:var(--w4); --line-soft:var(--w3); --line-firm:var(--w5);
  --acc:var(--p600); --acc-hover:var(--p700); --acc-text:var(--p600); --acc-line:var(--p300);
  --acc-wash:var(--p50); --acc-wash2:var(--p100);
  --ring:0 0 0 3px rgba(30,82,69,.18);
  --att:var(--a600); --att-face:var(--a500); --att-wash:var(--a50); --att-line:var(--a100);
  --bad:var(--r600); --bad-face:var(--r500); --bad-wash:var(--r50); --bad-line:var(--r100);
  --sh1:0 1px 2px rgba(29,29,26,.05);
  --sh2:0 2px 6px rgba(29,29,26,.06),0 1px 2px rgba(29,29,26,.04);
  --sh3:0 8px 20px rgba(29,29,26,.09),0 2px 5px rgba(29,29,26,.04);
  --sh4:0 20px 48px rgba(29,29,26,.14),0 4px 10px rgba(29,29,26,.06);
  --bone1:var(--w3); --bone2:var(--w4);
  --grid:rgba(29,29,26,.07);

  /* ----- Series de datos: --d1..--d5 -----
     Extraídos de Fern, que los traía y la extracción de la Fase 0b había
     perdido. Cuarta pérdida, cuarto síntoma distinto. Su propio comentario dice
     lo que importa: «muted, similar in value, none of them a state colour».
     O sea que Fern ya sabía que un color de serie no es un color de estado.
     Se asignan EN ORDEN FIJO, nunca ciclados. */
  --d1:#2f7a64; --d2:#a0603c; --d3:#7a5470; --d4:#7f7a3d; --d5:#5f6b78;

  /* ----- Estados de una actividad, para rellenar marcas -----
     NO son los mismos que --acc/--att/--bad, que son colores de TEXTO. Estos son
     de relleno y están medidos: pasan separación por daltonismo (peor par
     rojo↔ámbar, ΔE 12.4) y piso de visión normal (ΔE 16.3) en el orden
     `al día → por vencer → vencida → cerrada`, que es el orden en que se apilan.
     El orden importa porque la separación se mide entre pares ADYACENTES.

     Lo que no pasan, y se releva con etiquetas visibles: el verde y el gris
     quedan bajo el piso de croma —es Fern siendo un sistema apagado a
     propósito, y el gris DEBE leer neutro porque significa «cerrada»— y el
     ámbar y el gris quedan bajo 3:1 de contraste. Por eso cada segmento va con
     su etiqueta y su número, y la tabla acompaña siempre a la gráfica. */
  --e-aldia:#2f7a64; --e-porvencer:#c98a2b; --e-vencida:#c0473c; --e-cerrada:#aaaaa4;
}

[data-mode="dark"]{
  --page:#1a1a18; --card:#232320; --inset:#1f1f1d; --hover:#2b2b27; --press:#33332e;
  /* En oscuro el tinte va con ALFA sobre la página: un escalón claro de la
     rampa sobre fondo oscuro sería un parche luminoso, y uno oscuro volvería a
     ser invisible. `--acc-wash2` ya es el color de la firma al 24%. */
  --ctl-bg:var(--acc-wash2);
  --ink:#f2f2ee; --ink2:#b4b4ac; --ink3:#85857d; --onaccent:#ffffff;
  --line:#34342f; --line-soft:#2b2b27; --line-firm:#43433c;
  --acc:var(--p500); --acc-hover:var(--p400); --acc-text:#8fc9b4; --acc-line:#3c6d5e;
  --acc-wash:rgba(47,122,100,.14); --acc-wash2:rgba(47,122,100,.24);
  --ring:0 0 0 3px rgba(76,139,118,.32);
  --att:#e2ab63; --att-face:#b07b28; --att-wash:rgba(201,138,43,.14); --att-line:rgba(201,138,43,.3);
  --bad:#ec9a90; --bad-face:#b04437; --bad-wash:rgba(192,71,60,.14); --bad-line:rgba(192,71,60,.3);
  --d1:#4c9d84; --d2:#c07d55; --d3:#a0788f; --d4:#a39a5a; --d5:#8a95a2;
  --sh1:0 1px 2px rgba(0,0,0,.4); --sh2:0 2px 6px rgba(0,0,0,.4);
  --sh3:0 8px 20px rgba(0,0,0,.45); --sh4:0 20px 48px rgba(0,0,0,.55);
  --bone1:#2b2b27; --bone2:#33332e;
  --grid:rgba(242,242,238,.08);
  --d1:#4c9d84; --d2:#c07d55; --d3:#a0788f; --d4:#a39a5a; --d5:#8a95a2;

  /* El juego de oscuro NO es el de claro aclarado: se re-escalonó.
     Con los tokens `-face` que Fern usa en oscuro, ámbar (#b07b28) y rojo
     (#b04437) quedaban en ΔE 13.7 de visión normal —bajo el piso de 15, o sea
     indistinguibles incluso sin daltonismo—. Subir el ámbar al `--att` de
     oscuro lo arregla: peor par gris↔rojo, ΔE 10.0 daltonismo · 16.3 normal. */
  --e-aldia:#4c9d84; --e-porvencer:#e2ab63; --e-vencida:#b04437; --e-cerrada:#84847d;
}

/* ---------------------------------------------------------------------------
   ADICIÓN NUESTRA — respetar la preferencia del sistema

   Fern trae el modo oscuro solo por toggle explícito (`data-mode`), con claro
   por defecto. Para una herramienta donde un contador pasa el día adentro, el
   default debería ser lo que el sistema operativo ya dice.

   El `:not([data-mode="light"])` es lo que hace que el toggle siga ganando en
   las dos direcciones: si alguien eligió claro a mano, se respeta aunque el
   sistema esté en oscuro.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --page:#1a1a18; --card:#232320; --inset:#1f1f1d; --hover:#2b2b27; --press:#33332e;
  /* En oscuro el tinte va con ALFA sobre la página: un escalón claro de la
     rampa sobre fondo oscuro sería un parche luminoso, y uno oscuro volvería a
     ser invisible. `--acc-wash2` ya es el color de la firma al 24%. */
  --ctl-bg:var(--acc-wash2);
    --ink:#f2f2ee; --ink2:#b4b4ac; --ink3:#85857d; --onaccent:#ffffff;
    --line:#34342f; --line-soft:#2b2b27; --line-firm:#43433c;
    --acc:var(--p500); --acc-hover:var(--p400); --acc-text:#8fc9b4; --acc-line:#3c6d5e;
    --acc-wash:rgba(47,122,100,.14); --acc-wash2:rgba(47,122,100,.24);
    --ring:0 0 0 3px rgba(76,139,118,.32);
    --att:#e2ab63; --att-face:#b07b28; --att-wash:rgba(201,138,43,.14); --att-line:rgba(201,138,43,.3);
    --bad:#ec9a90; --bad-face:#b04437; --bad-wash:rgba(192,71,60,.14); --bad-line:rgba(192,71,60,.3);
    --d1:#4c9d84; --d2:#c07d55; --d3:#a0788f; --d4:#a39a5a; --d5:#8a95a2;
    --sh1:0 1px 2px rgba(0,0,0,.4); --sh2:0 2px 6px rgba(0,0,0,.4);
    --sh3:0 8px 20px rgba(0,0,0,.45); --sh4:0 20px 48px rgba(0,0,0,.55);
    --bone1:#2b2b27; --bone2:#33332e;
    --grid:rgba(242,242,238,.08);
    --d1:#4c9d84; --d2:#c07d55; --d3:#a0788f; --d4:#a39a5a; --d5:#8a95a2;
    --e-aldia:#4c9d84; --e-porvencer:#e2ab63; --e-vencida:#b04437; --e-cerrada:#84847d;
  }
}

/* ---------------------------------------------------------------------------
   ERGONOMÍA POR PUNTERO — §12.4

   El ancho decide el LAYOUT; el puntero decide la ERGONOMÍA. Son dos preguntas
   distintas y confundirlas es la causa del caso que más se olvida: una tablet
   táctil de 900px necesita objetivos de 48px, una ventana de 900px en un laptop
   no.

   Ningún componente hard-codea una altura: todas salen de estos tokens.
   --------------------------------------------------------------------------- */
:root { --ctl:40px; --ctl-sm:32px; --row:44px; --in-fs:14px; --slop:0px; }

@media (pointer:coarse) {
  /* --in-fs en 16px no es estético: cualquier campo por debajo hace que Safari
     en iOS haga zoom a toda la página al enfocarlo, y no vuelve. La otra
     solución habitual, maximum-scale=1, desactiva el pinch zoom para todos y no
     se usa. */
  :root { --ctl:48px; --ctl-sm:40px; --row:52px; --in-fs:16px; --slop:6px; }
}