/* =====================================================================
   Contexta · identidade visual em um só lugar
   Para mudar cores, fontes ou medidas do site inteiro, mude aqui.
   ===================================================================== */

:root {
  /* ---------- Paleta ----------
     Azuis numa escala só, no tom do azul da marca (harmonizada em 03/10/2026):
     marinho (900) · hover (700) · marca (500) · claro (300, só sobre o marinho) · fundos suaves (100, 50).
     Contraste: 900 e 700 e 500 servem de texto no branco (16:1, 7,7:1, 5,1:1); 300 só no marinho (7,9:1). */
  --deep-navy: #0B1F3A;   /* azul 900: texto de destaque, faixa escura */
  --blue-700: #1747C4;    /* azul 700: passar o mouse e pressionar */
  --smart-blue: #1E5EFF;  /* azul 500, a marca: logo, nome, links, o que é clicável */
  --blue-300: #8FB2FF;    /* azul 300: detalhe e rótulos sobre o marinho; nunca texto no branco */
  --blue-100: #E3ECFF;    /* azul 100: fundo de etiqueta e destaque suave */
  --blue-50: #F2F6FF;     /* azul 50: fundo mais leve */
  --cyan-tech: #00D4FF;   /* ciano antigo: fora de uso desde a harmonização (era de outra família de cor) */
  --bg-light: #F5F7FA;    /* fundo suave do topo e áreas de apoio */
  --bg-dark: #0A0F1C;     /* rodapé */
  --text: #111827;
  --text-muted: #6B7280;  /* 4,8:1 no branco */
  --warning: #F59E0B;     /* âmbar: fundo/detalhe, nunca como texto no branco (2,15:1) */
  --success: #22C55E;
  --error: #EF4444;
  --white: #FFFFFF;

  /* ---------- Papéis ---------- */
  --page: var(--white);
  --line: color-mix(in srgb, var(--deep-navy) 9%, var(--white));
  --line-strong: color-mix(in srgb, var(--deep-navy) 18%, var(--white));
  --blue-hover: var(--blue-700);
  --warning-soft: color-mix(in srgb, var(--warning) 18%, var(--white));
  --avatar: color-mix(in srgb, var(--deep-navy) 7%, var(--white));
  --on-dark-muted: color-mix(in srgb, var(--white) 70%, var(--bg-dark));
  --blue-soft: var(--blue-50);

  /* ---------- Tipografia em três papéis ---------- */
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;  /* títulos e interface */
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;                  /* leitura */
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;                           /* dados: datas, fontes, rótulos */

  /* Escala (computador)        tamanho / altura da linha */
  --display: 600 72px/1.0 var(--sans);   /* nome do caso ou da pessoa */
  --h2: 600 32px/1.15 var(--sans);       /* título da notícia aberta */
  --h3: 600 20px/1.3 var(--sans);        /* títulos de seção */
  --lead: 400 22px/1.5 var(--serif);     /* resumo do caso */
  --read: 400 18px/1.6 var(--serif);     /* texto de leitura */
  --ui: 400 15px/1.45 var(--sans);       /* títulos da linha do tempo */
  --ui-sm: 400 14px/1.45 var(--sans);
  --data: 400 12px/1.5 var(--mono);      /* datas, "há X", fontes */
  --data-label: 500 11px/1.4 var(--mono);/* rótulos em maiúsculas */
  --track-display: -0.04em;
  --track-caps: 0.08em;

  /* ---------- Espaço: mais respiro ---------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --container: 1440px;
  --gutter: 48px;
  --page-pad: 40px;
  --measure: 68ch;     /* largura confortável de leitura */
  --radius: 10px;
  --radius-sm: 6px;

  /* ---------- Movimento ---------- */
  --fast: 160ms;
  --medium: 320ms;
  --slow: 600ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =====================================================================
   TEMAS DE COR (em teste). Cada tema só redefine os papéis abaixo.
   --hero-*      faixa do topo        --accent     cor de calor da marca
   --accent-ink  versão do destaque segura para texto no branco
   --key         momentos-chave       --tl-line    linha da linha do tempo
   O tema em uso vem de <html data-tema="..."> (padrão: marinho).
   ===================================================================== */

/* 1. Marinho: topo escuro e sóbrio, detalhes no azul claro da mesma escala. Corporativo, "jornal sério". */
:root, [data-tema="marinho"] {
  --hero-bg:
    radial-gradient(55% 140% at 90% 0%, color-mix(in srgb, var(--smart-blue) 28%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, var(--deep-navy) 0%, color-mix(in srgb, var(--deep-navy) 85%, var(--smart-blue)) 100%);
  --hero-title: var(--white);
  --hero-kicker: var(--blue-300);                                    /* 7,9:1 no marinho */
  --hero-meta: color-mix(in srgb, var(--white) 72%, var(--deep-navy)); /* ~9:1 */
  --hero-border: transparent;
  --accent: var(--blue-300);
  --accent-ink: var(--smart-blue);                                   /* 5,1:1 no branco */
  --accent-bar: linear-gradient(var(--smart-blue), var(--blue-300));
  --key: var(--warning);
  --key-soft: var(--warning-soft);
  --tl-line: var(--line-strong);
}

/* 2. Azul: a cor da marca aparece mais; topo claro tingido de azul. Tecnológico, confiante. */
[data-tema="azul"] {
  --hero-bg:
    radial-gradient(60% 140% at 88% 0%, color-mix(in srgb, var(--smart-blue) 22%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--smart-blue) 9%, var(--white)) 0%, var(--white) 100%);
  --hero-title: var(--deep-navy);
  --hero-kicker: color-mix(in srgb, var(--smart-blue) 70%, var(--deep-navy)); /* ≥ 5:1 no fundo tingido */
  --hero-meta: color-mix(in srgb, var(--text-muted) 65%, var(--deep-navy));   /* ≥ 6:1 */
  --hero-border: color-mix(in srgb, var(--smart-blue) 18%, var(--white));
  --accent: var(--smart-blue);
  --accent-ink: var(--smart-blue);
  --accent-bar: var(--smart-blue);
  --key: var(--warning);
  --key-soft: var(--warning-soft);
  --tl-line: color-mix(in srgb, var(--smart-blue) 30%, var(--white));
}

/* 3. Âmbar: calor; topo claro com luz âmbar. Momentos-chave passam para o azul. Editorial, acolhedor. */
[data-tema="ambar"] {
  --hero-bg:
    radial-gradient(60% 140% at 88% 0%, color-mix(in srgb, var(--warning) 28%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--warning) 10%, var(--white)) 0%, var(--white) 100%);
  --hero-title: var(--deep-navy);
  --hero-kicker: var(--deep-navy);
  --hero-meta: color-mix(in srgb, var(--text-muted) 65%, var(--deep-navy));   /* ≥ 6:1 */
  --hero-border: color-mix(in srgb, var(--warning) 30%, var(--white));
  --accent: var(--warning);
  --accent-ink: var(--deep-navy);
  --accent-bar: var(--warning);
  --key: var(--smart-blue);
  --key-soft: var(--blue-soft);
  --tl-line: color-mix(in srgb, var(--warning) 45%, var(--white));
}

@media (max-width: 1199px) { :root { --gutter: 32px; } }
@media (max-width: 767px) {
  :root {
    --display: 600 40px/1.05 var(--sans);
    --h2: 600 26px/1.2 var(--sans);
    --lead: 400 19px/1.55 var(--serif);
    --read: 400 17px/1.6 var(--serif);
    --gutter: 16px;
    --page-pad: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0ms; --medium: 0ms; --slow: 0ms; }
}