/* ========================================================================== NexArt PLAYER — Design Tokens do site Fonte única de cor, tipografia, espaçamento, raio e movimento. ⚠️ FONTE DA VERDADE DA PALETA: `apps/tv/nexart-tokens.css`, no repositório do app (IO-Z). Ao mudar cor de marca, mude lá primeiro e reflita aqui. O app da TV é dark-only (e a marca é grafite quente + vermelho), portanto este site também é dark-only — **não existe bloco [data-theme="light"]**. Um tema claro obrigaria a uma segunda versão do logo, um segundo vermelho e um segundo par de contrastes, e nenhum deles é a marca. Três regras vêm do app e valem aqui: 1. Cinza QUENTE (puxado para o vermelho), nunca preto puro. 2. PROIBIDO branco puro (#fff). O off-white #f0f0f2 é o teto. 3. O vermelho é MARCA e ESTADO ATUAL. O que guia o olho (botão principal) é CLARO — medido no app: sobre pôster avermelhado o vermelho cai para 1,94:1 e o off-white fica em 8,16:1. Contraste verificado contra o fundo #1a1719 (WCAG 2.1): #f0f0f2 15,6:1 · rgba(240,240,242,.72) 8,6:1 · #ff2e36 4,8:1 — todos AA. ========================================================================== */ :root { color-scheme: dark; /* ---- Color · Surfaces ------------------------------------------------ */ --color-bg: #1a1719; /* chão da página — grafite quente */ --color-surface: #221e20; /* cartões — nx-bg-mid */ --color-surface-2: #2b2629; /* inputs, hover — nx-bg-raised */ --color-surface-hover: #2b2629; --color-surface-3: #2e2529; /* hover forte — nx-bg-top */ --color-border: #2e2529; --color-border-strong: #3a3136; --color-hairline: rgba(240, 240, 242, 0.08); /* Nav: vidro sobre o grafite */ --color-nav-glass: rgba(26, 23, 25, 0.78); --color-nav-glass-solid: rgba(26, 23, 25, 0.92); --color-nav-border: rgba(240, 240, 242, 0.06); --color-menu-bg: #221e20; /* dropdowns — opaco para legibilidade */ --color-tile-hover: rgba(240, 240, 242, 0.04); /* Gradiente de fundo: o grafite escurece de cima para baixo, sem chegar a preto puro — a regra 1 da marca vale até no fim da página. */ --gradient-page: linear-gradient(180deg, #1a1719 0%, #151214 60%, #100e0f 100%); /* ---- Color · Text ---------------------------------------------------- */ --color-text-primary: #f0f0f2; /* off-white macio — NUNCA #fff */ --color-text-secondary: rgba(240, 240, 242, 0.72); --color-text-tertiary: rgba(240, 240, 242, 0.46); /* ---- Color · Accent -------------------------------------------------- */ /* `accent` é o vermelho que aparece em TEXTO (eyebrow, link): o tom claro da marca, que passa AA sobre o grafite (4,8:1). O #e50914 puro dá 3,7:1 e reprova em texto — ele é para PREENCHIMENTO. */ --color-accent: #ff2e36; /* marca, em texto (4,8:1) */ --color-accent-bright: #ff5a60; /* hover */ --color-accent-pressed: #e50914; /* vermelho NexArt, pressionado */ /* NÃO existe token de "CTA vermelho". Botão de ação neste site é a pílula CLARA (ver Inverse abaixo) — vermelho em botão grande é alarme, não convite, e com texto off-white daria 4,19:1 (reprova AA em 14px). */ /* Gradiente de marca (a fita do "N" do logo) — usar com parcimônia */ --gradient-ribbon: linear-gradient(135deg, #ff2e36 0%, #b3070f 100%); /* Vermelho de ESTADO ATUAL (a lista em uso), não de ação. Os dois nasceram usados e nunca definidos: `--color-accent-edge` na borda do cartão em uso e `--color-accent-deep` no fundo do selo — sem eles a declaração inteira era inválida e a marca de "em uso" simplesmente não aparecia. Ambos são o vermelho da marca rebaixado, para dizer estado sem virar neon (regra 3). */ --color-accent-edge: rgba(255, 46, 54, 0.42); --color-accent-deep: rgba(229, 9, 20, 0.16); /* Perigo: só o passo de CONFIRMAR uma remoção usa isto. Em repouso o botão é neutro — vermelho permanente vira ruído e para de significar perigo. */ --color-danger-edge: rgba(255, 46, 54, 0.55); --color-danger-wash: rgba(229, 9, 20, 0.14); /* ---- Color · Status -------------------------------------------------- */ --color-success: #4fc978; --color-warning: #e8b33a; /* o dourado da estrela do app */ --color-error: #ff2e36; /* ---- Color · Inverse ------------------------------------------------- CTA primário: pílula CLARA com texto grafite. Não é escolha de estilo — é a mesma gramática do app, onde o claro é o que diz "o cursor está aqui" e o vermelho é marca. Bônus: 13:1, contra 4,19:1 de um botão vermelho com texto off-white. */ --color-fill-inverse: #e6ddde; /* é o --nx-focus do app */ --color-fill-inverse-hover: #f0f0f2; --color-text-inverse: #1a1719; /* ---- Elevation -------------------------------------------------------- Preservado como estava no site: superfícies flat + hairline, sem sombra colorida. Os assets de screenshot já trazem os próprios cantos, então no dark o drop-shadow fica transparente (o token existe para o caso de virem assets sem sombra embutida). */ --shadow-nav: 0 8px 32px rgba(0, 0, 0, 0.45); --shadow-media: drop-shadow(0 22px 40px rgba(0, 0, 0, 0)); /* ---- Typography ------------------------------------------------------ Instrument Sans nos títulos + Inter no corpo — exatamente o par que o app da TV carrega do próprio pacote (IO-Z: `apps/tv/fontes/`, decisão B49). Auto-hospedadas em assets/fonts/ (ver css/fonts.css), com a stack do sistema como fallback. Só a FAMÍLIA veio do app. Escala tipográfica, pesos, tracking, raios, espaçamento e motion são os do site — não alinhar ao app, que é feito para ler a três metros. */ --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: "Instrument Sans Variable", var(--font-system); --font-body: "Inter Variable", var(--font-system); --font-stack: var(--font-body); /* alias legado */ --text-hero: clamp(2.75rem, 1rem + 6.1vw, 6rem); /* 44 → 96 */ --text-display: clamp(2.5rem, 1rem + 5.4vw, 5.5rem); /* 40 → 88 */ --text-title: clamp(2rem, 1.25rem + 2.3vw, 3rem); /* 32 → 48 */ --text-headline: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem); /* 28 → 44 */ --text-card-title: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); /* 24 → 32 */ --text-lede: clamp(1.1875rem, 0.95rem + 0.9vw, 1.75rem); /* 19 → 28 */ --text-sub: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); /* 18 → 21 */ --text-body: 1.0625rem; /* 17 */ --text-eyebrow: 1.0625rem; /* 17 */ --text-label: clamp(1.125rem, 1rem + 0.45vw, 1.5rem); /* 18 → 24 */ --text-caption: 0.875rem; /* 14 */ --text-nav: 0.875rem; /* 14 — links do menu */ --leading-hero: 1.06; --leading-heading: 1.14; --leading-body: 1.47; --tracking-hero: -0.015em; --tracking-heading: -0.01em; /* ---- Layout ----------------------------------------------------------- */ --container-max: 70.625rem; /* 1130px — copy container */ --container-wide: 83.25rem; /* 1332px — media container */ --container-nav: 85rem; /* 1360px — nav / hairlines */ --gutter: clamp(1.25rem, 3.75vw, 3.375rem); /* 20 → 54px */ --section-pad: clamp(4.5rem, 3rem + 6.5vw, 8.25rem); /* 72 → 132px */ /* ---- Radius ----------------------------------------------------------- Escala do SITE — preservada como estava. Os cantos generosos (40/34px) são parte da identidade visual desta página e NÃO devem ser achatados para a escala do app (AppRadius vai até 24px), que serve a componentes de UI densos, não a cartões de landing page. */ --radius-media: 10px; /* screenshot frames */ --radius-card: 40px; /* step cards */ --radius-tile: 34px; /* source tiles */ --radius-badge: 12px; /* store badges */ --radius-pill: 999px; /* nav bar, buttons */ /* ---- Motion ----------------------------------------------------------- Ritmo original do site — não encurtar para o do app. */ --ease-gentle: cubic-bezier(0.28, 0.11, 0.32, 1); /* Apple reveal ease */ --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 300ms; --duration-medium: 600ms; --duration-reveal: 900ms; --stagger-step: 80ms; }