/* ============================================================================ GRAVIDADE ZERO — Design Tokens (CSS Custom Properties) Fonte da verdade: tokens.json + design-system-gzero.md ---------------------------------------------------------------------------- ARQUITETURA DE DUAS CAMADAS (decisão 2026-07-22): ┌ CAMADA-MESTRA · MARCA — "Nova ID 2026" (time de arte da GZERO) ────────────┐ │ Logo novo, tipografia ABC Whyte, paleta Heartstorm/Black/Sand. │ │ Manda em marca, web, deck, corporativo. É o DEFAULT (:root). │ │ "Para uma era complexa, a simplicidade." │ └───────────────────────────────────────────────────────────────────────────┘ ┌ CAMADA EDITORIAL · UNIVERSO DOS LIVROS (destilado forense) ────────────────┐ │ Rosa Spray, Atkinson/Salted/Tanker, Bobo da Corte, halftone/riso. │ │ É a "quarta camada" que a Nova ID cita como ainda-em-construção. │ │ Opt-in: (Modo A claro / +data-theme=dark │ │ = Modo B neon). Nada aqui foi apagado. │ └───────────────────────────────────────────────────────────────────────────┘ USO RÁPIDO: :root -> Nova ID escuro (default, palco preto) [data-theme="light"] -> Nova ID claro (Sand Trail) [data-layer="editorial"] -> Editorial Modo A (creme/rosa) [data-layer="editorial"][data-theme="dark"] -> Editorial Modo B (neon) ⚠️ Fontes ABC Whyte são TRIAL (Dínamo). OK p/ estudo e protótipo; produção pública exige licença comprada em abcdinamo.com. Sinalize antes de publicar. "com amor & spray rosa" — RENANTE. SOMOS GZERO. ============================================================================ */ /* Fontes ABC Whyte (Nova ID): pegue a pasta fonts/ + fontes-nova-id.css no repo. Aqui os @font-face ficam de fora; use os fallbacks se nao tiver as fontes. */ :root { /* ══════════════════════════════════════════════════════════════════════════ CAMADA-MESTRA · MARCA (Nova ID 2026) ══════════════════════════════════════════════════════════════════════════ */ /* ---------- COR · paleta Nova ID (8 nomeadas + apoio) ---------- */ --gz-black: #000000; /* o espaço — fundo escuro primário */ --gz-sand: #F7F5EB; /* Sand Trail — o papel, fundo claro quente */ --gz-heartstorm: #FF32BB; /* a assinatura magenta da Nova ID */ --gz-jester: #EDFF5C; /* amarelo ácido — energia, o Bobo */ --gz-droplets: #0BFDCA; /* verde-água — dado, sistema, sinal */ --gz-haze: #7D4CFF; /* violeta — só forma/fundo, contraste baixo */ --gz-soulcraft: #742767; /* ameixa média — superfície */ --gz-deepwave: #42173E; /* ameixa profunda — "preto quente" */ --gz-ink: #230C21; /* tinta do lockup Ateliê */ --gz-white: #FFFFFF; /* SÓ card elevado sobre Sand Trail */ /* ---------- TIPOGRAFIA · uma família, ABC Whyte ---------- */ --gz-font-display: "ABC Whyte Inktrap", "ABC Whyte", system-ui, sans-serif; /* títulos ≥24px */ --gz-font-sans: "ABC Whyte", system-ui, -apple-system, sans-serif; /* texto/UI */ --gz-font-mono: "ABC Whyte Mono", ui-monospace, "SF Mono", Menlo, monospace; /* dado/código */ --gz-font-semimono: "ABC Whyte Semi-Mono", "ABC Whyte Mono", ui-monospace, monospace; /* label/eyebrow */ --gz-font-display-mono: "ABC Whyte Inktrap Mono", "ABC Whyte Mono", ui-monospace, monospace; /* código display */ /* ---------- ESCALA Nova ID (corte Inktrap/Whyte ~32px) ---------- */ --gz-fs-hero: clamp(64px, 11vw, 180px); --gz-fs-display: clamp(44px, 6vw, 96px); --gz-fs-h1: clamp(34px, 4vw, 56px); --gz-fs-h2: 32px; --gz-fs-h3: 24px; --gz-fs-h4: 19px; --gz-fs-body-lg: 18px; --gz-fs-body: 16px; --gz-fs-body-sm: 14px; --gz-fs-caption: 12.5px; --gz-fs-eyebrow: 11px; --gz-fs-code: 14px; --gz-lh-hero: 0.95; --gz-lh-tight: 1.05; --gz-lh-snug: 1.15; --gz-lh-normal: 1.4; --gz-lh-body: 1.5; --gz-lh-loose: 1.6; --gz-ls-hero: -0.03em; --gz-ls-display: -0.02em; --gz-ls-title: -0.01em; --gz-ls-normal: 0em; --gz-ls-caption: 0.01em; --gz-ls-eyebrow: 0.16em; /* ---------- FORMA Nova ID · canto reto ---------- */ --gz-radius-0: 0px; /* default da marca */ --gz-radius-1: 4px; /* input, chip */ --gz-radius-2: 8px; /* máximo tolerado */ --gz-radius-pill: 999px; /* ---------- SOMBRA Nova ID · preta, curta, nunca glow ---------- */ --gz-shadow-1: 0 1px 2px rgba(0,0,0,.24); --gz-shadow-2: 0 6px 20px rgba(0,0,0,.32); /* ---------- MOVIMENTO Nova ID · flutuação, não queda ---------- */ --gz-ease-float: cubic-bezier(0.22, 0.61, 0.36, 1); --gz-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --gz-dur-1: 120ms; --gz-dur-2: 200ms; --gz-dur-3: 320ms; --gz-dur-4: 600ms; /* ══════════════════════════════════════════════════════════════════════════ CAMADA EDITORIAL · UNIVERSO DOS LIVROS (sub-camada, destilada dos livros) Tudo abaixo é o sistema original. Preservado integralmente. ══════════════════════════════════════════════════════════════════════════ */ /* ---------- COR · núcleo editorial ---------- */ --gz-rosa-spray: #EC008C; /* cor-assinatura editorial (livros) */ --gz-creme-editorial: #FFF7EF; /* fundo de leitura (Modo A) */ --gz-preto-prensa: #231F20; /* preto quente — nunca #000 no editorial */ --gz-branco-reserva: #FFFFFF; /* palco das ilustrações / knockout */ --gz-roxo-realce: #9643FC; /* grifo marca-texto + stickers */ --gz-teal-marginalia: #00AAB3; /* voz manuscrita da margem + setas */ --gz-rosa-blush: #EF5BA1; /* acento raro / bochecha */ --gz-rosa-nevoa: #FCDFEB; /* fundo suave / halftone claríssimo */ --gz-roxo-grifo-1: #C9A6F5; --gz-roxo-grifo-2: #D9C6F2; --gz-grifo-highlight: rgba(150, 67, 252, 0.28); /* ---------- COR · rampas derivadas (OKLCH) p/ ESTADOS de UI ---------- */ --gz-rosa-100:#FFDAF5; --gz-rosa-200:#FFB6E3; --gz-rosa-300:#FF8ACA; --gz-rosa-400:#FF53AC; --gz-rosa-500:#EC008C; --gz-rosa-600:#CB0073; --gz-rosa-700:#A8005B; --gz-rosa-800:#830045; --gz-rosa-900:#5B002D; --gz-rosa-1000:#390019; --gz-teal-100:#DFFFFF; --gz-teal-200:#BFFEFF; --gz-teal-300:#8FE8EE; --gz-teal-400:#55CAD2; --gz-teal-500:#00AAB3; --gz-teal-600:#008F98; --gz-teal-700:#00767E; --gz-teal-800:#005C63; --gz-teal-900:#004146; --gz-teal-1000:#002B2E; --gz-roxo-100:#F1DDFF; --gz-roxo-200:#E2C1FF; --gz-roxo-300:#CE9CFF; --gz-roxo-400:#B370FF; --gz-roxo-500:#9643FC; --gz-roxo-600:#7D21DC; --gz-roxo-700:#6400B7; --gz-roxo-800:#4C008F; --gz-roxo-900:#310062; --gz-roxo-1000:#1B003D; --gz-neutral-100:#FFF7EF; --gz-neutral-200:#E4DCD5; --gz-neutral-300:#C9C1BC; --gz-neutral-400:#AEA8A3; --gz-neutral-500:#958F8B; --gz-neutral-600:#7C7674; --gz-neutral-700:#645F5D; --gz-neutral-800:#4D4848; --gz-neutral-900:#383333; --gz-neutral-1000:#231F20; /* ---------- COR · Modo Neon Escuro (palco editorial) ---------- */ --gz-preto-palco: #080808; --gz-rosa-neon: #E838A8; --gz-lima-acida: #A8C838; --gz-menta-fantasma: #68F8A8; --gz-indigo-noite: #483868; --gz-brasa: #E84838; --gz-poeira-estrela: #F8F8A8; /* ---------- COR · tintas de ilustração (riso — estimadas, só pranchas) ---------- */ --gz-amarelo-processo: #FFE500; --gz-vermelho-overprint:#F23A1E; --gz-laranja-riso: #F7941E; --gz-ciano-respingo: #00AEEF; --gz-azul-fantasma: #6E7FC4; /* ---------- COR · subsistema PRODUTO (Humanware/Direito — Renan, valores REAIS) ---------- */ --gz-prod-oliva-100:#DBDFCD; --gz-prod-oliva-200:#B7BF9A; --gz-prod-oliva-300:#98A75F; --gz-prod-oliva-400:#707E35; --gz-prod-oliva-500:#4C5E03; --gz-prod-oliva-600:#3E4C02; --gz-prod-oliva-700:#2E3A02; --gz-prod-oliva-800:#202802; --gz-prod-oliva-900:#111602; --gz-prod-oliva-1000:#0B0D01; --gz-prod-lima-100:#F7FBEB; --gz-prod-lima-200:#F0F7D7; --gz-prod-lima-300:#E8F4C3; --gz-prod-lima-400:#E1F0AF; --gz-prod-lima-500:#D9EC9B; --gz-prod-lima-600:#B8C97E; --gz-prod-lima-700:#95A662; --gz-prod-lima-800:#748145; --gz-prod-lima-900:#515E29; --gz-prod-lima-950:#303B0C; --gz-prod-lima-1000:#202410; --gz-prod-neutral-100:#FDFCFB; --gz-prod-neutral-200:#FAF8F5; --gz-prod-neutral-300:#F8F5F2; --gz-prod-neutral-400:#F5F3EF; --gz-prod-neutral-500:#F3F0EC; --gz-prod-neutral-550:#E3E1DC; --gz-prod-neutral-600:#D3D0CC; --gz-prod-neutral-700:#B2AFAB; --gz-prod-neutral-800:#918F8B; --gz-prod-neutral-850:#706E6B; --gz-prod-neutral-900:#4F4E4B; --gz-prod-neutral-950:#2E2D2B; --gz-prod-neutral-1000:#0C0C0C; --gz-prod-erro-100:#FFC1C1; --gz-prod-erro-200:#FFADAD; --gz-prod-erro-300:#FF9999; --gz-prod-erro-400:#FF8686; --gz-prod-erro-500:#FD7474; --gz-prod-erro-600:#FA6262; --gz-prod-erro-700:#D44646; --gz-prod-erro-800:#AA2F2F; --gz-prod-erro-900:#7F1D1D; --gz-prod-erro-1000:#540F0F; --gz-prod-text-hero:var(--gz-prod-oliva-500); --gz-prod-text-title:var(--gz-prod-oliva-600); --gz-prod-text-body:var(--gz-prod-oliva-900); --gz-prod-text-caption:var(--gz-prod-neutral-900); --gz-prod-text-primary:var(--gz-prod-oliva-400); --gz-prod-text-on-primary:var(--gz-prod-lima-500); --gz-prod-text-on-surface:var(--gz-prod-lima-100); --gz-prod-text-error:var(--gz-prod-erro-600); --gz-prod-text-disabled:var(--gz-prod-neutral-800); --gz-prod-surface:var(--gz-prod-neutral-200); --gz-prod-surface-hover:var(--gz-prod-neutral-300); --gz-prod-surface-primary:var(--gz-prod-oliva-600); --gz-prod-surface-primary-hover:var(--gz-prod-oliva-700); --gz-prod-border:var(--gz-prod-neutral-300); --gz-prod-border-hover:var(--gz-prod-neutral-400); --gz-prod-border-primary:var(--gz-prod-oliva-500); --gz-prod-border-primary-hover:var(--gz-prod-oliva-600); --gz-oliva-humanware:var(--gz-prod-oliva-500); --gz-creme-produto:var(--gz-prod-neutral-200); --gz-grafite-rotulo:var(--gz-prod-neutral-950); --gz-cinza-morno:var(--gz-prod-neutral-800); --gz-borda-clara:var(--gz-prod-neutral-550); --gz-prod-font-serif: "Crimson Text", Georgia, serif; --gz-prod-font-sans: "DM Sans", system-ui, sans-serif; --gz-prod-h1-size:76px; --gz-prod-h1-tracking:-3px; --gz-prod-h2-size:52px; --gz-prod-h2-tracking:-3px; --gz-prod-h3-size:40px; --gz-prod-h3-tracking:-2px; --gz-prod-h4-size:32px; --gz-prod-h4-tracking:-2px; --gz-prod-h5-size:28px; --gz-prod-h5-tracking:-1.5px; --gz-prod-h6-size:24px; --gz-prod-h6-tracking:-1px; --gz-prod-body-xl:20px; --gz-prod-body-l:18px; --gz-prod-body-m:16px; --gz-prod-body-s:14px; --gz-prod-caption:16px; --gz-prod-label:14px; --gz-prod-eyebrow-l:14px; --gz-prod-eyebrow-s:12px; /* ---------- TIPOGRAFIA editorial (8 vozes) ---------- */ --gz-font-corpo: "Atkinson Hyperlegible", system-ui, sans-serif; /* corpo — nunca degradar */ --gz-font-condensada: "Tanker", "Anton", Impact, sans-serif; /* condensada pesada (era --gz-font-display) */ --gz-font-lettering: "Salted", "Bradley Hand", cursive; /* voz humana / Bobo */ --gz-font-carved: "AW Conqueror Std Carved", "Tanker", serif; /* wordmark carved editorial */ --gz-font-slab: "Hepta Slab", Rockwell, serif; /* slab de detalhe */ --gz-font-vhs: "Home Video", "VT323", monospace; /* VHS retrô */ --gz-font-poster: "ADAM.CG Pro", "Tanker", sans-serif; /* display alternativa */ --gz-font-codigo: "Menlo", "Courier New", "JetBrains Mono", monospace; /* voz de máquina */ /* ---------- PESOS ---------- */ --gz-weight-extralight: 200; --gz-weight-regular: 400; --gz-weight-bold: 700; --gz-weight-black: 900; /* ---------- ESCALA editorial (modular ~1.25, base 18px sugerido) ---------- */ --gz-size-caption: 0.8rem; --gz-size-body: 1rem; --gz-size-h3: 1.25rem; --gz-size-h2: 1.563rem; --gz-size-h1: 1.953rem; --gz-size-display: 2.441rem; --gz-size-hero: 3.052rem; --gz-size-wordmark: 3.815rem; --gz-leading-corpo: 1.5; --gz-leading-titulo: 1.1; --gz-leading-lettering: 1.25; --gz-tracking-kicker: 0.12em; --gz-tracking-normal: 0em; --gz-measure: 48ch; /* ---------- ESPAÇAMENTO (base-8) · comum às duas camadas ---------- */ --gz-space-3xs: 2px; --gz-space-2xs: 4px; --gz-space-xs: 8px; --gz-space-sm: 12px; --gz-space-md: 16px; --gz-space-lg: 24px; --gz-space-xl: 32px; --gz-space-2xl: 48px; --gz-space-3xl: 64px; --gz-space-4xl: 96px; --gz-space-5xl: 128px; /* ---------- RAIO / SOMBRA / GLOW editoriais ---------- */ --gz-radius-none: 0; --gz-radius-sticker: 20px; --gz-shadow-sticker: 0 6px 18px rgba(35, 31, 32, 0.18); --gz-glow-neon: 0 0 12px rgba(232, 56, 168, 0.75), 0 0 28px rgba(232, 56, 168, 0.45); /* ══════════════════════════════════════════════════════════════════════════ TOKENS SEMÂNTICOS — default = NOVA ID ESCURO (camada-mestra) Use SEMPRE estes nos componentes; trocam de camada/tema sozinhos. ══════════════════════════════════════════════════════════════════════════ */ --gz-bg: var(--gz-black); --gz-surface: var(--gz-deepwave); --gz-surface-2: var(--gz-soulcraft); --gz-fg: var(--gz-sand); --gz-fg-2: color-mix(in srgb, var(--gz-sand) 70%, transparent); --gz-fg-3: color-mix(in srgb, var(--gz-sand) 45%, transparent); --gz-accent: var(--gz-heartstorm); --gz-on-accent: var(--gz-black); --gz-line: color-mix(in srgb, currentColor 14%, transparent); --gz-line-strong:color-mix(in srgb, currentColor 32%, transparent); --gz-border: var(--gz-line); --gz-focus: var(--gz-heartstorm); --gz-shadow: var(--gz-shadow-2); --gz-glow: none; /* fontes semânticas (viram Atkinson/Salted na camada editorial) */ --gz-font-ui: var(--gz-font-sans); --gz-font-title: var(--gz-font-display); /* forma semântica (vira pill/sticker na camada editorial) */ --gz-radius-btn: var(--gz-radius-0); --gz-radius-card: var(--gz-radius-0); } /* ── Nova ID · tema CLARO (Sand Trail) ─────────────────────────────────────── */ :root[data-theme="light"]:not([data-layer="editorial"]) { --gz-bg: var(--gz-sand); --gz-surface: var(--gz-white); --gz-surface-2: var(--gz-white); --gz-fg: var(--gz-black); --gz-fg-2: color-mix(in srgb, var(--gz-black) 70%, transparent); --gz-fg-3: color-mix(in srgb, var(--gz-black) 45%, transparent); --gz-accent: var(--gz-heartstorm); --gz-on-accent: var(--gz-black); --gz-focus: var(--gz-black); /* Heartstorm sobre Sand reprova (2.99) → foco preto */ --gz-shadow: var(--gz-shadow-1); color-scheme: light; } /* ══════════════════════════════════════════════════════════════════════════ CAMADA EDITORIAL — opt-in via [data-layer="editorial"] Remapeia SÓ os semânticos para o universo dos livros. A base é a mesma. ══════════════════════════════════════════════════════════════════════════ */ /* Modo A — Editorial Claro ("a página") */ [data-layer="editorial"] { --gz-bg: var(--gz-creme-editorial); --gz-surface: var(--gz-branco-reserva); --gz-surface-2: var(--gz-branco-reserva); --gz-fg: var(--gz-preto-prensa); --gz-fg-2: #5A5352; --gz-fg-3: var(--gz-neutral-700); --gz-accent: var(--gz-rosa-spray); --gz-on-accent: var(--gz-creme-editorial); --gz-border: rgba(35, 31, 32, 0.14); --gz-focus: var(--gz-rosa-400); --gz-shadow: var(--gz-shadow-sticker); --gz-glow: none; --gz-font-ui: var(--gz-font-corpo); /* Atkinson */ --gz-font-title: var(--gz-font-lettering); /* Salted */ --gz-radius-btn: var(--gz-radius-pill); --gz-radius-card: var(--gz-radius-sticker); color-scheme: light; } /* Modo B — Editorial Neon Escuro ("o palco") */ [data-layer="editorial"][data-theme="dark"] { --gz-bg: var(--gz-preto-palco); --gz-surface: var(--gz-preto-prensa); --gz-surface-2: var(--gz-preto-prensa); --gz-fg: var(--gz-branco-reserva); --gz-fg-2: #B9B2B4; --gz-fg-3: var(--gz-neutral-400); --gz-accent: var(--gz-rosa-spray); --gz-on-accent: var(--gz-branco-reserva); --gz-border: rgba(255, 255, 255, 0.16); --gz-shadow: none; --gz-glow: var(--gz-glow-neon); color-scheme: dark; } /* ============================================================================ BASE ============================================================================ */ html { color-scheme: dark; } body { margin: 0; background: var(--gz-bg); color: var(--gz-fg); font-family: var(--gz-font-ui); font-size: var(--gz-fs-body); line-height: var(--gz-lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--gz-accent); color: var(--gz-on-accent); } :focus-visible { outline: 2px solid var(--gz-focus); outline-offset: 2px; } /* ============================================================================ HELPERS · NOVA ID (default) ============================================================================ */ .gz-hero, .gz-display, .gz-h1 { font-family: var(--gz-font-display); color: var(--gz-fg); margin: 0; } .gz-hero { font-size: var(--gz-fs-hero); font-weight: 500; line-height: var(--gz-lh-hero); letter-spacing: var(--gz-ls-hero); } .gz-display { font-size: var(--gz-fs-display); font-weight: 400; line-height: var(--gz-lh-tight); letter-spacing: var(--gz-ls-display); } .gz-h1 { font-size: var(--gz-fs-h1); font-weight: 500; line-height: var(--gz-lh-tight); letter-spacing: var(--gz-ls-title); } .gz-h2, .gz-h3, .gz-h4 { font-family: var(--gz-font-sans); font-weight: 500; color: var(--gz-fg); line-height: var(--gz-lh-snug); letter-spacing: var(--gz-ls-title); margin: 0; } .gz-h2 { font-size: var(--gz-fs-h2); } .gz-h3 { font-size: var(--gz-fs-h3); } .gz-h4 { font-size: var(--gz-fs-h4); letter-spacing: var(--gz-ls-normal); } .gz-lead { font-family: var(--gz-font-sans); font-size: var(--gz-fs-body-lg); line-height: var(--gz-lh-body); color: var(--gz-fg-2); max-width: 62ch; } .gz-body { font-family: var(--gz-font-sans); font-size: var(--gz-fs-body); line-height: var(--gz-lh-body); color: var(--gz-fg-2); max-width: 68ch; } .gz-body-sm { font-family: var(--gz-font-sans); font-size: var(--gz-fs-body-sm); line-height: var(--gz-lh-loose); color: var(--gz-fg-2); } .gz-caption { font-family: var(--gz-font-sans); font-size: var(--gz-fs-caption); line-height: var(--gz-lh-normal); color: var(--gz-fg-3); letter-spacing: var(--gz-ls-caption); } .gz-eyebrow { font-family: var(--gz-font-semimono); font-size: var(--gz-fs-eyebrow); font-weight: 500; letter-spacing: var(--gz-ls-eyebrow); text-transform: uppercase; color: var(--gz-fg-3); } .gz-mono { font-family: var(--gz-font-mono); font-size: var(--gz-fs-code); } .gz-number { font-family: var(--gz-font-display); font-size: var(--gz-fs-hero); font-weight: 700; line-height: var(--gz-lh-hero); letter-spacing: var(--gz-ls-hero); font-variant-numeric: tabular-nums; } .gz-accent { color: var(--gz-accent); } .gz-section-mark { font-family: var(--gz-font-sans); font-size: var(--gz-fs-body-sm); font-weight: 400; color: var(--gz-fg-3); } .gz-section-mark strong { font-weight: 500; color: var(--gz-fg); } .gz-tag { display: inline-block; font-family: var(--gz-font-semimono); font-size: var(--gz-fs-eyebrow); font-weight: 500; letter-spacing: var(--gz-ls-eyebrow); text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--gz-line-strong); border-radius: var(--gz-radius-pill); color: var(--gz-fg-2); } .gz-rule { border: 0; border-top: 1px solid var(--gz-line); margin: var(--gz-space-xl) 0; } @keyframes gz-float-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .gz-float-in { animation: gz-float-in var(--gz-dur-4) var(--gz-ease-float) both; } /* ============================================================================ HELPERS · COMPONENTES ADAPTÁVEIS (usam semânticos → servem às DUAS camadas) ============================================================================ */ .gz-page { background: var(--gz-bg); color: var(--gz-fg); font-family: var(--gz-font-ui); font-size: var(--gz-fs-body); line-height: var(--gz-lh-body); } .gz-btn { display: inline-flex; align-items: center; gap: var(--gz-space-xs); font-family: var(--gz-font-ui); font-size: var(--gz-fs-body-sm); font-weight: 500; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--gz-radius-btn); background: var(--gz-accent); color: var(--gz-on-accent); cursor: pointer; text-decoration: none; transition: background-color var(--gz-dur-2) var(--gz-ease-float), color var(--gz-dur-2) var(--gz-ease-float), border-color var(--gz-dur-2) var(--gz-ease-float); } .gz-btn:hover { background: var(--gz-jester); color: var(--gz-black); } [data-layer="editorial"] .gz-btn:hover { background: var(--gz-rosa-600); color: var(--gz-on-accent); } .gz-btn:focus-visible { outline: 2px solid var(--gz-focus); outline-offset: 2px; } .gz-btn-ghost { background: transparent; color: var(--gz-fg); border-color: var(--gz-line-strong); border-radius: var(--gz-radius-btn); } .gz-btn-ghost:hover { background: var(--gz-fg); color: var(--gz-bg); border-color: var(--gz-fg); } .gz-card { background: var(--gz-surface); border-radius: var(--gz-radius-card); padding: var(--gz-space-lg); box-shadow: var(--gz-shadow); } [data-theme="light"]:not([data-layer="editorial"]) .gz-card { border: 1px solid var(--gz-line); } /* ============================================================================ HELPERS · EDITORIAL (livros) — nomes próprios, sem colisão. Use dentro de [data-layer="editorial"] para o contexto de cor correto. ============================================================================ */ .gz-corpo { font-family: var(--gz-font-corpo); font-size: var(--gz-size-body); line-height: var(--gz-leading-corpo); max-width: var(--gz-measure); text-align: left; text-wrap: pretty; color: var(--gz-fg); } .gz-titulo { font-family: var(--gz-font-lettering); font-size: var(--gz-size-h1); line-height: var(--gz-leading-lettering); color: var(--gz-accent); text-transform: uppercase; } .gz-secao { font-family: var(--gz-font-condensada); font-size: var(--gz-size-h2); line-height: var(--gz-leading-titulo); letter-spacing: var(--gz-tracking-kicker); text-transform: uppercase; color: var(--gz-fg); } .gz-kicker { font-family: var(--gz-font-slab); font-weight: var(--gz-weight-extralight); font-size: var(--gz-size-h3); letter-spacing: var(--gz-tracking-kicker); text-transform: uppercase; color: var(--gz-fg); } .gz-wordmark { font-family: var(--gz-font-carved); font-size: var(--gz-size-wordmark); line-height: var(--gz-leading-titulo); color: var(--gz-accent); text-shadow: var(--gz-glow); } .gz-grifo { background: var(--gz-grifo-highlight); padding: 0 0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .gz-marginalia { font-family: var(--gz-font-lettering); font-size: var(--gz-size-caption); line-height: var(--gz-leading-lettering); color: var(--gz-teal-marginalia); writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; } [data-layer="editorial"][data-theme="dark"] .gz-marginalia { color: var(--gz-menta-fantasma); } .gz-codigo { font-family: var(--gz-font-codigo); font-size: var(--gz-size-body); color: var(--gz-teal-marginalia); } .gz-sticker { border-radius: var(--gz-radius-sticker); background: var(--gz-surface); box-shadow: var(--gz-shadow); } .gz-campo-rosa { background: var(--gz-rosa-spray); color: var(--gz-branco-reserva); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }