/* ==========================================================================
GRUPO PV · Design System 2.0 · tokens
Classificação: TRABALHO (aguarda aprovação da Pati e do Pedro)
Síntese de três referências: pedroscreltz.framer.media, archlending.com, elvalabs.ai
Nada do design system 1.0 foi reaproveitado. Sem serifa: a marca é tecnológica e de vidro.
Fontes (links separados; combinados no mesmo link o Fontshare omite famílias):
========================================================================== */
:root {
/* ---------- 1. Cor: matéria-prima ---------- */
--pv-tinta: #151618; /* preto grafite. Fundo das cenas escuras e tinta sobre papel. 15,6:1 sobre papel */
--pv-tinta-2: #1e1f22; /* superfície elevada sobre tinta */
--pv-tinta-3: #2a2b2f; /* borda forte e hover sobre tinta */
--pv-papel: #f1ede9; /* osso quente. Fundo das cenas claras */
--pv-papel-2: #ffffff; /* card sobre papel */
--pv-papel-3: #e6e1db; /* campo, trilho, faixa alternada */
--pv-grafite: #5a5b61; /* texto secundário sobre papel. 5,81:1 */
--pv-nevoa: #a7a8ad; /* texto secundário sobre tinta. 7,6:1 */
--pv-sinal: #ff5700; /* laranja-sinal. Índice, luz, foco. Máx. 5% da área */
--pv-sinal-texto: #b33c00; /* o sinal como texto pequeno sobre papel. 5,06:1 */
--pv-gelo: #8fb0ff; /* luz fria. Só em brilho, reflexo e risco de luz, nunca em texto */
--pv-ok: #1f8a4c;
--pv-erro: #c8321f;
/* ---------- 2. Cor: papéis (cena Papel é o padrão) ---------- */
--bg: var(--pv-papel);
--surface: var(--pv-papel-2);
--surface-2: var(--pv-papel-3);
--fg: var(--pv-tinta);
--fg-muted: var(--pv-grafite);
--line: rgb(21 22 24 / 12%);
--line-strong: rgb(21 22 24 / 28%);
--accent: var(--pv-sinal);
--accent-fg: var(--pv-tinta); /* texto sobre laranja é SEMPRE tinta (5,7:1). Branco dá 3,2:1 e está proibido */
--accent-text: var(--pv-sinal-texto);
--ink-gradient: linear-gradient(180deg, #151618 35%, #55565c 100%); /* títulos */
--lit-gradient: linear-gradient(95deg, #151618 0%, #6b2a0c 45%, #c24400 100%); /* a palavra acesa sobre papel */
/* ---------- 3. Vidro ---------- */
--glass-bg: rgb(255 255 255 / 55%);
--glass-line: rgb(255 255 255 / 80%);
--glass-shine: inset 0 1px 0 rgb(255 255 255 / 90%);
--glass-shadow: 0 1px 2px rgb(21 22 24 / 6%), 0 20px 50px -24px rgb(21 22 24 / 28%);
--glass-blur: blur(22px) saturate(1.4);
/* ---------- 4. Tipografia ---------- */
--font-sans: "Switzer", "Helvetica Neue", Arial, sans-serif; /* tudo que se lê */
--font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace; /* rótulo, dado, índice, HUD */
--text-mega: clamp(4.5rem, 1.9rem + 10.7vw, 11.5rem); /* 72 → 184 */
--text-hero: clamp(3rem, 1.9rem + 4.4vw, 5.75rem); /* 48 → 92. Hero em duas colunas */
--text-6xl: clamp(3rem, 1.66rem + 5.5vw, 6.625rem); /* 48 → 106 */
--text-5xl: clamp(2.5rem, 1.85rem + 2.67vw, 4.25rem); /* 40 → 68. Título de seção */
--text-4xl: clamp(2rem, 1.63rem + 1.52vw, 3rem); /* 32 → 48 */
--text-3xl: clamp(1.5rem, 1.31rem + 0.76vw, 2rem); /* 24 → 32 */
--text-2xl: 1.5rem;
--text-xl: 1.25rem;
--text-lg: 1.125rem;
--text-base: 1rem;
--text-sm: 0.875rem;
--text-xs: 0.75rem;
--text-mono: 0.6875rem; /* 11. Rótulo mono em caixa alta */
--leading-display: 0.95;
--leading-title: 1.05;
--leading-body: 1.5;
--tracking-display: -0.045em;
--tracking-title: -0.03em;
--tracking-body: -0.01em;
--tracking-mono: 0.06em;
/* ---------- 5. Espaço: base 4px ---------- */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
--space-32: 128px;
--section-y: clamp(80px, 4.3rem + 4vw, 128px);
--gutter: clamp(16px, 0.6rem + 2.3vw, 40px);
--container: 1320px;
--measure: 60ch;
/* ---------- 6. Forma ---------- */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px; /* painel de vidro grande */
--radius-pill: 999px;
--dash: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px);
--shadow-card: 0 1px 0 rgb(255 255 255 / 70%) inset, 0 1px 2px rgb(21 22 24 / 6%), 0 12px 32px -12px rgb(21 22 24 / 18%);
--shadow-float: 0 24px 60px -20px rgb(21 22 24 / 35%);
/* ---------- 7. Movimento ---------- */
--dur-fast: 180ms;
--dur-base: 400ms;
--dur-slow: 700ms;
--dur-focus: 900ms;
--ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--rise: 20px;
}
/* Cena Tinta: data-scene="tinta" na seção */
[data-scene="tinta"] {
--bg: var(--pv-tinta);
--surface: var(--pv-tinta-2);
--surface-2: var(--pv-tinta-3);
--fg: var(--pv-papel);
--fg-muted: var(--pv-nevoa);
--line: rgb(255 255 255 / 10%);
--line-strong: rgb(255 255 255 / 26%);
--accent-text: var(--pv-sinal);
--ink-gradient: linear-gradient(180deg, #ffffff 35%, #9a9ba1 100%);
--lit-gradient: linear-gradient(95deg, #ffffff 0%, #ffc9a8 40%, #ff5700 100%);
--glass-bg: linear-gradient(160deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 3%));
--glass-line: rgb(255 255 255 / 16%);
--glass-shine: inset 0 1px 0 rgb(255 255 255 / 18%);
--glass-shadow: 0 30px 80px -30px rgb(0 0 0 / 70%);
--shadow-card: 0 1px 0 rgb(255 255 255 / 8%) inset, 0 20px 40px -20px rgb(0 0 0 / 60%);
background: var(--bg);
color: var(--fg);
}
/* Utilitários de material */
.glass { background: var(--glass-bg); border: 1px solid var(--glass-line); box-shadow: var(--glass-shine), var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.lit { background: var(--lit-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Entradas */
[data-reveal] { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-focus] .w { display: inline-block; filter: blur(12px); opacity: .15; transition: filter var(--dur-focus) var(--ease-out), opacity var(--dur-focus) var(--ease-out); }
[data-focus].is-in .w { filter: blur(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
[data-reveal], [data-focus] .w { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}