/* =====================================================================
   Explika · design tokens (só a parte visual)
   Origem: site explika.com.br (paleta, fonte Inter, aurora, botões) +
   cores do símbolo do logo. Formato de notícia inspirado no camaleao.dev
   (marca-texto, etiquetas em fonte mono, cartões curtos), com a cara da Explika.
   Use as variáveis; não escreva cor solta no componente.
   Tema claro é o padrão. Escuro: [data-theme="dark"] no <html>.
   ===================================================================== */

:root,
[data-theme="light"] {
  /* Marca (símbolo do logo: três faixas = páginas do Diário Oficial empilhadas) */
  --marca-ciano: #39d8e7;
  --marca-verde: #98dd26;
  --marca-roxo: #786efe;
  --marca-tinta: #1d1d1b;          /* texto do logo */

  /* Superfícies */
  --fundo: #ffffff;
  --fundo-suave: #f9fafb;
  --fundo-azulado: #f5faff;
  --papel: #fbfaf6;                /* fundo editorial do boletim (levemente quente) */
  --cartao: #ffffff;

  /* Texto */
  --texto: #101828;
  --texto-medio: #475467;
  --texto-suave: #667085;

  /* Ação (azul Explika) */
  --azul-50: #eff8ff;
  --azul-100: #d1e9ff;
  --azul-200: #b2ddff;
  --azul-500: #2e90fa;
  --azul-600: #1570ef;
  --azul-700: #175cd3;
  --azul-800: #1849a9;
  --primaria: var(--azul-600);
  --primaria-hover: var(--azul-700);
  --primaria-texto: #ffffff;

  /* Apoio */
  --roxo-50: #f4f3ff;
  --roxo-600: #6938ef;
  --secundaria: var(--roxo-600);

  /* Marca-texto: destaca a palavra que importa (padrão do boletim) */
  --marca-texto: color-mix(in oklab, var(--marca-verde) 38%, transparent);

  /* Estados */
  --sucesso: #027a48;
  --sucesso-fundo: #ecfdf3;
  --alerta: #b54708;
  --alerta-fundo: #fffaeb;
  --perigo: #b42318;
  --perigo-fundo: #fef3f2;

  /* Prazo (o campo mais importante do ato) */
  --prazo: #b42318;
  --prazo-fundo: #fef3f2;

  /* Bordas e sombras */
  --borda: #eaecf0;
  --borda-forte: #d0d5dd;
  --sombra-cartao: 0 1px 2px rgb(16 24 40 / 0.05), 0 1px 3px rgb(16 24 40 / 0.06);
  --sombra-elevada: 0 12px 24px -6px rgb(16 24 40 / 0.12), 0 4px 8px -4px rgb(16 24 40 / 0.06);
  --sombra-primaria: 0 8px 20px -6px color-mix(in oklab, var(--primaria) 45%, transparent);

  /* Aurora (fundo do topo da landing) */
  --aurora-1: rgb(46 144 250 / 0.18);
  --aurora-2: rgb(105 56 239 / 0.12);
  --aurora-3: rgb(152 221 38 / 0.10);

  /* Tipografia */
  --fonte-texto: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --texto-xs: 0.75rem;     /* 12 */
  --texto-sm: 0.875rem;    /* 14 */
  --texto-base: 1rem;      /* 16 */
  --texto-lg: 1.125rem;    /* 18 */
  --texto-xl: 1.25rem;     /* 20 */
  --texto-2xl: 1.5rem;     /* 24 */
  --texto-3xl: 2rem;       /* 32 */
  --texto-4xl: 2.75rem;    /* 44 */
  --texto-5xl: 3.75rem;    /* 60 */

  /* Espaço (base 4) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.25rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-10: 2.5rem;
  --e-12: 3rem;
  --e-16: 4rem;

  /* Raios */
  --raio-sm: 6px;
  --raio: 8px;
  --raio-lg: 12px;
  --raio-xl: 16px;
  --raio-pilula: 9999px;

  /* Movimento */
  --duracao: 200ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);

  --largura-texto: 42rem;
  --largura-pagina: 72rem;
}

[data-theme="dark"] {
  --fundo: #0c111d;
  --fundo-suave: #101828;
  --fundo-azulado: #161b26;
  --papel: #0f1420;
  --cartao: #161b26;

  --texto: #f5faff;
  --texto-medio: #98a2b3;
  --texto-suave: #667085;

  --primaria: #53b1fd;
  --primaria-hover: #84caff;
  --primaria-texto: #0c111d;
  --secundaria: #b692f6;
  --azul-50: #102a56;
  --azul-100: #1849a9;
  --azul-700: #b2ddff;

  --marca-texto: color-mix(in oklab, var(--marca-verde) 30%, transparent);

  --sucesso: #32d583;
  --sucesso-fundo: #053321;
  --alerta: #fdb022;
  --alerta-fundo: #4e1d09;
  --perigo: #fda29b;
  --perigo-fundo: #55160c;
  --prazo: #fda29b;
  --prazo-fundo: #55160c;

  --borda: #1f242f;
  --borda-forte: #333741;
  --sombra-cartao: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-elevada: 0 12px 24px -6px rgb(0 0 0 / 0.5);

  --aurora-1: rgb(46 144 250 / 0.35);
  --aurora-2: rgb(182 146 246 / 0.25);
  --aurora-3: rgb(152 221 38 / 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0c111d;
    --fundo-suave: #101828;
    --fundo-azulado: #161b26;
    --papel: #0f1420;
    --cartao: #161b26;
    --texto: #f5faff;
    --texto-medio: #98a2b3;
    --texto-suave: #667085;
    --primaria: #53b1fd;
    --primaria-hover: #84caff;
    --primaria-texto: #0c111d;
    --secundaria: #b692f6;
    --azul-50: #102a56;
    --azul-100: #1849a9;
    --azul-700: #b2ddff;
    --marca-texto: color-mix(in oklab, var(--marca-verde) 30%, transparent);
    --sucesso: #32d583;
    --sucesso-fundo: #053321;
    --alerta: #fdb022;
    --alerta-fundo: #4e1d09;
    --perigo: #fda29b;
    --perigo-fundo: #55160c;
    --prazo: #fda29b;
    --prazo-fundo: #55160c;
    --borda: #1f242f;
    --borda-forte: #333741;
    --sombra-cartao: 0 1px 2px rgb(0 0 0 / 0.4);
    --sombra-elevada: 0 12px 24px -6px rgb(0 0 0 / 0.5);
    --aurora-1: rgb(46 144 250 / 0.35);
    --aurora-2: rgb(182 146 246 / 0.25);
    --aurora-3: rgb(152 221 38 / 0.14);
  }
}