/* Tokens da Gabarita — a folha de respostas.
   Tema claro = papel; tema escuro = lousa. */

:root {
  color-scheme: light dark;

  /* Cores (claro) */
  --papel: #F6F8FB;
  --superficie: #FFFFFF;
  --grafite: #1C2333;
  --grafite-suave: #5B6478;
  --linha: #D9DEE8;
  --tinta: #2340D6;
  --sobre-tinta: #FFFFFF;
  --marca-texto: #FFE34A;
  --sobre-marca-texto: #1C2333;
  --acerto: #12A07A;
  --erro: #E5484D;
  --tinta-fundo: color-mix(in srgb, var(--tinta) 8%, transparent);
  --erro-fundo: color-mix(in srgb, var(--erro) 10%, transparent);
  --sombra-folha: 0 1px 2px rgb(28 35 51 / 0.04), 0 16px 40px -16px rgb(28 35 51 / 0.16);

  /* Tipografia */
  --fonte-ui: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-texto: "Source Serif 4", Georgia, "Times New Roman", serif;
  --fonte-codigo: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Escala 1.25 sobre 1rem (16px celular, 17px desktop) */
  --t-13: 0.8125rem;
  --t-16: 1rem;
  --t-20: 1.25rem;
  --t-25: 1.5625rem;
  --t-31: 1.9375rem;
  --t-39: 2.4375rem;
  --t-49: 3.0625rem;

  /* Espaçamento em escala de 4 */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;

  /* Raios: hierarquia, não valor único */
  --raio-bolinha: 50%;
  --raio-pilula: 999px;
  --raio-campo: 12px;
  --raio-cartao: 16px;
  --raio-folha: 24px;

  /* Layout */
  --largura-max: 1120px;
  --largura-leitura: 68ch;
  --altura-barra-inferior: 64px;
  --largura-lateral: 240px;
  --largura-lateral-recolhida: 80px;

  /* Movimento */
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rapido: 140ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --papel: #121A33;
    --superficie: #1A2445;
    --grafite: #E8ECF5;
    --grafite-suave: #9AA5C0;
    --linha: #2E3A63;
    --tinta: #7D93FF;
    --sobre-tinta: #121A33;
    --acerto: #3DD4A4;
    --erro: #FF6B70;
    --sombra-folha: 0 1px 2px rgb(0 0 0 / 0.2), 0 16px 40px -16px rgb(0 0 0 / 0.5);
  }
}

:root[data-theme="escuro"] {
  color-scheme: dark;
  --papel: #121A33;
  --superficie: #1A2445;
  --grafite: #E8ECF5;
  --grafite-suave: #9AA5C0;
  --linha: #2E3A63;
  --tinta: #7D93FF;
  --sobre-tinta: #121A33;
  --acerto: #3DD4A4;
  --erro: #FF6B70;
  --sombra-folha: 0 1px 2px rgb(0 0 0 / 0.2), 0 16px 40px -16px rgb(0 0 0 / 0.5);
}

:root[data-theme="claro"] {
  color-scheme: light;
}