/* Cores e tema. Escuro por padrão, com respeito ao gosto do sistema. */

:root {
  color-scheme: dark;

  --fundo: #0a0c18;
  --fundo-topo: #0d1026;
  --fundo-cartao: rgba(255, 255, 255, 0.045);
  --fundo-cartao-forte: rgba(255, 255, 255, 0.075);
  --fundo-campo: rgba(8, 10, 22, 0.6);
  --borda: rgba(255, 255, 255, 0.11);
  --borda-forte: rgba(255, 255, 255, 0.22);

  --texto: #edf0ff;
  --texto-suave: #a7afd4;
  --texto-fraco: #7d85ab;

  --primaria: #5b63f5;
  --primaria-clara: #8f97ff;
  --primaria-escura: #3f46d6;
  --primaria-texto: #ffffff;
  --link: #a9b4ff;

  --destaque: #2ee6c5;
  --destaque-escura: #0d9e86;
  --aviso: #ffbe5c;
  --aviso-fundo: rgba(255, 190, 92, 0.13);
  --erro: #ff7a8c;
  --erro-fundo: rgba(255, 122, 140, 0.13);
  --ok: #4fd98a;
  --ok-fundo: rgba(79, 217, 138, 0.13);

  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  --sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.25);
  --brilho: 0 0 0 1px rgba(143, 151, 255, 0.35), 0 10px 40px -16px rgba(91, 99, 245, 0.75);

  --brilho-fundo:
    radial-gradient(900px 480px at 12% -8%, rgba(91, 99, 245, 0.30), transparent 60%),
    radial-gradient(760px 420px at 92% 4%, rgba(46, 230, 197, 0.16), transparent 62%);

  --raio: 14px;
  --raio-g: 22px;
  --raio-p: 9px;
  --toque: 44px;
  --largura: 1180px;

  --fonte: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  --fonte-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

:root[data-tema='claro'] {
  color-scheme: light;

  --fundo: #f4f6fd;
  --fundo-topo: #ffffff;
  --fundo-cartao: rgba(255, 255, 255, 0.82);
  --fundo-cartao-forte: #ffffff;
  --fundo-campo: #ffffff;
  --borda: rgba(19, 24, 64, 0.12);
  --borda-forte: rgba(19, 24, 64, 0.28);

  --texto: #151936;
  --texto-suave: #4e557a;
  --texto-fraco: #5f6689;

  --primaria: #4338ca;
  --primaria-clara: #6355e0;
  --primaria-escura: #312b9c;
  --primaria-texto: #ffffff;
  --link: #3730a3;

  --destaque: #0d8e7a;
  --destaque-escura: #0a6f60;
  --aviso: #96600a;
  --aviso-fundo: rgba(255, 190, 92, 0.22);
  --erro: #c22a40;
  --erro-fundo: rgba(255, 122, 140, 0.16);
  --ok: #157a46;
  --ok-fundo: rgba(79, 217, 138, 0.18);

  --sombra: 0 1px 2px rgba(19, 24, 64, 0.07), 0 14px 34px -18px rgba(19, 24, 64, 0.28);
  --sombra-suave: 0 1px 2px rgba(19, 24, 64, 0.08);
  --brilho: 0 0 0 1px rgba(67, 56, 202, 0.3), 0 12px 36px -18px rgba(67, 56, 202, 0.5);

  --brilho-fundo:
    radial-gradient(900px 480px at 12% -8%, rgba(99, 85, 224, 0.17), transparent 60%),
    radial-gradient(760px 420px at 92% 4%, rgba(13, 142, 122, 0.13), transparent 62%);
}

/* Quem prefere claro no sistema e ainda não escolheu nada no site. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema='escuro']):not([data-tema='claro']) {
    color-scheme: light;

    --fundo: #f4f6fd;
    --fundo-topo: #ffffff;
    --fundo-cartao: rgba(255, 255, 255, 0.82);
    --fundo-cartao-forte: #ffffff;
    --fundo-campo: #ffffff;
    --borda: rgba(19, 24, 64, 0.12);
    --borda-forte: rgba(19, 24, 64, 0.28);
    --texto: #151936;
    --texto-suave: #4e557a;
    --texto-fraco: #5f6689;
    --primaria: #4338ca;
    --primaria-clara: #6355e0;
    --primaria-escura: #312b9c;
    --link: #3730a3;
    --destaque: #0d8e7a;
    --destaque-escura: #0a6f60;
    --aviso: #96600a;
    --aviso-fundo: rgba(255, 190, 92, 0.22);
    --erro: #c22a40;
    --erro-fundo: rgba(255, 122, 140, 0.16);
    --ok: #157a46;
    --ok-fundo: rgba(79, 217, 138, 0.18);
    --sombra: 0 1px 2px rgba(19, 24, 64, 0.07), 0 14px 34px -18px rgba(19, 24, 64, 0.28);
    --sombra-suave: 0 1px 2px rgba(19, 24, 64, 0.08);
    --brilho: 0 0 0 1px rgba(67, 56, 202, 0.3), 0 12px 36px -18px rgba(67, 56, 202, 0.5);
    --brilho-fundo:
      radial-gradient(900px 480px at 12% -8%, rgba(99, 85, 224, 0.17), transparent 60%),
      radial-gradient(760px 420px at 92% 4%, rgba(13, 142, 122, 0.13), transparent 62%);
  }
}