/* Intega · tokens de diseño — única fuente de verdad.
   Los colores de marca salen del logotipo (assets/intega-simbolo.svg,
   intega-logo-horizontal.svg). Todo tono adicional se deriva con
   color-mix() a partir de estos tokens. */

:root {
  /* Marca (paleta de la alfa local 0.4, elegida por Diego) */
  --grafito: #243a32;      /* ink: texto principal */
  --grafito-2: #727c73;    /* muted: texto secundario */
  --verde: #263e35;        /* green: acento de marca */
  --fondo: #f7f8f4;        /* papel de fondo (--bg de la alfa) */
  --papel: #fff;           /* superficies */
  --linea: #e2e6dc;        /* bordes y reglas */
  --lima: #e5ebc8;         /* lime: resaltes claros, botón crema del hero */
  --oxido: #ae5e43;        /* rust: glifo ✳ y acentos cálidos */
  --palido: #f3e8df;       /* pale: superficies cálidas */

  /* Tipografía (stacks reales de referencia-alfa/styles.css) */
  --serif: Georgia, serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sans: Arial, Helvetica, sans-serif;

  /* Derivados funcionales */
  --tenue: #59605A;        /* texto de apoyo; AA sobre --papel y --fondo */
  --alerta: #9C3D2E;       /* rojo sobrio para errores; AA sobre --papel */
  --aviso: color-mix(in srgb, var(--alerta) 55%, var(--verde)); /* pendiente/propuesto */
  --verde-suave: color-mix(in srgb, var(--verde) 12%, var(--papel));
  --verde-activo: color-mix(in srgb, var(--verde) 85%, var(--grafito));

  /* Escala de espaciado */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;

  /* Radios */
  --r1: 6px;
  --r2: 10px;

  /* Sombras discretas */
  --sombra-1: 0 1px 2px color-mix(in srgb, var(--grafito) 8%, transparent);
  --sombra-2: 0 4px 14px color-mix(in srgb, var(--grafito) 12%, transparent);
  --sombra-alfa: 0 15px 45px #23372d0b;

  /* Movimiento */
  --transicion: 150ms ease;
}