/* =============================================================================
   CTL Hub Quiz — tokens de design
   -----------------------------------------------------------------------------
   Estrutura, raios, sombras e ritmo vêm do padrão **Cobalt** (06) do
   padroes-visuais-v2.html: SaaS suave, superfícies brancas sobre canvas
   azul-acinzentado, cantos generosos, sombra difusa e um degradê marca→teal.

   As cores são a identidade CTL Hub do PDF (seção 4.1):
     azul-marinho #0B2D5B   azul de apoio #3B82F6   azul claro #D6E9FF
     cinza texto  #6B7280   cinza linha   #E5E7EB   coral (erro) #E0533D

   Regra do PADRÃO (seção 5): nenhum componente usa cor fixa. Todos leem
   destas variáveis, e só daqui. Trocar o tema é trocar este bloco.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- marca ---- */
  --marca: #0b2d5b;          /* azul-marinho: cabeçalhos, botões primários */
  --marca-forte: #071d3d;
  --marca-suave: #d6e9ff;    /* azul claro: fundos de apoio, selos */
  --apoio: #3b82f6;          /* azul de apoio: destaques, links, gráficos */
  --apoio-claro: #7dabfa;
  --teal: #08b18e;           /* par do degradê Cobalt; acerto e badges "ok" */

  /* ---- superfícies ---- */
  --canvas: #f4f7fc;         /* fundo da página (Cobalt #f5f6fb, puxado ao azul) */
  --superficie: #ffffff;     /* cartões, barras, campos */
  --superficie-2: #eef3fb;   /* faixas internas, células de stat */
  --elevada: #ffffff;        /* menus, modais, drawers */

  /* ---- texto ---- */
  --tinta: #16233a;          /* corpo de texto */
  --tinta-titulo: #0b2d5b;   /* títulos usam o azul-marinho da marca */
  --tinta-fraca: #6b7280;    /* cinza texto do PDF: secundários, legendas */
  --tinta-sobre-marca: #ffffff;
  /* Texto sobre preenchimento saturado (erro, sucesso, degradê da marca).
     Fica branco nos dois temas: o fundo é a cor, não a superfície. */
  --tinta-sobre-cor: #ffffff;
  /* O amarelo do alerta é claro demais para texto branco. */
  --tinta-sobre-alerta: #16233a;

  /* ---- linhas ---- */
  --linha: #e5e7eb;          /* cinza linha do PDF */
  --linha-forte: #cfd7e6;

  /* ---- estados ---- */
  --erro: #e0533d;           /* coral: respostas erradas e alertas */
  --erro-suave: #fdece8;
  --sucesso: #08b18e;
  --sucesso-suave: #e0f7f1;
  --alerta: #cf8a00;
  --alerta-suave: #fbf0d8;
  --info: #3b82f6;
  --info-suave: #d6e9ff;

  /* ---- pesos das questões (1x, 2x, 3x, 5x) ---- */
  --peso-1: #6b7280;
  --peso-2: #3b82f6;
  --peso-3: #8b5cf6;
  --peso-5: #f59e0b;

  /* ---- pódio ---- */
  --ouro: #e3b341;
  --prata: #a8b3c2;
  --bronze: #c77b40;

  /* ---- tipografia (PDF seção 4.2) ---- */
  --fonte-titulo: "Outfit", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Figtree", "Segoe UI", system-ui, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;
  --peso-black: 800;

  /* Escala fluida: encolhe até 320 px sem quebrar. */
  --texto-xs: 0.75rem;
  --texto-sm: 0.8125rem;
  --texto-base: 0.9375rem;
  --texto-md: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 1.75rem);
  --texto-3xl: clamp(1.75rem, 1.3rem + 2.2vw, 2.25rem);
  --texto-hero: clamp(2rem, 1.2rem + 5vw, 3.25rem);
  --texto-cronometro: clamp(2.5rem, 1.5rem + 7vw, 4.5rem);

  /* ---- formas (raio base 0,5rem; cartões até 2xl — PDF 4.2) ---- */
  --raio-xs: 0.375rem;
  --raio: 0.5rem;
  --raio-md: 0.6875rem;
  --raio-lg: 0.875rem;
  --raio-xl: 1rem;
  --raio-2xl: 1.25rem;
  --raio-pill: 999px;

  /* ---- espaçamento ---- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.25rem;
  --e6: 1.5rem;
  --e8: 2rem;
  --e10: 2.5rem;
  --e12: 3rem;
  --e16: 4rem;

  /* ---- sombras (difusas e azuladas, como no Cobalt) ---- */
  --sombra-sm: 0 1px 2px rgba(11, 45, 91, 0.06);
  --sombra: 0 4px 14px -6px rgba(11, 45, 91, 0.18);
  --sombra-md: 0 12px 26px -10px rgba(11, 45, 91, 0.22);
  --sombra-lg: 0 20px 50px -16px rgba(11, 45, 91, 0.26);
  --sombra-foco: 0 0 0 4px rgba(59, 130, 246, 0.22);

  /* ---- movimento ---- */
  --transicao: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transicao-lenta: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- layout ---- */
  --largura-conteudo: 1160px;
  --largura-estreita: 420px;
  --barra-lateral: 232px;
  --altura-topo: 64px;

  /* ---- padrão de pontos azuis do fundo (PDF 4.2) ---- */
  --pontos: rgba(59, 130, 246, 0.16);
  --pontos-tamanho: 22px;

  /* Cor de máscara (`mask-image`). Só o canal alfa importa aqui — a cor em si
     nunca é pintada. Existe como token para que nenhum componente precise
     escrever um hex solto. */
  --mascara: #000000;
}

/* ---------------------------------------------------------------- modo escuro
   Duas portas de entrada: a preferência do sistema (quando o usuário nunca
   escolheu) e o atributo data-tema="escuro" gravado pelo botão flutuante.
   O seletor :not([data-tema="claro"]) garante que escolher "claro" na mão
   vença a preferência do sistema.                                             */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --marca: #3b82f6;
    --marca-forte: #6f93ff;
    --marca-suave: #14315c;
    --apoio: #6f93ff;
    --apoio-claro: #a9c4ff;
    --teal: #2dd4b0;

    --canvas: #081426;
    --superficie: #0f2140;
    --superficie-2: #16294c;
    --elevada: #16294c;

    --tinta: #e8eef9;
    --tinta-titulo: #ffffff;
    --tinta-fraca: #8fa0bc;
    --tinta-sobre-marca: #071d3d;

    --linha: #1e3557;
    --linha-forte: #2c4670;

    --erro: #ff6b54;
    --erro-suave: #3a1710;
    --sucesso: #2dd4b0;
    --sucesso-suave: #0c2c25;
    --alerta: #e9b44c;
    --alerta-suave: #2c2410;
    --info: #6f93ff;
    --info-suave: #14315c;

    --peso-1: #8fa0bc;
    --peso-2: #6f93ff;
    --peso-3: #a78bfa;
    --peso-5: #fbbf24;

    /* Medalhas do podio, um tom acima para brilhar no fundo escuro. */
    --ouro: #f0c75e;
    --prata: #c3ccd8;
    --bronze: #dd9457;

    --tinta-sobre-alerta: #16233a;

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra: 0 4px 14px -6px rgba(0, 0, 0, 0.55);
    --sombra-md: 0 12px 26px -10px rgba(0, 0, 0, 0.6);
    --sombra-lg: 0 20px 50px -16px rgba(0, 0, 0, 0.65);
    --sombra-foco: 0 0 0 4px rgba(111, 147, 255, 0.3);

    --pontos: rgba(111, 147, 255, 0.14);
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;

  --marca: #3b82f6;
  --marca-forte: #6f93ff;
  --marca-suave: #14315c;
  --apoio: #6f93ff;
  --apoio-claro: #a9c4ff;
  --teal: #2dd4b0;

  --canvas: #081426;
  --superficie: #0f2140;
  --superficie-2: #16294c;
  --elevada: #16294c;

  --tinta: #e8eef9;
  --tinta-titulo: #ffffff;
  --tinta-fraca: #8fa0bc;
  --tinta-sobre-marca: #071d3d;

  --linha: #1e3557;
  --linha-forte: #2c4670;

  --erro: #ff6b54;
  --erro-suave: #3a1710;
  --sucesso: #2dd4b0;
  --sucesso-suave: #0c2c25;
  --alerta: #e9b44c;
  --alerta-suave: #2c2410;
  --info: #6f93ff;
  --info-suave: #14315c;

  --peso-1: #8fa0bc;
  --peso-2: #6f93ff;
  --peso-3: #a78bfa;
  --peso-5: #fbbf24;

  /* Medalhas do podio, um tom acima para brilhar no fundo escuro. */
  --ouro: #f0c75e;
  --prata: #c3ccd8;
  --bronze: #dd9457;

  --tinta-sobre-alerta: #16233a;

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra: 0 4px 14px -6px rgba(0, 0, 0, 0.55);
  --sombra-md: 0 12px 26px -10px rgba(0, 0, 0, 0.6);
  --sombra-lg: 0 20px 50px -16px rgba(0, 0, 0, 0.65);
  --sombra-foco: 0 0 0 4px rgba(111, 147, 255, 0.3);

  --pontos: rgba(111, 147, 255, 0.14);
}