/* Tema MR Tech: preto e dourado, minimalista. Para mudar o visual inteiro, mude só este arquivo.
   Fontes do próprio sistema (sem Google Fonts): carrega na hora no 4G e a CSP não precisa liberar outro site.
   Contraste conferido para texto (mínimo 4,5:1 com o fundo onde aparece). */

:root {
  color-scheme: dark;
  --fundo: #0b0b0c;
  --superficie: #141416;
  --superficie-2: #1c1c1f;
  --linha: #2a2a2e;
  --linha-forte: #3a3a40;
  --texto: #f4f1ea;
  --texto-2: #bdb7aa;          /* 9,2:1 sobre a superfície */
  --texto-suave: #8f8a7e;      /* 5,3:1 sobre a superfície */
  --dourado: #d4af37;          /* 8,7:1 sobre a superfície: serve para texto e destaque */
  --dourado-suave: #2a2414;
  --sobre-dourado: #0b0b0c;
  --perigo: #c9372f;           /* 5,2:1 com o texto branco do botão "Remover" armado */
  --sobre-perigo: #ffffff;
  --sombra: 0 10px 30px rgba(0, 0, 0, .45);

  /* Uma cor por carro (cor-1 … cor-8). Distintas entre si e do dourado da marca. */
  --serie-1: #5b9bf0;
  --serie-2: #e8743b;
  --serie-3: #2ec4a0;
  --serie-4: #c77dff;
  --serie-5: #f06c9b;
  --serie-6: #7bc950;
  --serie-7: #47c1e8;
  --serie-8: #ef5f57;

  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-numeros: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --raio: 14px;
  --raio-pequeno: 10px;
  --toque: 44px;               /* altura mínima de botão e campo: tamanho de dedo */
}

/* Quem usa o celular no modo claro recebe a versão clara, com o dourado escurecido para ter contraste. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --fundo: #f5f3ee;
    --superficie: #ffffff;
    --superficie-2: #f3f0e8;
    --linha: #e3ded2;
    --linha-forte: #cfc8b8;
    --texto: #141414;
    --texto-2: #47443d;
    --texto-suave: #69645a;      /* 5,9:1 sobre branco */
    --dourado: #7d600e;          /* 5,9:1 sobre branco */
    --dourado-suave: #f6eed6;
    --sobre-dourado: #ffffff;
    --perigo: #b93a32;
    --sombra: 0 10px 30px rgba(20, 20, 20, .12);
    --serie-1: #2563c9;
    --serie-2: #c2551e;
    --serie-3: #0f8f72;
    --serie-4: #8b44c9;
    --serie-5: #c93d72;
    --serie-6: #4c8f2a;
    --serie-7: #1a8fb5;
    --serie-8: #c23a33;
  }
}

.cor-1 { --cor: var(--serie-1); }
.cor-2 { --cor: var(--serie-2); }
.cor-3 { --cor: var(--serie-3); }
.cor-4 { --cor: var(--serie-4); }
.cor-5 { --cor: var(--serie-5); }
.cor-6 { --cor: var(--serie-6); }
.cor-7 { --cor: var(--serie-7); }
.cor-8 { --cor: var(--serie-8); }