/* ===========================================================================
   Creative Socio — Design Tokens v1.0 (copia para el CRM)
   Fuente única de verdad: ../../design-system/tokens.css. Se copia acá
   —y no se enlaza cruzando carpetas— porque `deploy.sh` solo sube `api/`
   y `public/`: un <link> a la carpeta hermana funcionaría en local y
   rompería en producción. Si el original cambia, actualizar acá a mano.

   Una decisión de este proyecto que NO está en el original:
   - Titulares en Sofia Pro Bold (kit Typekit propio, <link> en index.php),
     pedido explícito para el CRM. El cuerpo quedó en Inter, tal como
     recomienda el design system general — se probó Soleil Light primero
     y se volvió atrás.
   =========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;   /* variable: cubre de light a bold con un solo archivo */
  font-display: swap;
  src: url("fonts/Inter-var-latin.woff2") format("woff2");
  /* Solo subset latin — cubre español e inglés (incluye ñ, á-ú, ¿¡).
     Bajado una vez de Google Fonts y servido desde acá: ni el runtime
     ni el visitante dependen de fonts.googleapis.com. */
}

:root {
  /* -------------------------------------------------------------------------
     COLOR — Neutrales
     La marca es monocroma. El negro hace el trabajo pesado (botones primarios,
     titulares, estado activo). El color solo aparece para comunicar estado.
     ------------------------------------------------------------------------- */
  --cs-ink:        #101010;
  --cs-ink-hover:  #2B2B2B;
  --cs-gray-900:   #1F1F1F;
  --cs-gray-700:   #545454;
  --cs-gray-600:   #6B6B6B;
  --cs-gray-400:   #AFAFAF;
  --cs-gray-300:   #D6D6D6;
  --cs-gray-200:   #E2E2E2;
  --cs-gray-100:   #EEEEEE;
  --cs-gray-50:    #F6F6F6;
  --cs-white:      #FFFFFF;

  /* -------------------------------------------------------------------------
     COLOR — Semántico. Solo para estado, nunca decorativo.
     ------------------------------------------------------------------------- */
  --cs-blue:         #276EF1;
  --cs-blue-hover:   #174EB6;
  --cs-blue-bg:      #EFF3FE;
  /* Verde y ámbar oscurecidos respecto del design system v1.0. Los
     originales —#05944F y #B26B00— no llegaban a 4.5:1 sobre sus propios
     fondos: 3.41 el verde en `.e-cliente` y 3.80 el ámbar en `.e-piloto`,
     con texto de 12px. Tampoco sobre blanco, donde viven `.t-verde` y
     `.alerta` (3.92 y 4.20). Se escaló cada canal por el mismo factor,
     así que el tono no se mueve, solo baja el brillo hasta cumplir.
     Ahora: 4.61 y 4.55 sobre sus fondos, 5.29 y 5.04 sobre blanco. */
  --cs-green:        #047C42;
  --cs-green-bg:     #E6F2ED;
  --cs-amber:        #A06000;
  --cs-amber-bg:     #FDF2E2;
  --cs-red:          #C81E1E;
  --cs-red-hover:    #9E1717;
  --cs-red-bg:       #FCECEC;

  /* Cuatro matices más, propios del CRM y no del design system general.
     Existen porque el embudo tiene NUEVE etapas y la paleta base da para
     cuatro: con solo cuatro, cinco estados se dibujaban como grises que
     se oscurecían, y en el mapa —donde el punto de 9px es la única señal,
     sin palabra al lado— "auditado", "contactado" y "conversación" eran
     el mismo punto negro tres veces.

     Mismo método que el resto: 4.5:1 contra su propio fondo y contra
     blanco, saturación 0.72 para que no desentonen con --cs-blue.

     ELEGIDOS POR DISTANCIA PERCEPTUAL, NO POR CONTRASTE. El ratio de
     WCAG mide luminancia: dos matices distintos con la misma luminancia
     dan 1.0:1 y aun así se distinguen a simple vista. Para puntos de
     color en un mapa la métrica es ΔE. Medido sobre los nueve: el par
     más parecido queda en 14.2 (los dos grises de los extremos) y el
     resto por encima de 23.

     Y simulado en deuteranopia, que es el 8 % de los hombres: ahí el
     peor par cae a 9.5 (contactado/piloto). Nueve categorías separables
     solo por color no existen bajo daltonismo —el máximo práctico son
     cinco o seis—, así que la etiqueta lleva SIEMPRE su palabra al lado
     y el marcador del mapa dice el estado al tocarlo. El color acelera
     la lectura; no es lo único que la sostiene. Propuesta es magenta y
     no naranja justamente por esto: contra el ámbar de contactado, el
     naranja caía a 3.2 y se volvía el mismo color. */
  --cs-violet:       #8F3EE0;
  --cs-violet-bg:    #F2ECF9;
  --cs-teal:         #157C7F;
  --cs-teal-bg:      #ECF8F9;
  --cs-magenta:      #CA2175;
  --cs-magenta-bg:   #F9ECF2;
  --cs-lime:         #417F15;
  --cs-lime-bg:      #F1F9EC;

  /* -------------------------------------------------------------------------
     COLOR — Roles semánticos (usa ESTOS en los componentes, no los crudos)
     ------------------------------------------------------------------------- */
  --cs-bg:              var(--cs-white);
  --cs-bg-subtle:       var(--cs-gray-50);
  --cs-bg-active:       var(--cs-gray-100);
  --cs-text:            var(--cs-ink);
  --cs-text-secondary:  var(--cs-gray-700);
  --cs-text-muted:      var(--cs-gray-600);
  --cs-text-inverse:    var(--cs-white);
  --cs-text-link:       var(--cs-blue);
  --cs-border:          var(--cs-gray-200);
  --cs-border-strong:   var(--cs-gray-300);
  --cs-focus:           var(--cs-blue);

  /* Roles del ARMAZÓN. Existen para que un tema pueda cambiar el cabezal y
     el menú sin tocar app.css, y sus valores por omisión son exactamente lo
     que el CRM ya se veía: el tema "sobrio" no redefine ninguno. Ver
     temas.css. */
  /* La tinta de ACCIÓN: el botón primario, la barra del score, el foco, el
     marcador del activo. En sobrio es el negro de siempre; en Linear es
     violeta y en GitHub azul. Separarla de `--cs-text` es lo que permite
     que un tema tenga acento sin repintar el texto. */
  --cs-accion:             var(--cs-ink);
  --cs-accion-hover:       var(--cs-ink-hover);
  --cs-accion-texto:       var(--cs-white);
  /* Los competidores de un proyecto en el mapa. Fuera de la familia de los
     estados a propósito: en un proyecto el color dice cliente o
     competidor, no la etapa del embudo. */
  --cs-mapa-competidor:    #E4572E;
  /* El tránsito de la MTA en Tráfico. Otra familia más: el negro de
     acción ya es de los conteos propios, y un punto de metro no puede
     confundirse con una hora parada en la acera. */
  --cs-mapa-metro:         var(--cs-blue);
  /* Naranja rojizo: el verde azulado se perdía contra los parques y el
     agua del mapa. Distinto del naranja de competidor (#E4572E), que es
     de otra vista y otra pregunta. */
  --cs-mapa-bus:           #E8431C;

  --cs-tope-bg:            var(--cs-ink);
  --cs-tope-texto:         var(--cs-white);
  --cs-menu-bg:            var(--cs-bg);
  --cs-menu-activo-bg:     var(--cs-bg-active);
  --cs-menu-activo-marca:  var(--cs-ink);

  /* -------------------------------------------------------------------------
     TIPOGRAFÍA
     Sofia Pro (Bold) para titulares. Kit propio en Typekit, cargado desde
     index.php: https://use.typekit.net/kwq0goi.css

     El kit publica "sofia-pro-variable" (variable, ejes 100–900), no un
     corte estático "sofia-pro": se comprobó bajando el CSS real del kit,
     no adivinado. `font-weight: 700` sobre esa familia interpola al Bold
     igual que un corte fijo — el nombre es el que importa, no la mecánica
     interna.

     Inter para cuerpo y UI densa — self-hosteada arriba, un solo archivo
     variable. Trae cifras tabulares, que es lo que alinea una columna de
     números en una tabla.
     ------------------------------------------------------------------------- */
  --cs-font-display: "sofia-pro-variable", "Futura", "Avenir Next", "Century Gothic", system-ui, sans-serif;
  --cs-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cs-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --cs-text-xs:   0.75rem;
  --cs-text-sm:   0.875rem;
  --cs-text-base: 1rem;
  --cs-text-lg:   1.125rem;
  --cs-text-xl:   1.375rem;
  --cs-text-2xl:  1.75rem;
  --cs-text-3xl:  2.25rem;
  --cs-text-4xl:  3rem;
  --cs-text-5xl:  4rem;

  --cs-leading-tight:   1.1;
  --cs-leading-snug:    1.25;
  --cs-leading-normal:  1.5;
  --cs-leading-relaxed: 1.65;

  --cs-tracking-display: -0.02em;
  --cs-tracking-normal:  0;
  --cs-tracking-wide:    0.16em;

  --cs-weight-light:    300;
  --cs-weight-regular:  400;  /* Inter — cuerpo */
  --cs-weight-medium:   500;
  --cs-weight-semibold: 600;  /* Inter — etiquetas, botones, cabeceras de tabla */
  --cs-weight-bold:     700;  /* Sofia Pro Bold — titulares */

  --cs-measure: 68ch;

  /* -------------------------------------------------------------------------
     ESPACIADO — base 4px
     ------------------------------------------------------------------------- */
  --cs-space-1:  0.25rem;
  --cs-space-2:  0.5rem;
  --cs-space-3:  0.75rem;
  --cs-space-4:  1rem;
  --cs-space-5:  1.5rem;
  --cs-space-6:  2rem;
  --cs-space-7:  3rem;
  --cs-space-8:  4rem;
  --cs-space-9:  6rem;

  /* -------------------------------------------------------------------------
     RADIOS — botones en píldora, superficies en 8–12px
     ------------------------------------------------------------------------- */
  --cs-radius-none: 0;
  --cs-radius-sm:   4px;
  --cs-radius-md:   8px;
  --cs-radius-lg:   12px;
  --cs-radius-xl:   16px;
  --cs-radius-full: 999px;

  /* -------------------------------------------------------------------------
     BORDES Y ELEVACIÓN — plano; la jerarquía es de borde y relleno, no sombra
     ------------------------------------------------------------------------- */
  --cs-border-width: 1px;
  --cs-shadow-none: none;
  --cs-shadow-popover: 0 4px 16px rgba(16, 16, 16, 0.10), 0 0 0 1px rgba(16, 16, 16, 0.04);
  --cs-shadow-modal:   0 16px 48px rgba(16, 16, 16, 0.18);

  /* -------------------------------------------------------------------------
     FOCO — visible siempre, nunca `outline: none` sin reemplazo
     ------------------------------------------------------------------------- */
  --cs-focus-ring: 0 0 0 2px var(--cs-white), 0 0 0 4px var(--cs-focus);

  /* -------------------------------------------------------------------------
     MOVIMIENTO
     ------------------------------------------------------------------------- */
  --cs-duration-fast: 120ms;
  --cs-duration-base: 200ms;
  --cs-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* -------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------- */
  --cs-sidebar-width: 260px;
  --cs-topbar-height: 64px;
  --cs-content-max:   1200px;
  --cs-prose-max:     720px;
  --cs-tap-target:    44px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --cs-duration-fast: 0ms; --cs-duration-base: 0ms; }
}