/* Funnel Labs — camada de tema (claro/escuro) e escalas do sistema. Carrega logo depois de design-system/theme.css, que é cópia literal do DS e não pode ser editado: tudo que precisa divergir do CRM é sobrescrito aqui. Só tokens. Componente nenhum é estilizado neste arquivo — a composição continua em base.css, funnel.css e nos CSS de página. A resolução de tema no primeiro paint é do script anti-FOUC do (define data-theme antes de qualquer CSS). Sem atributo, o produto é escuro. */ /* --------------------------------------------------------------- 1. Escalas independentes de tema --------------------------------------------------------------- */ :root { /* Espaçamento base 4 — substitui os 44/46/40/34/26 avulsos */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* Dois raios, e só dois (mais o pill) */ --radius-surface: 14px; /* card, painel, modal, banner, player */ --radius-control: 9px; /* botão, campo, chip, badge retangular */ --radius-pill: 999px; /* Tipografia: papéis, não tamanhos soltos. Playfair só >= 28px. */ --t-display: clamp(34px, 4.6vw, 60px); --t-h1: clamp(30px, 3.2vw, 44px); --t-h2: 28px; --t-section: 19px; --t-card: 15px; --t-body: 15.5px; --t-body-sm: 13.5px; --t-label: 11px; --t-data: 12.5px; --t-num: clamp(28px, 2.6vw, 38px); --track-label: 0.14em; /* Texto sobre arte continua claro nos dois temas — é o que faz a capa parecer cinema em vez de banner. Única exceção à inversão. */ --on-art: #FDFDFD; --on-art-dim: rgba(253, 253, 253, 0.78); --on-art-chip: rgba(8, 6, 4, 0.62); /* Movimento: um easing de assinatura para o produto inteiro */ --ease: cubic-bezier(.16, 1, .3, 1); --dur-micro: 140ms; --dur-control: 200ms; --dur-reveal: 520ms; --dur-panel: 260ms; } /* --------------------------------------------------------------- 2. Tema escuro (padrão) --------------------------------------------------------------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --surface-0: #050505; --surface-1: #0A0A0A; --surface-2: #0C0C0C; --surface-3: #141414; --surface-4: #1A1A1A; --surface-5: #222222; --card-gradient: linear-gradient(180deg, #101010, #0C0C0C); --sidebar-bg: linear-gradient(180deg, rgba(16,16,16,.95), rgba(9,9,9,.97)); --topbar-bg: rgba(11,11,11,.60); --topbar-solid: #0B0B0B; --bottom-nav-bg: rgba(10,10,10,.92); --bottom-nav-solid: #0A0A0A; --glass-bg: rgba(10,10,10,.85); --overlay-bg: radial-gradient(800px 500px at 50% 30%, rgba(255,90,0,.04), transparent 70%), rgba(0,0,0,.72); --scrim: rgba(0,0,0,.65); --ink-1: #FDFDFD; --ink-2: rgba(253,253,253,.82); --ink-3: rgba(253,253,253,.55); --ink-4: rgba(253,253,253,.48); /* piso de texto legível — era .40 (3,5:1) */ --ink-5: rgba(253,253,253,.30); /* só elemento não textual */ --ink-6: rgba(253,253,253,.26); /* só elemento não textual */ --accent: #FF5A00; --accent-text: #FF7A2E; /* laranja de TEXTO, separado do de superfície */ --accent-hover: #FF8C40; --accent-press: #F04E00; --accent-deep: #CC4800; --accent-soft: rgba(255,90,0,.14); --accent-quiet: rgba(255,90,0,.08); --accent-ink: #0E0E0E; --btn-primary-gradient: linear-gradient(180deg, #FF8C40 0%, #FF5A00 45%, #F04E00 100%); --shadow-btn-primary: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 24px -10px rgba(255,90,0,.55); --shadow-btn-primary-hover: 0 1px 0 rgba(255,255,255,.32) inset, 0 12px 30px -10px rgba(255,90,0,.70); --hair-1: rgba(253,253,253,.06); --hair-2: rgba(253,253,253,.09); --hair-3: rgba(253,253,253,.14); --hair-4: rgba(253,253,253,.22); --hair-accent: rgba(255,90,0,.28); --hair-accent-strong: rgba(255,90,0,.42); --grid-dot-color: rgba(253,253,253,.05); /* Estados: a gramática é forma + laranja. Verde e vermelho só com semântica. */ --state-done: #6FBF8B; --state-done-soft: rgba(111,191,139,.12); --state-warn: #E0A33C; --state-warn-soft: rgba(224,163,60,.12); --state-danger: #E5484D; --state-danger-soft: rgba(229,72,77,.12); /* Legados do DS remapeados: mata o verde/azul/amarelo decorativo na origem */ --ok: var(--state-done); --ok-soft: var(--state-done-soft); --warn: var(--state-warn); --warn-soft: var(--state-warn-soft); --danger: var(--state-danger); --danger-soft: var(--state-danger-soft); --info: var(--ink-3); --info-soft: rgba(253,253,253,.06); --scrollbar-thumb: #2A2A2A; --skeleton-base: #121212; --skeleton-shine: rgba(255,255,255,.06); --player-chrome: rgba(6,6,6,.82); --art-scrim: linear-gradient(90deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.70) 42%, rgba(5,5,5,.12) 100%); --art-scrim-v: linear-gradient(180deg, rgba(5,5,5,.25) 0%, rgba(5,5,5,.90) 62%); --art-inset: inset 0 0 0 1px rgba(255,255,255,.08); --focus-inner: #050505; --focus-outer: #FF8C40; /* Elevação: contato curto + ambiente largo. Sombra preta sobre preto não existe. */ --elev-1: 0 1px 0 rgba(255,255,255,.045) inset, 0 0 0 1px var(--hair-2); --elev-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 1px var(--hair-2), 0 2px 4px rgba(0,0,0,.6), 0 14px 32px -12px rgba(0,0,0,.85); --elev-3: 0 1px 0 rgba(255,255,255,.07) inset, 0 0 0 1px var(--hair-3), 0 4px 8px rgba(0,0,0,.65), 0 28px 60px -18px rgba(0,0,0,.9); --elev-float: var(--elev-3); --elev-accent: 0 0 0 1px rgba(255,90,0,.28), 0 10px 30px -12px rgba(255,90,0,.42); --shadow-1: var(--elev-1); --shadow-2: var(--elev-3); --shadow-float: var(--elev-3); --glow-accent: 0 0 18px -6px rgba(255,90,0,.6); } /* --------------------------------------------------------------- 3. Tema claro — papel de estúdio, quente e seco. Não é o escuro invertido. --------------------------------------------------------------- */ :root[data-theme="light"], :root.theme-light { color-scheme: light; --surface-0: #FAFAF8; --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F1EFEA; --surface-4: #E7E3DB; --surface-5: #DAD4C9; --card-gradient: linear-gradient(180deg, #FFFFFF, #FBF9F5); --sidebar-bg: linear-gradient(180deg, #FFFFFF, #FBF9F5); --topbar-bg: rgba(250,250,248,.78); --topbar-solid: #FAFAF8; --bottom-nav-bg: rgba(250,250,248,.94); --bottom-nav-solid: #FAFAF8; --glass-bg: rgba(255,255,255,.88); --overlay-bg: radial-gradient(800px 500px at 50% 30%, rgba(230,78,0,.06), transparent 70%), rgba(38,28,20,.42); --scrim: rgba(38,28,20,.38); /* Alfas medidos contra o fundo real de cada uso: ink-4 e o piso de texto legivel (>= 4.5:1 ate sobre surface-3). */ --ink-1: #0E1116; --ink-2: rgba(14,17,22,.84); --ink-3: rgba(14,17,22,.70); --ink-4: rgba(14,17,22,.62); --ink-5: rgba(14,17,22,.34); --ink-6: rgba(14,17,22,.28); --accent: #E64E00; --accent-text: #B23C00; /* laranja de texto: 5,18:1 sobre surface-3 */ --accent-hover: #FF6A1A; --accent-press: #C74200; --accent-deep: #A83A00; --accent-soft: rgba(230,78,0,.10); --accent-quiet: rgba(230,78,0,.06); --accent-ink: #1B0F06; /* Parada de baixo clareada: o texto do botao cai sobre ela e precisa de 4,5:1. */ --btn-primary-gradient: linear-gradient(180deg, #FF7A2E 0%, #EC5200 46%, #E04B00 100%); --shadow-btn-primary: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 20px -10px rgba(198,66,0,.45); --shadow-btn-primary-hover: 0 1px 0 rgba(255,255,255,.42) inset, 0 12px 26px -10px rgba(198,66,0,.55); --hair-1: rgba(30,22,16,.07); --hair-2: rgba(30,22,16,.11); --hair-3: rgba(30,22,16,.16); --hair-4: rgba(30,22,16,.26); --hair-accent: rgba(230,78,0,.32); --hair-accent-strong: rgba(230,78,0,.48); --grid-dot-color: rgba(30,22,16,.07); /* verde e âmbar escurecidos até 5,58:1 e 5,15:1 sobre a superfície elevada do tema claro — o marcador de etapa concluída carrega informação. */ --state-done: #276B44; --state-done-soft: rgba(39,107,68,.10); --state-warn: #8A5A0E; --state-warn-soft: rgba(138,90,14,.10); --state-danger: #C02A2F; --state-danger-soft: rgba(192,42,47,.09); --info: var(--ink-3); --info-soft: rgba(30,22,16,.06); --scrollbar-thumb: #C9C3B8; --skeleton-base: #EDEAE4; --skeleton-shine: rgba(255,255,255,.85); /* O player e a arte de capa continuam escuros no claro: vídeo em caixa branca é o erro clássico. A arte não inverte — ela ganha moldura. */ --player-chrome: rgba(18,14,10,.78); --art-scrim: linear-gradient(90deg, rgba(20,14,9,.92) 0%, rgba(20,14,9,.74) 42%, rgba(20,14,9,.14) 100%); --art-scrim-v: linear-gradient(180deg, rgba(20,14,9,.30) 0%, rgba(20,14,9,.92) 64%); --art-inset: inset 0 0 0 1px rgba(255,255,255,.14); --focus-inner: #FAFAF8; --focus-outer: #B23C00; --elev-1: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px var(--hair-2); --elev-2: 0 0 0 1px var(--hair-2), 0 1px 2px rgba(64,44,28,.08), 0 12px 28px -14px rgba(64,44,28,.22); --elev-3: 0 0 0 1px var(--hair-3), 0 2px 6px rgba(64,44,28,.10), 0 26px 56px -20px rgba(64,44,28,.28); --elev-float: var(--elev-3); --elev-accent: 0 0 0 1px rgba(230,78,0,.30), 0 10px 26px -12px rgba(230,78,0,.30); --shadow-1: var(--elev-1); --shadow-2: var(--elev-3); --shadow-float: var(--elev-3); --glow-accent: 0 0 16px -6px rgba(230,78,0,.35); } /* --------------------------------------------------------------- 4. Troca de tema — transição curta só nas superfícies grandes. .theme-switching é posto pelo JS nos primeiros milissegundos da troca para não animar 400 elementos de uma vez. --------------------------------------------------------------- */ body, .site-header, .card, .mobile-nav { transition: background-color 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease); } .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { body, .site-header, .card, .mobile-nav { transition: none; } }