/* Sistema de diseño 4d3 · tokens
 *
 * Fuente: «4d3 DESIGN SYSTEM PROMPT» (docs/4d3-design-system-prompt.pdf).
 * Los valores de la tríada y los neutros salen literales de su tabla de color.
 *
 * Regla del sistema: se usa var(--pastel-green), nunca #8BC990 directamente.
 * scripts/check.sh lo comprueba: este es el único fichero donde puede aparecer
 * un color literal.
 *
 * ---------------------------------------------------------------------------
 * Nota de contraste (desviación documentada respecto al PDF)
 *
 * Medido sobre blanco: verde 1,93:1 · azul 2,60:1 · coral 2,64:1; las variantes
 * oscuras, entre 3,41:1 y 3,90:1; --gray-mid, 3,54:1. Ninguno llega al 4,5:1
 * que exige WCAG 2.1 AA para texto.
 *
 * Por eso, en Avío: la tríada es identidad y estructura —barras, bordes,
 * marcadores, distintivos—, nunca texto pequeño ni el único portador de una
 * información. Para texto se usan --tinta (12,63:1) y --tinta-suave (7,04:1),
 * que sustituye a --gray-mid en todo lo que se lea.
 * ------------------------------------------------------------------------- */

:root {
  /* --- Tríada pastel, en su orden fijo: verde → azul → coral ------------- */
  --pastel-green: #8BC990;
  --pastel-blue:  #7BA3D8;
  --pastel-coral: #E8837B;

  /* Variantes oscuras: hover y texto grande sobre claro */
  --dark-green:   #5A9960;
  --dark-blue:    #5B83B8;
  --dark-coral:   #C8635B;

  /* --- Neutros del sistema ---------------------------------------------- */
  --white:      #FFFFFF;
  --off-white:  #FAFAFA;
  --gray-light: #E8E8E8;
  --gray-mid:   #888888;
  --gray-dark:  #333333;

  /* --- Tinta: los únicos tokens admitidos para texto --------------------- */
  --tinta:       var(--gray-dark);   /* 12,63:1 sobre blanco */
  --tinta-suave: #595959;            /*  7,04:1 sobre blanco */
  --papel:       var(--white);
  --papel-alt:   var(--off-white);
  --linea:       var(--gray-light);

  /* --- Estados. Tonos propios: la tríada no significa nada --------------- */
  --exito:  #1D6B3F;   /* 5,32:1 */
  --error:  #A5231F;   /* 6,44:1 */
  --aviso:  #7A5300;   /* 5,58:1 */
  --exito-fondo: #EDF6F0;
  --error-fondo: #FBEDEC;
  --aviso-fondo: #FBF4E6;

  /* --- La tríada como gradiente, marca de la casa ------------------------ */
  --triada: linear-gradient(
    90deg,
    var(--pastel-green) 0%,
    var(--pastel-blue) 50%,
    var(--pastel-coral) 100%
  );

  /* --- Tipografía. Pareja editorial + mono retro ------------------------- */
  --fuente-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --peso-ligero: 300;   /* el peso de contenido del sistema */
  --peso-normal: 400;
  --peso-medio:  500;
  --peso-fuerte: 600;   /* <strong> y poco más */

  /* clamp() antes que media queries de tamaño: invariante 4 del PDF */
  --texto-xs:   clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --texto-sm:   clamp(0.8125rem, 0.79rem + 0.14vw, 0.875rem);
  --texto-base: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --texto-lg:   clamp(1.0625rem, 1.02rem + 0.23vw, 1.1875rem);
  --texto-xl:   clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --texto-2xl:  clamp(1.5rem, 1.32rem + 0.91vw, 2rem);
  --texto-3xl:  clamp(1.875rem, 1.6rem + 1.36vw, 2.625rem);

  --tracking-mono: 0.1em;   /* el letter-spacing de las etiquetas en mayúsculas */

  /* --- Espacio ----------------------------------------------------------- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;

  /* --- Geometría. La marca es angulosa: radio 0 salvo piezas pequeñas ----- */
  --radio: 0;
  --radio-pieza: 4px;
  --borde: 1px;
  --borde-boton: 2px;
  --barra: 4px;          /* alto de las barras de tríada */

  /* --- Sombras: muy discretas, y ninguna interior ------------------------ */
  --sombra-carta: 0 10px 40px rgba(0, 0, 0, 0.08);
  --sombra-nav:   0 2px 20px rgba(0, 0, 0, 0.05);

  /* --- Movimiento -------------------------------------------------------- */
  --micro: 0.3s ease;        /* hover, cambios de color, rellenos */
  --revelado: 0.8s ease-out; /* apariciones */

  /* --- Anchos ------------------------------------------------------------ */
  --ancho-lectura: 800px;
  --ancho-rejilla: 1200px;
}

/* La tríada rota siempre en el mismo orden y reinicia en el cuarto elemento.
 * Se expone como variable para que cualquier lista la aplique con
 * `style="--n: {{ bucle.index0 }}"` sin repetir los tres selectores.
 * Es el invariante 1 del sistema y no se rompe nunca. */
.triada-1, [data-triada="0"] { --acento: var(--pastel-green); --acento-oscuro: var(--dark-green); }
.triada-2, [data-triada="1"] { --acento: var(--pastel-blue);  --acento-oscuro: var(--dark-blue); }
.triada-3, [data-triada="2"] { --acento: var(--pastel-coral); --acento-oscuro: var(--dark-coral); }

/* Rotación automática para listas de longitud desconocida */
.rota > *:nth-child(3n + 1) { --acento: var(--pastel-green); --acento-oscuro: var(--dark-green); }
.rota > *:nth-child(3n + 2) { --acento: var(--pastel-blue);  --acento-oscuro: var(--dark-blue); }
.rota > *:nth-child(3n)     { --acento: var(--pastel-coral); --acento-oscuro: var(--dark-coral); }