/*
* Design tokens inspirados no america.gov (extraídos do CSS em produção, 2026-09).
* Fontes originais são pagas (Helvetica Now + Rhymes) — trocadas por alternativas grátis.
*
*
*
*/
:root {
/* ---------- Tipografia ---------- */
--font-body: "Inter Tight", "Helvetica Neue", Arial, sans-serif; /* orig: Helvetica Now Text */
--font-sans-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif; /* orig: Helvetica Now Display */
--font-serif-display: "Instrument Serif", "Times New Roman", serif; /* orig: Rhymes Display */
--text-body-s: .75rem; /* 12 */
--text-body-m: 1rem; /* 16 */
--text-prompt: 1.3125rem; /* 21 — texto "grande" de leitura/input */
--text-heading-xs: clamp(1rem, .96rem + .19vw, 1.125rem);
--text-heading-s: clamp(1.125rem, .99rem + .56vw, 1.5rem);
--text-heading-m: clamp(1.5rem, 1.32rem + .75vw, 2rem);
--text-heading-sans-m: clamp(1.75rem, 1.57rem + .75vw, 2.25rem);
--text-heading-l: clamp(3rem, 2.3rem + 3.01vw, 5rem);
--tracking-normal: -.01em; /* todo o texto é levemente apertado */
--tracking-tight: -.03em; /* títulos */
--tracking-display: -.054em; /* serif gigante (manifesto/wordmark) */
/* ---------- Cor: uma âncora (navy quase preto) + alfas dela ---------- */
--navy-900: #000c1f; /* texto */
--navy-700: #002664; /* botão primário */
--blue-600: #004ac3; /* hover/foco */
--blue-500: #0066c5; /* link */
--blue-50: #f1f5fb;
--red-600: #d80007;
--green: #34c759;
--color-bg: #fff;
--color-surface-muted: #f7f7f7;
--color-surface-footer: #fbfbfb;
--color-text-primary: var(--navy-900);
--color-text-secondary: color-mix(in srgb, var(--navy-900) 65%, transparent);
--color-text-tertiary: color-mix(in srgb, var(--navy-900) 45%, transparent);
--color-text-disabled: color-mix(in srgb, var(--navy-900) 15%, transparent);
--color-border: color-mix(in srgb, var(--navy-900) 10%, transparent);
--color-border-strong: color-mix(in srgb, var(--navy-900) 45%, transparent);
--color-fill-secondary: color-mix(in srgb, var(--navy-700) 10%, transparent);
--color-fill-tertiary: color-mix(in srgb, var(--navy-700) 5%, transparent); /* chips/botões ghost */
/* ---------- Raio: escala grande, pill por padrão ---------- */
--radius-8: 8px; --radius-16: 16px; --radius-24: 24px;
--radius-40: 40px; /* cards, hero, botões */
--radius-48: 48px; --radius-72: 72px;
--radius-full: 9999px;
/* ---------- Sombra: difusa, tingida de navy, baixa opacidade ---------- */
--shadow-1: 0 10px 40px 0 #010e2414; /* elevação padrão */
--shadow-2: 0 8px 24px 0 #010e241f; /* input/dock */
--shadow-3: 0 4px 24px 0 #010e2429;
/* sombra "empilhada" para objetos flutuantes (cards de UI, ícones) */
--shadow-stack:
0 2px 2px #0000000d, 0 7px 3.5px #0000000a,
0 15px 4.5px #00000008, 0 27px 5.5px #00000003;
--blur-frost: 25px; /* backdrop-filter do dock/menu */
/* ---------- Espaço / layout ---------- */
--spacing: .25rem;
--container-site: 87rem;
--grid-gutter: 16px;
--grid-margin: min(1.75rem, 24px);
--grid-columns: 4;
/* ---------- Movimento ---------- */
--ease-standard: cubic-bezier(.4, 0, .2, 1);
--ease-out-quint: cubic-bezier(.22, 1, .36, 1); /* entradas */
--ease-drawer: cubic-bezier(.32, .72, 0, 1); /* sheets/menus (estilo iOS) */
--ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* leve overshoot */
--duration-fast: .15s;
--scale-press: .98;
}
@media (width >= 768px) { :root { --grid-margin: 48px; --grid-columns: 12; } }
/* ---------- Base ---------- */
body {
font-family: var(--font-body);
color: var(--color-text-primary);
background: var(--color-bg);
letter-spacing: var(--tracking-normal);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.site-container { width: min(100% - var(--grid-margin) * 2, var(--container-site)); margin-inline: auto; }
.site-grid { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); }
/* Títulos: serif editorial p/ emoção, sans p/ informação */
.display-serif { font-family: var(--font-serif-display); font-weight: 400; font-size: var(--text-heading-l); line-height: 1.05; letter-spacing: var(--tracking-display); }
.heading-sans { font-family: var(--font-sans-display); font-weight: 500; font-size: var(--text-heading-sans-m); line-height: 1.14; letter-spacing: var(--tracking-tight); }
.body-lg { font-size: var(--text-prompt); line-height: 1.5; color: var(--color-text-secondary); }
/* Botões pill */
.btn { display: inline-flex; align-items: center; gap: .5rem; height: 44px; padding: 0 20px 2px; border-radius: var(--radius-40);
font-weight: 500; border: 0; cursor: pointer; transition: scale var(--duration-fast) var(--ease-standard), background var(--duration-fast); }
.btn:active { scale: var(--scale-press); }
.btn-primary { background: var(--navy-700); color: #fff; }
.btn-primary:hover { background: var(--blue-600); }
.btn-ghost { background: var(--color-fill-tertiary); color: var(--color-text-primary); height: 32px; padding: 0 12px 2px; font-size: .75rem; }
/* Card / superfície grande */
.card { background: var(--color-surface-muted); border-radius: var(--radius-40); overflow: hidden; }
@supports (corner-shape: superellipse(2)) { .card { corner-shape: superellipse(1.3); } } /* squircle progressivo (só em cards; pílulas ficam redondas) */
/* Dock de input flutuante (vidro fosco) */
.dock { position: fixed; inset-inline: 0; bottom: 20px; margin-inline: auto; width: min(100% - 32px, 640px);
display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 24px; border-radius: var(--radius-full);
background: color-mix(in srgb, #fff 80%, transparent); backdrop-filter: blur(var(--blur-frost));
box-shadow: var(--shadow-2); border: 1px solid var(--color-border); }
/* Revelação de palavras no scroll (manifesto) */
.reveal-word { display: inline-block; opacity: .25; filter: blur(6px); transition: opacity .6s var(--ease-out-quint), filter .6s var(--ease-out-quint); }
.reveal-word.is-in { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.reveal-word { opacity: 1; filter: none; }
}