/* ZEDIA — tokens do sistema de design
   Uma paleta, dois modos. Papel de cada cor em references/01-tokens.md.
   Nunca escreva um hexadecimal fora deste arquivo. */

:root {
  /* fundações */
  --base: #18091F;          /* fundo do escuro; tinta do claro */
  --neutro: #21272F;        /* neutro para contextos densos */
  --branco: #FFFFFF;
  --fundo-claro: #F6F4F8;   /* alternativa suave ao branco puro */

  /* rampa de profundidade — modo escuro, nunca texto */
  --superficie: #582A6F;
  --meiotom: #6C4170;       /* topo da rampa; texto secundário no claro */
  --ilustra: #3E2171;       /* ilustração e gráfico no escuro */

  /* assinatura e acentos */
  --assinatura: #C01A70;         /* texto no claro; forma preenchida no escuro */
  --assinatura-clara: #E22B8A;   /* proposta: magenta como texto no escuro */
  --calor-escuro: #E65D52;       /* CTA no escuro — texto por cima é --base */
  --calor-claro: #C04C42;        /* coral no claro */
  --iluminador: #01CFA4;         /* só no escuro: ao vivo, progresso, foco */
  --iluminador-escuro: #018368;  /* proposta: verde-água como texto no claro */
  --evidencia: #6575B5;          /* dado, gráfico, texto grande */
  --evidencia-texto: #4A579B;    /* dado e texto pequeno no claro */

  /* tinta e fios */
  --tinta-2: rgba(24, 9, 31, .62);       /* secundário no claro */
  --claro-2: rgba(255, 255, 255, .66);   /* secundário no escuro */
  --fio-claro: #E7E2EC;
  --fio-escuro: rgba(255, 255, 255, .16);

  /* gradiente de marca — só em momento de marca, nunca sob texto */
  --gradiente-marca: linear-gradient(90deg, #F20DC0 0%, #844AF9 50%, #01CFA4 100%);

  /* tipografia */
  --titulo: 'Ubuntu Sans', system-ui, -apple-system, sans-serif;
  --texto: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, sans-serif;

  /* escala — base 17px, razão 1,25 */
  --t-display: 4.5rem;
  --t-h1: 3rem;
  --t-h2: 2rem;
  --t-h3: 1.5rem;
  --t-corpo: 1.0625rem;
  --t-corpo-p: 0.9375rem;
  --t-legenda: 0.8125rem;
  --t-rotulo: 0.75rem;

  /* espaço — base 4px */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;

  /* raio */
  --r-campo: 4px; --r-botao: 8px; --r-card: 12px; --r-modal: 16px; --r-pilula: 999px;

  /* movimento */
  --d-estado: 120ms;
  --d-componente: 200ms;
  --d-tela: 280ms;
  --d-marca: 700ms;
  --curva: cubic-bezier(.2, 0, 0, 1);
  --curva-marca: cubic-bezier(.16, 1, .3, 1);
}

/* papéis semânticos por modo — use estes, não os brutos, em componente */
[data-modo="claro"] {
  --fundo: var(--branco);
  --fundo-elevado: var(--fundo-claro);
  --tinta: var(--base);
  --tinta-secundaria: var(--tinta-2);
  --fio: var(--fio-claro);
  --acento: var(--assinatura);
  --acao: var(--assinatura);
  --acao-tinta: var(--branco);
  --foco: var(--assinatura);
  --dado: var(--evidencia-texto);
  --vivo: var(--iluminador-escuro);
}

[data-modo="escuro"] {
  --fundo: var(--base);
  --fundo-elevado: var(--superficie);
  --tinta: var(--branco);
  --tinta-secundaria: var(--claro-2);
  --fio: var(--fio-escuro);
  --acento: var(--iluminador);
  --acao: var(--calor-escuro);
  --acao-tinta: var(--base);   /* nunca branco sobre coral */
  --foco: var(--iluminador);
  --dado: var(--evidencia);
  --vivo: var(--iluminador);
}

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}