/* ============================================================
   Vivo · Cores
   Regra de ouro: o púrpura nunca é substituído. Prefira púrpura
   + apenas UMA cor secundária por composição.
   ============================================================ */
:root{
  /* ---- Cor principal (sempre presente) ---- */
  --vivo-purpura:#660099;        /* Pantone 2603 · R102 G0 B153 */
  --vivo-purpura-apoio:#461e5f;  /* ações primárias / contraste digital */

  /* ---- Cores secundárias ---- */
  --vivo-rosa:#eb3c7d;     /* Pantone 213 */
  --vivo-laranja:#ff9900;  /* Pantone 151 */
  --vivo-verde:#99cc33;    /* Pantone 376 */
  --vivo-azul:#0066cc;     /* Pantone 3005 */

  /* ---- Cores de apoio (contraste no digital) ---- */
  --vivo-rosa-apoio:#cd1e5a;     /* erro / atenção */
  --vivo-laranja-apoio:#fa6423;  /* alerta */
  --vivo-verde-apoio:#32a04b;    /* correto / sucesso */
  --vivo-azul-apoio:#0055a0;     /* links / informação */

  /* ---- Cinzas (papéis definidos pelo guia) ---- */
  --preto:#000000;          /* texto com contraste */
  --cinza-texto:#666666;    /* texto secundário */
  --cinza-linha:#cccccc;    /* linhas divisórias */
  --cinza-icone:#dddddd;    /* divisórias / ícones */
  --cinza-disabled:#eeeeee; /* campo desabilitado */
  --cinza-hover:#f7f7f7;    /* hover de listas */
  --cinza-card:#f9f9f9;     /* fundo entre cards */
  --branco:#ffffff;         /* cards / página */

  /* ============================================================
     Aliases semânticos (uso na interface)
     ============================================================ */
  --color-primary:var(--vivo-purpura);
  --color-primary-strong:var(--vivo-purpura-apoio);
  --color-accent:var(--vivo-rosa);

  --text-strong:var(--preto);
  --text-body:#222222;
  --text-muted:var(--cinza-texto);
  --text-on-primary:#ffffff;
  --text-link:var(--vivo-azul-apoio);

  --surface-page:var(--cinza-card);
  --surface-card:var(--branco);
  --surface-hover:var(--cinza-hover);
  --surface-disabled:var(--cinza-disabled);

  --border-subtle:var(--cinza-icone);
  --border-default:var(--cinza-linha);

  --state-success:var(--vivo-verde-apoio);
  --state-error:var(--vivo-rosa-apoio);
  --state-warning:var(--vivo-laranja-apoio);
  --state-info:var(--vivo-azul-apoio);

  --focus-ring:rgba(102,0,153,.14); /* @kind color */
}