/* ============================================================
   dream data — tokens do design system (Dream Factory)
   Design system do app. A proposta tem uma copia propria em proposta/tokens.css.
   Claro e o padrao; escuro so por escolha no botao (localStorage 'dd-tema').
   ============================================================ */

:root{
  --paper:#fff;
  --paper-2:#f3f5f9;
  --ink:#0d0e12;
  --ink-2:#5d6c7b;
  --line:rgba(13,14,18,.14);
  --line-2:rgba(13,14,18,.07);

  --blue:#0099ef;
  --blue-2:#0047ff;
  --blue-3:#00c2ff;
  --grad:linear-gradient(19deg,#00c2ff,#0047ff);
  --night:#06070f;
  --soft:color-mix(in srgb,var(--blue) 9%,var(--paper));   /* caixa de destaque (callout) */
  --neutral-bar:#b5c4d1;                                     /* barra de referencia nos graficos */

  --band:#0d0e12;
  --band-ink:#fff;
  --band-muted:rgba(255,255,255,.6);
  --band-grad:linear-gradient(19deg,#00c2ff,#7fa0ff);
  --nav-bg:rgba(255,255,255,.88);

  /* faixas escuras fixas (palco): nao mudam com o tema */
  --dk-ink:#fff;
  --dk-muted:rgba(255,255,255,.68);
  --dk-line:rgba(255,255,255,.16);

  --maxw:1360px;
  --pad:clamp(20px,4.5vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);
  interpolate-size:allow-keywords;
}

/* tema escuro: so por escolha explicita no botao (igual ao site da DF) */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0b0c10;
  --paper-2:#14161d;
  --ink:#eef1f6;
  --ink-2:#98a2b0;
  --line:rgba(238,241,246,.16);
  --line-2:rgba(238,241,246,.08);
  --grad:linear-gradient(19deg,#5fd8ff,#4d7bff);
  --soft:color-mix(in srgb,var(--blue) 16%,var(--paper));
  --neutral-bar:#4a5563;
  --band:#f3f5f9;
  --band-ink:#0d0e12;
  --band-muted:rgba(13,14,18,.6);
  --band-grad:linear-gradient(19deg,#0088d8,#2f5ae0);
  --nav-bg:rgba(11,12,16,.88);
}

/* troca de tema instantanea: o JS liga esta classe so durante a troca.
   Sem ela, o que tem transicao de cor (fundo, menu, botoes) chegava depois
   do que nao tem (cartoes, campos) e a tela trocava em duas metades. */
.sem-transicao,.sem-transicao *,.sem-transicao *::before,.sem-transicao *::after{transition:none!important}
