/*
 * Tokens das páginas web do servidor de contas — mesmos nomes e valores do app
 * (src/ui/estilos/tokens.css, sistema "Bancada") e da landing (ladrilho-site globals.css).
 * ÚNICO arquivo com cores em hex das páginas. Contraste: node scripts/contraste.mjs.
 * Tema: <html data-tema="escuro|claro|sistema">; "sistema" segue prefers-color-scheme.
 */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/estaticos/fontes/geist-latin.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/estaticos/fontes/geist-mono-latin.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('/estaticos/fontes/pixelify-sans-latin.woff2') format('woff2');
}

:root {
  --fonte-ui: 'Geist Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono: 'Geist Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;
  --fonte-pixel: 'Pixelify Sans', ui-monospace, monospace;
  --peso-titulo: 600;

  /* espaços (base 4px) */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.25rem;
  --e6: 1.5rem;
  --e8: 2rem;
  --e10: 2.5rem;

  /* raios (a Bancada é quase reta) */
  --r1: 3px;
  --r2: 6px;

  /* controles das páginas (alvo ≥ 24 px; campos e botões com 44 px) */
  --altura-campo: 2.75rem;
  --coluna-form: 420px;
  --coluna-conta: 720px;

  --dur-1: 80ms;
  --dur-2: 160ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);
}

:root,
:root[data-tema='escuro'] {
  color-scheme: dark;
  --fundo-mesa: #121316;
  --fundo-painel: #1a1c20;
  --fundo-elevado: #22252a;
  --fundo-hover: #2a2e34;
  --fundo-ativo: #323740;
  --linha: #2e3238;
  --linha-forte: #6b717b;
  --texto: #e4e6ea;
  --texto-2: #a6acb6;
  --texto-3: #8c929c;
  --acento: #5b8def;
  --acento-texto: #93b4f5;
  --sobre-acento: #0b1220;
  --ia: #e8b04a;
  --ia-texto: #f0c36e;
  --perigo: #ef6b5f;
  --sucesso: #4fbf8a;
  --foco: #93b4f5;
  --marca-creme: #f2ebdd;
  --marca-azul: #6f8fe8;
  --marca-anil: #2446b8;
  --fundo-pagina: #121316;
  --azulejos: url('/estaticos/azulejos-escuro.svg');
  --sombra: 0 8px 32px rgb(0 0 0 / 0.35);
}

:root[data-tema='claro'] {
  color-scheme: light;
  --fundo-mesa: #c9cdd3;
  --fundo-painel: #f3f4f6;
  --fundo-elevado: #ffffff;
  --fundo-hover: #e6e8ec;
  --fundo-ativo: #dadde3;
  --linha: #d5d8de;
  --linha-forte: #868c96;
  --texto: #1a1c20;
  --texto-2: #4b515b;
  --texto-3: #5f6670;
  --acento: #2f5bd3;
  --acento-texto: #2448b0;
  --sobre-acento: #ffffff;
  --ia: #8f6200;
  --ia-texto: #8a5600;
  --perigo: #c7372b;
  --sucesso: #1e7f52;
  --foco: #2f5bd3;
  --marca-creme: #f2ebdd;
  --marca-azul: #6f8fe8;
  --marca-anil: #2446b8;
  --fundo-pagina: #f3f4f6;
  --azulejos: url('/estaticos/azulejos-claro.svg');
  --sombra: 0 8px 32px rgb(20 22 26 / 0.12);
}

/* Tema "sistema" com o SO em modo claro: mesmos valores do bloco claro acima. */
@media (prefers-color-scheme: light) {
  :root[data-tema='sistema'] {
    color-scheme: light;
    --fundo-mesa: #c9cdd3;
    --fundo-painel: #f3f4f6;
    --fundo-elevado: #ffffff;
    --fundo-hover: #e6e8ec;
    --fundo-ativo: #dadde3;
    --linha: #d5d8de;
    --linha-forte: #868c96;
    --texto: #1a1c20;
    --texto-2: #4b515b;
    --texto-3: #5f6670;
    --acento: #2f5bd3;
    --acento-texto: #2448b0;
    --sobre-acento: #ffffff;
    --ia: #8f6200;
    --ia-texto: #8a5600;
    --perigo: #c7372b;
    --sucesso: #1e7f52;
    --foco: #2f5bd3;
    --fundo-pagina: #f3f4f6;
    --azulejos: url('/estaticos/azulejos-claro.svg');
    --sombra: 0 8px 32px rgb(20 22 26 / 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
  }
}