/* Grupo Esfera — color. Usar SIEMPRE por token/hex, nunca por nombre suelto. */
:root{
  /* --- Familias de marca (base) --- */
  --ge-turquesa:#16c2af; --ge-turquesa-claro:#0dd6c2; --ge-turquesa-oscuro:#1fad9c;
  --ge-magenta:#ff1195;  --ge-magenta-claro:#fa50ae;  --ge-magenta-oscuro:#e20f84;
  --ge-violeta:#8e19ff;  --ge-violeta-claro:#9d39ff;  --ge-violeta-oscuro:#7910e0;
  --ge-lima:#97cc25;     --ge-lima-claro:#c1e835;     --ge-lima-oscuro:#81ba06;
  --ge-naranja:#ff8f25;  --ge-naranja-claro:#ffa652;  --ge-naranja-oscuro:#fa7a00;

  /* --- Neutros --- */
  --ge-crema:#f5f4ec; --ge-gris-claro:#edebea; --ge-negro:#1a1a1a; --ge-blanco:#ffffff;

  /* --- Alias semánticos: superficie --- */
  --surface-default:#f5f4ec;   /* crema: fondo por defecto de pieza clara */
  --surface-alt:#edebea;       /* gris claro: cajas y bloques sobre crema */
  --surface-inverse:#1a1a1a;   /* negro texto usado como fondo */
  --surface-card:#ffffff;      /* tarjeta tipo posteo, caja de contención */
  --surface-code:#1a1a1a;      /* caja de código */

  /* --- Alias semánticos: texto --- */
  --text-body:#1a1a1a;         /* cuerpo sobre fondo claro */
  --text-on-color:#ffffff;     /* ÚNICO color válido sobre fondo saturado */
  --text-muted:#5a5a5a;        /* pies y créditos sobre claro */
  --text-code:#f5f4ec;         /* texto dentro de caja de código */

  /* --- Alias semánticos: acento (se resuelve por familia de pieza) --- */
  --accent:#16c2af; --accent-claro:#0dd6c2; --accent-oscuro:#1fad9c; --on-accent:#ffffff;

  /* --- Borde / línea --- */
  --border-hairline:#1a1a1a; --border-soft:#dedbd6; --border-selection:#16c2af;
}

/* Familias como scopes: aplicar en la raíz de la pieza. Máx. 2 familias por pieza. */
[data-familia="turquesa"]{--accent:#16c2af;--accent-claro:#0dd6c2;--accent-oscuro:#1fad9c;--on-accent:#ffffff;--border-selection:#16c2af}
[data-familia="magenta"]{--accent:#ff1195;--accent-claro:#fa50ae;--accent-oscuro:#e20f84;--on-accent:#ffffff;--border-selection:#ff1195}
[data-familia="violeta"]{--accent:#8e19ff;--accent-claro:#9d39ff;--accent-oscuro:#7910e0;--on-accent:#ffffff;--border-selection:#8e19ff}
[data-familia="naranja"]{--accent:#ff8f25;--accent-claro:#ffa652;--accent-oscuro:#fa7a00;--on-accent:#ffffff;--border-selection:#ff8f25}
/* Lima: SOLO como fondo/objeto. Nunca como color de texto. */
[data-familia="lima"]{--accent:#97cc25;--accent-claro:#c1e835;--accent-oscuro:#81ba06;--on-accent:#ffffff;--border-selection:#97cc25}