/* EVO.OS — tokens de marca y de movimiento.
   Colores y tipografía: Identidad de marca/guia-de-marca.md (v1). No modificar sin actualizar DECISIONES.md.
   v0.2 — dirección creativa: "Inteligencia silenciosa. Precisión viva." */
:root {
  /* ---------- paleta oficial ---------- */
  --ev-grafito: #161a17;
  --ev-liquen: #eef1ec;
  --ev-verdin: #5e9683;
  --ev-ambar: #c97f3b;
  --ev-campo: #7c8177;

  /* ---------- derivados neutros (utilidad tipográfica sobre la paleta oficial) ---------- */
  --ev-ink: #1c231f;
  --ev-muted: #58625a;          /* 6.4:1 sobre liquen — AA en texto pequeño */
  --ev-line: #d8dcd3;
  --ev-line-soft: #e4e7df;
  --ev-cream: #e7eae2;
  --ev-paper: #f4f6f1;
  --ev-verdin-soft: rgba(94, 150, 131, 0.14);
  --ev-ambar-soft: rgba(201, 127, 59, 0.16);
  --ev-verdin-claro: #9fc7b8;   /* verdín legible sobre grafito — 7.1:1 */
  /* Derivados de superficie del verdín oficial. El #5E9683 de la guía de marca se
     conserva intacto para trazos, nodos y acentos; pero como FONDO con texto blanco
     solo alcanza 3.41:1, por debajo de AA. Estos dos son el mismo color llevado a la
     profundidad en la que el texto encima sí es legible: 4.9:1 y 6.1:1. */
  --ev-verdin-superficie: #4a7a69;
  --ev-verdin-superficie-hover: #3f6a5b;
  /* El mismo #4a7a69 sirve además como verdín de TEXTO sobre superficies claras:
     el #5E9683 puro solo da 3.4:1 sobre liquen. */
  --ev-verdin-texto: #4a7a69;
  /* Gris de campo #7C8177 es color de marca para líneas y trazos. Como TEXTO pequeño
     sobre claro da 3.5:1; este derivado da 4.9:1 sobre liquen, paper y cream. */
  --ev-campo-texto: #5f645c;

  /* superficies oscuras: una sola escala, para que las secciones oscuras
     se sientan del mismo material y no de tres grises distintos */
  --ev-dark-0: #101411;
  --ev-dark-1: #161a17;
  --ev-dark-2: #1b211d;
  --ev-dark-3: #222a25;
  --ev-on-dark: rgba(238, 241, 236, 0.72);
  --ev-on-dark-soft: rgba(238, 241, 236, 0.5);
  --ev-hair-dark: rgba(238, 241, 236, 0.14);

  /* ---------- tipografía ---------- */
  --ev-font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --ev-font-data: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", monospace;
  --ev-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---------- retícula ---------- */
  --ev-max: 1180px;
  --ev-top: 72px;
  --ev-gutter: clamp(1.15rem, 4vw, 3rem);
  /* ritmo vertical: v0.2 comprime el espacio pasivo ~30% respecto a v0.1 */
  --ev-block: clamp(3rem, 6.2vw, 5.25rem);
  --ev-block-tight: clamp(2.25rem, 4.5vw, 3.75rem);

  /* ---------- radios y sombra ---------- */
  --ev-radius-s: 10px;
  --ev-radius-m: 16px;
  --ev-radius-l: 22px;
  --ev-shadow-card: 0 18px 44px rgba(22, 26, 23, 0.09);
  --ev-shadow-deep: 0 28px 80px rgba(22, 26, 23, 0.2);

  /* ---------- movimiento — jerarquía de duraciones ----------
     El criterio es "qué está ocurriendo", no "qué tan bonito se ve":
       instant   respuesta directa al dedo/cursor (presionar, marcar)
       fast      hover y controles
       state     un elemento cambia de estado (etapa activa, tab, nodo)
       reveal    entrada editorial de contenido al viewport
       system    transformación del sistema completo (nacimiento, cierre de ciclo)
       ambient   respiración de fondo — máximo una perceptible por viewport   */
  --ev-dur-instant: 140ms;
  --ev-dur-fast: 220ms;
  --ev-dur-state: 420ms;
  --ev-dur-reveal: 700ms;
  --ev-dur-system: 1200ms;
  --ev-dur-ambient: 12s;

  /* alias heredados de v0.1 (no romper CSS existente ni terceros archivos) */
  --ev-dur-base: var(--ev-dur-state);
  --ev-dur-slow: var(--ev-dur-reveal);

  /* ---------- movimiento — curvas ---------- */
  --ev-ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* curva principal del sitio */
  --ev-ease-standard: cubic-bezier(0.2, 0.75, 0.2, 1);
  --ev-ease-in-out: cubic-bezier(0.45, 0, 0.15, 1);

  /* ---------- movimiento — desplazamientos ----------
     Techos deliberados: nada se mueve más de lo que necesita para confirmar intención. */
  --ev-lift-btn: 2px;      /* botones: 1–3px */
  --ev-lift-card: 5px;     /* tarjetas: 3–6px */
  --ev-shift-sm: 3px;
  --ev-shift-md: 8px;
  --ev-shift-lg: 22px;     /* entrada editorial */

  /* ---------- el hilo conductor ----------
     --ev-fase (1–6) lo actualiza main.js según la sección visible:
     fragmentos → conexiones → sistema → operación → aprendizaje → evolución */
  --ev-fase: 1;
  --ev-fase-progreso: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ev-dur-instant: 1ms;
    --ev-dur-fast: 1ms;
    --ev-dur-state: 1ms;
    --ev-dur-reveal: 1ms;
    --ev-dur-system: 1ms;
    --ev-lift-btn: 0px;
    --ev-lift-card: 0px;
    --ev-shift-sm: 0px;
    --ev-shift-md: 0px;
    --ev-shift-lg: 0px;
  }
}