/* Heyconi · tema Coni. EL ÚNICO ARCHIVO DE TEMA de la app: colores, tipografías, espaciados, radios y movimiento.
   Lo arma app/generar-tema.py desde design/tokens (copia exacta, en este orden: coni-paleta, tipografia, espaciado,
   movimiento); tipografia.css pierde solo su @import de Google Fonts, porque las fuentes se sirven desde la app.
   NO SE EDITA A MANO: se corrige design/ y se vuelve a correr el script. test_coni.py comprueba que coincidan. */

/* Inter, desde static/fuentes (SIL OFL 1.1; decisión del fundador del 23-10-2026). Una sola familia variable (opsz 14-32,
   wght 100-900) en dos archivos, partidos como en Google Fonts: el navegador baja cada uno solo si la página usa una letra
   de su unicode-range. Con el tamaño óptico, los títulos se ven en Inter Display y el resto en Inter Text. */
@font-face{font-family:"Inter";src:url("/static/fuentes/Inter-latin-ext.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";src:url("/static/fuentes/Inter-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ===== design/tokens/coni-paleta.css ===== */
/* Coni · Paleta final — 1b “Estudio” + Mandarina
   Tipografía: Inter (títulos e interfaz; el wordmark es SVG), desde el 23-10-2026 — Google Fonts */

:root {
  /* Neutros */
  --coni-fondo: #F0EDE7;
  --coni-superficie: #FFFFFF;
  --coni-borde: #D6D2CA;
  --coni-tinta: #15151A;              /* 15,6:1 sobre fondo */
  --coni-tinta-2: #5A5960;            /* 5,9:1 sobre fondo */

  /* Acento mandarina */
  --coni-acento: #FF6B00;             /* botones, enviar, punto de la i, “Hey” principal */
  --coni-acento-hover: #FF8126;
  --coni-sobre-acento: #15151A;       /* texto tinta sobre mandarina: 6,4:1 (blanco no llega) */
  --coni-acento-texto: #B44A00;       /* texto chico y wordmark compacto: 4,6:1 sobre fondo */

  /* Deshabilitado */
  --coni-deshabilitado: #D6D2CA;
  --coni-deshabilitado-texto: #5A5960;

  /* Estados: base · texto · fondo de pastilla */
  --coni-error: #C8103A;   --coni-error-texto: #A30D30;   --coni-error-fondo: #EACECF;
  --coni-aviso: #EDBB00;   --coni-aviso-texto: #5E4900;   --coni-aviso-fondo: #EFDEA2;
  --coni-exito: #1F7A47;   --coni-exito-texto: #17613A;   --coni-exito-fondo: #D3DDD1;
  --coni-info: #3E57B8;    --coni-info-texto: #32479A;    --coni-info-fondo: #D7D8E0;

  /* Ícono (siempre tinta sobre papel) */
  --coni-icono-papel: #FFFFFF;
  --coni-icono-tinta: #15151A;
  --coni-icono-borde: #15151A;
}

[data-tema="oscuro"] {
  --coni-fondo: #131317;
  --coni-superficie: #1C1C21;
  --coni-borde: #2D2D34;
  --coni-tinta: #EEEDE9;              /* 15,8:1 sobre fondo */
  --coni-tinta-2: #9F9EA6;            /* 7,0:1 sobre fondo */

  --coni-acento: #FF7A1A;             /* 7,1:1 sobre fondo; en oscuro no hay versión compacta */
  --coni-acento-hover: #FF9142;
  --coni-sobre-acento: #131317;       /* 7,1:1 */
  --coni-acento-texto: #FF7A1A;

  --coni-deshabilitado: #2D2D34;
  --coni-deshabilitado-texto: #9F9EA6;

  --coni-error: #FF6B8A;   --coni-error-texto: #FF6B8A;   --coni-error-fondo: #341F27;
  --coni-aviso: #F5CD3D;   --coni-aviso-texto: #F5CD3D;   --coni-aviso-fondo: #332D1C;
  --coni-exito: #6FCF97;   --coni-exito-texto: #6FCF97;   --coni-exito-fondo: #202D29;
  --coni-info: #8FA2F0;    --coni-info-texto: #8FA2F0;    --coni-info-fondo: #242735;

  --coni-icono-papel: #EEEDE9;
  --coni-icono-tinta: #15151A;
  --coni-icono-borde: #EEEDE9;
}

/* Blanco y negro (logo): #000000 · #FFFFFF */

/* ===== design/tokens/tipografia.css ===== */
/* Coni · Tipografía
   Inter, una sola familia (decisión del fundador del 23-10-2026: reemplaza a la serif de los títulos y a la sans de la
   interfaz). Es variable, con tamaño óptico: los títulos se ven en Inter Display y el resto en Inter Text, sin cambiar de
   familia. --coni-fuente-marca (los títulos) y --coni-fuente-ui (todo lo demás) conservan sus dos nombres. En Google Fonts. */

:root {
  --coni-fuente-marca: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --coni-fuente-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --coni-peso-regular: 400;   /* texto */
  --coni-peso-medio: 500;     /* botones, navegación, etiquetas de campo, preguntas */
  --coni-peso-semi: 600;      /* títulos de interfaz, etiquetas en mayúsculas */
  --coni-peso-titulo: 500;    /* títulos de pantalla y de sección (marca-1 a marca-4); en peso medio desde «Calma» (23-10) */

  /* Títulos · Inter 500 (Calma, 23-10-2026) · marca-4 es el mínimo */
  --coni-marca-1: 88px;  --coni-marca-1-interlinea: 1;     /* portada, landing */
  --coni-marca-2: 56px;  --coni-marca-2-interlinea: 1.04;  /* títulos de sección */
  --coni-marca-3: 40px;  --coni-marca-3-interlinea: 1.08;  /* título de pantalla */
  --coni-marca-4: 32px;  --coni-marca-4-interlinea: 1.12;  /* título en móvil · mínimo */
  --coni-marca-tracking: -0.03em;                          /* los títulos, desde 32 px */

  /* Texto · Inter */
  --coni-texto-pregunta: 28px;  --coni-texto-pregunta-interlinea: 1.25;  /* preguntas del onboarding · 500 · −0,02 em */
  --coni-texto-titulo: 22px;    --coni-texto-titulo-interlinea: 1.3;     /* títulos de tarjeta y bloque · 600 · −0,015 em */
  --coni-texto-grande: 18px;    --coni-texto-grande-interlinea: 1.5;     /* entradillas · 400 */
  --coni-texto-base: 16px;      --coni-texto-base-interlinea: 1.5;       /* chat, campos, botones · 400/500 */
  --coni-texto-chico: 14px;     --coni-texto-chico-interlinea: 1.45;     /* ayuda, metadatos, navegación */
  --coni-texto-etiqueta: 12px;  --coni-texto-etiqueta-interlinea: 1.3;   /* GANCHO · CUERPO · CIERRE · 600 */
  --coni-etiqueta-tracking: 0.08em;
  --coni-ancho-lectura: 64ch;
}

/* ===== design/tokens/espaciado.css ===== */
/* Coni · Espaciado, radios, bordes, foco y mínimos del logo. Base 4 px. Sin sombras. */
:root {
  --coni-espacio-1: 4px;    /* ícono y texto */
  --coni-espacio-2: 8px;    /* dentro de controles, entre pastillas */
  --coni-espacio-3: 12px;   /* entre burbujas del chat */
  --coni-espacio-4: 16px;   /* relleno de campos, entre campos */
  --coni-espacio-5: 20px;   /* relleno de burbujas y opciones */
  --coni-espacio-6: 24px;   /* relleno de tarjetas */
  --coni-espacio-8: 32px;   /* entre bloques */
  --coni-espacio-10: 40px;  /* márgenes laterales en escritorio */
  --coni-espacio-12: 48px;  /* entre grupos */
  --coni-espacio-16: 64px;  /* entre secciones en móvil */
  --coni-espacio-24: 96px;  /* entre secciones en escritorio */

  --coni-radio-xs: 6px;         /* esquina de la cola de la burbuja */
  --coni-radio-s: 10px;         /* muestras y miniaturas */
  --coni-radio-m: 14px;         /* campos de texto */
  --coni-radio-l: 20px;         /* burbujas, opciones, compositor, tarjetas chicas */
  --coni-radio-xl: 28px;        /* tarjetas y paneles */
  --coni-radio-pastilla: 999px; /* botones, selector segmentado, pastillas */

  --coni-borde-ancho: 1px;      /* todo borde */
  --coni-seleccion-ancho: 2px;  /* opción seleccionada: borde en --coni-acento */
  --coni-foco-ancho: 2px;       /* anillo de foco en --coni-acento-texto */
  --coni-foco-separacion: 2px;

  --coni-alto-control: 48px;        /* botón grande, campo */
  --coni-alto-control-chico: 36px;  /* botón chico, segmento */
  --coni-boton-icono: 40px;         /* enviar */
  --coni-avatar-chat: 32px;

  /* Logo · alto mínimo de cada archivo y área de respeto (altura de la "o" / alto del archivo) */
  --coni-logo-min-nombre: 24px;             /* coni-nombre-* y hey-coni-nombre-* */
  --coni-logo-min-horizontal: 32px;         /* coni-horizontal-* */
  --coni-logo-min-horizontal-hey: 27px;     /* hey-coni-horizontal-* */
  --coni-logo-respeto-nombre: 0.714;        /* coni-nombre-* */
  --coni-logo-respeto-nombre-hey: 0.56;     /* hey-coni-nombre-* */
  --coni-logo-respeto-horizontal: 0.535;    /* coni-horizontal-* */
  --coni-logo-respeto-horizontal-hey: 0.495;/* hey-coni-horizontal-* */
}

/* ===== design/tokens/movimiento.css ===== */
/* Coni · Movimiento. Se anima: entrada de mensajes, cambio de pantalla, hover y "pensando".
   Con reducir movimiento (sistema o data-movimiento="reducido") no hay desplazamientos,
   escalas ni bucles: solo fundidos de 120 ms. */
:root {
  --coni-dur-instante: 120ms;   /* presionar (con la curva de entrada) */
  --coni-dur-rapida: 120ms;     /* hover y cambios de color */
  --coni-dur-base: 200ms;       /* salidas y elementos chicos */
  --coni-dur-mensaje: 300ms;    /* entrada de mensajes */
  --coni-dur-pantalla: 320ms;   /* cambio de pantalla */
  --coni-dur-pensando: 1200ms;  /* un ciclo del indicador "pensando" */

  --coni-curva-entrada: cubic-bezier(0.2, 0, 0, 1);  /* lo que entra */
  --coni-curva-salida: cubic-bezier(0.2, 0, 0, 1);   /* lo que sale: la misma curva que la de entrada */
  --coni-curva-suave: cubic-bezier(0.4, 0, 0.2, 1);  /* hover, color, bucle */

  --coni-mov-mensaje: 8px;      /* el mensaje sube al entrar */
  --coni-mov-pantalla: 24px;    /* la pantalla nueva se desliza */
  --coni-escala-presion: 0.98;  /* botón presionado */
  --coni-dur-gesto: 500ms;      /* un gesto de Coni (Coni animada) */
  --coni-mov-gesto: 4px;        /* desplazamiento máximo de una capa de Coni */
  --coni-giro-gesto: 6deg;      /* inclinación máxima de una capa de Coni */
  --coni-dur-respirar: 3600ms;  /* un ciclo de la respiración de Coni (Coni viva, 23-10-2026) */
  --coni-escala-respirar: 1.012; /* cuánto crece al respirar: el dibujo entero, desde abajo */
  --coni-dur-parpadeo: 180ms;   /* un parpadeo de Coni */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --coni-dur-mensaje: 120ms;
    --coni-dur-pantalla: 120ms;
    --coni-mov-mensaje: 0px;
    --coni-mov-pantalla: 0px;
    --coni-escala-presion: 1;
    --coni-dur-gesto: 120ms;
    --coni-mov-gesto: 0px;
    --coni-giro-gesto: 0deg;
    --coni-escala-respirar: 1;
  }
}

/* Para un ajuste propio de la app: <html data-movimiento="reducido"> */
[data-movimiento="reducido"] {
  --coni-dur-mensaje: 120ms;
  --coni-dur-pantalla: 120ms;
  --coni-mov-mensaje: 0px;
  --coni-mov-pantalla: 0px;
  --coni-escala-presion: 1;
  --coni-dur-gesto: 120ms;
  --coni-mov-gesto: 0px;
  --coni-giro-gesto: 0deg;
  --coni-escala-respirar: 1;
}

@keyframes coni-mensaje-entra {
  from { opacity: 0; transform: translateY(var(--coni-mov-mensaje)); }
  to   { opacity: 1; transform: none; }
}
@keyframes coni-pantalla-entra {
  from { opacity: 0; transform: translateX(var(--coni-mov-pantalla)); }
  to   { opacity: 1; transform: none; }
}
/* al volver a una pantalla anterior, la nueva entra desde el otro lado */
@keyframes coni-pantalla-vuelve {
  from { opacity: 0; transform: translateX(calc(-1 * var(--coni-mov-pantalla))); }
  to   { opacity: 1; transform: none; }
}
@keyframes coni-pensando {
  0%, 100% { opacity: 0.25; }
  40%      { opacity: 1; }
}
