/* ========================================================================== OSV · Design System v2 — TOKENS Fonte da verdade. Nenhum componente usa hex/px/easing literal: só estes tokens. Rótulos: FONTE = está no material da marca · DERIVADO = calculado/estendido. ========================================================================== */ /* Fontes — League Spartan e DM Sans via Google Fonts (ver nas páginas). Itálico de assinatura = Georgia itálico, do super manual OSV (fonte de sistema, sem download). */ :root{ /* ── 1. Cor primitiva ─────────────────────────────────────────────── */ --osv-laranja: #F58E26; /* FONTE — Manual OSV: cor de ação */ --osv-laranja-claro: #F9A84A; /* FONTE — hover */ --osv-laranja-fundo: #C4700F; /* FONTE — press / base de gradiente */ /* Regra da marca (Lucas, 04/10/2026): todo texto laranja usa o laranja principal, inclusive sobre branco. Sobre branco ele tem 2,4:1 — por isso no branco o laranja vai só em destaques GRANDES e em rótulos curtos em negrito. */ --osv-verde: #4CAF50; /* FONTE — exclusivo Close Friends / sucesso */ --osv-marrom: #4E3B31; /* FONTE — textura, brilho secundário */ --osv-sepia: #C8A96E; /* FONTE — linhas de mapa, rota pontilhada */ /* Neutros escuros (FONTE: Deep Space do manual, levemente aquecidos) */ --osv-noite: #0C0A08; --osv-noite-2: #15110D; --osv-grafite: #1C1814; /* Neutros claros — DERIVADO: branco puro + cinzas SEM matiz rosado (pedido do Lucas) */ --osv-branco: #FFFFFF; --osv-gelo: #FAFAF9; --osv-linha-clara: #E8E6E3; --osv-tinta: #17130F; /* 18,5:1 sobre branco */ --osv-tinta-2: #57524C; /* 7,7:1 sobre branco */ --osv-tinta-3: #77716A; /* 4,8:1 sobre branco */ /* ── 2. Tipografia ────────────────────────────────────────────────── */ --osv-f-display: "League Spartan", system-ui, sans-serif; /* FONTE — emoção: títulos, números */ --osv-f-texto: "DM Sans", system-ui, sans-serif; /* FONTE — informação: texto, botões, rótulos */ --osv-f-script: Georgia, "Times New Roman", serif; /* FONTE — super manual: itálico 400, laranja, nunca bold */ /* Escala fluida (375px → 1440px) */ --osv-ts-mega: clamp(3.25rem, 1.6rem + 7.2vw, 7.5rem); /* hero de impacto */ --osv-ts-d1: clamp(2.75rem, 1.5rem + 5.4vw, 6rem); /* H1 */ --osv-ts-d2: clamp(2rem, 1.3rem + 3vw, 3.5rem); /* H2 de seção */ --osv-ts-d3: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); /* H3 de bloco */ --osv-ts-d4: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); /* título de card */ --osv-ts-numero: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); /* estatística */ --osv-ts-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem); /* subtítulo */ --osv-ts-corpo: 1rem; --osv-ts-peq: .875rem; --osv-ts-rotulo: .75rem; /* caixa alta, tracking largo */ --osv-script-escala: 1; /* itálico no mesmo corpo do título (como no manual) */ --osv-lh-display: .95; --osv-lh-titulo: 1.05; --osv-lh-corpo: 1.6; --osv-tr-display: -.045em; --osv-tr-titulo: -.03em; --osv-tr-rotulo: .16em; --osv-medida: 62ch; /* ── 3. Espaço (base 8) ───────────────────────────────────────────── */ --osv-e-1: .25rem; --osv-e-2: .5rem; --osv-e-3: .75rem; --osv-e-4: 1rem; --osv-e-5: 1.5rem; --osv-e-6: 2rem; --osv-e-7: 2.5rem; --osv-e-8: 3rem; --osv-e-9: 4rem; --osv-e-10: 5rem; --osv-e-11: 6rem; --osv-e-12: 8rem; --osv-secao-y: clamp(4.5rem, 3rem + 6vw, 8.5rem); --osv-gutter: clamp(1rem, .5rem + 2.5vw, 2rem); --osv-largura: 1160px; --osv-largura-larga: 1360px; --osv-largura-estreita: 760px; /* ── 4. Forma ─────────────────────────────────────────────────────── */ --osv-r-pilula: 999px; /* botões, pílulas, tags, inputs — FONTE (manual: pill) */ --osv-r-card: 20px; /* cards de vidro */ --osv-r-midia: 24px; /* vitrines e fotos grandes */ --osv-r-poster: 16px; /* capas verticais */ --osv-r-peq: 10px; /* ── 5. Movimento ─────────────────────────────────────────────────── */ --osv-ease: cubic-bezier(.16, 1, .3, 1); /* FONTE — ease-expo: "decolagem suave" */ --osv-ease-saida: cubic-bezier(.4, 0, .2, 1); --osv-ease-mola: cubic-bezier(.34, 1.56, .64, 1); /* FONTE — só para conquista/celebração */ --osv-dur-rapida: .18s; /* saídas (manual: 150ms) */ --osv-dur-media: .45s; /* hovers */ --osv-dur-lenta: .9s; /* revelações */ --osv-escalonar: 90ms; /* atraso entre itens de um grupo */ /* ── 6. Camadas ───────────────────────────────────────────────────── */ --osv-z-fundo: -1; --osv-z-conteudo: 1; --osv-z-cabecalho: 50; --osv-z-barra: 60; --osv-z-modal: 100; /* ── 7. Brilho / sombra (tingidos, nunca preto puro) ──────────────── */ --osv-glow-botao: 0 10px 40px -10px rgba(245,142,38,.7); --osv-glow-botao-hover: 0 16px 50px -10px rgba(245,142,38,.9); } /* ========================================================================== SUPERFÍCIES SEMÂNTICAS — o coração do sistema. Cada seção declara UMA superfície. Componentes só leem --s-*. Trocar a classe recolore texto, bordas, cards, rótulos e foco automaticamente. Regra de ritmo: escuro → branco → escuro… (no máx. 3 superfícies por página). ========================================================================== */ :root, .osv-sup--escuro, .osv-sup--grafite{ --s-fundo: var(--osv-noite); --s-fundo-alt: var(--osv-noite-2); --s-texto: #FFFFFF; /* 19,6:1 */ --s-texto-2: rgba(255,255,255,.70); /* ≈ 11:1 */ --s-texto-3: rgba(255,255,255,.52); /* ≈ 6,5:1 */ --s-linha: rgba(255,255,255,.12); --s-linha-forte: rgba(255,255,255,.24); --s-vidro: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02)); --s-vidro-solido: var(--osv-grafite); --s-rotulo: var(--osv-laranja); /* 8,4:1 */ --s-script: var(--osv-laranja); --s-acento: var(--osv-laranja); --s-acento-texto: #1A0F05; /* 7,9:1 sobre o laranja */ --s-brilho: rgba(245,142,38,.28); --s-brilho-2: rgba(78,59,49,.55); --s-grade: rgba(255,255,255,.05); --s-mapa: rgba(200,169,110,.22); --s-sombra: rgba(245,142,38,.30); --s-pilula: rgba(255,255,255,.04); --s-foco: var(--osv-laranja); --s-grao-mix: overlay; --s-grao-op: .07; color-scheme: dark; } .osv-sup--grafite{ /* escuro elevado: variação para quebrar duas escuras seguidas */ --s-fundo: var(--osv-grafite); --s-fundo-alt: var(--osv-noite-2); } .osv-sup--branco{ --s-fundo: var(--osv-branco); --s-fundo-alt: var(--osv-gelo); --s-texto: var(--osv-tinta); /* 18,5:1 */ --s-texto-2: var(--osv-tinta-2); /* 7,7:1 */ --s-texto-3: var(--osv-tinta-3); /* 4,8:1 */ --s-linha: var(--osv-linha-clara); --s-linha-forte: #CFCBC6; --s-vidro: linear-gradient(180deg, #FFFFFF, var(--osv-gelo)); --s-vidro-solido: var(--osv-gelo); --s-rotulo: var(--osv-laranja); /* 2,4:1 — regra da marca; usar em negrito e caixa alta */ --s-script: var(--osv-laranja); /* 2,4:1 — regra da marca; só em títulos grandes */ --s-acento: var(--osv-laranja); --s-acento-texto: #1A0F05; --s-brilho: rgba(245,142,38,.16); --s-brilho-2: rgba(245,142,38,.06); --s-grade: rgba(23,19,15,.05); --s-mapa: rgba(23,19,15,.07); --s-sombra: rgba(23,19,15,.20); --s-pilula: #FFFFFF; --s-foco: var(--osv-tinta); --s-grao-mix: multiply; --s-grao-op: .035; color-scheme: light; } .osv-sup--laranja{ /* faixa de destaque — usar 1x por página, no máximo */ --s-fundo: var(--osv-laranja); --s-fundo-alt: var(--osv-laranja-claro); --s-texto: #1A0F05; /* 7,9:1 */ --s-texto-2: rgba(26,15,5,.78); --s-texto-3: rgba(26,15,5,.62); --s-linha: rgba(26,15,5,.18); --s-linha-forte: rgba(26,15,5,.35); --s-vidro: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); --s-vidro-solido: var(--osv-laranja-claro); --s-rotulo: #1A0F05; --s-script: #1A0F05; /* branco sobre laranja dá só 2,4:1 — reprovado */ --s-acento: #1A0F05; --s-acento-texto: #FFFFFF; --s-brilho: rgba(255,255,255,.35); --s-brilho-2: rgba(196,112,15,.6); --s-grade: rgba(26,15,5,.08); --s-mapa: rgba(26,15,5,.12); --s-sombra: rgba(26,15,5,.30); --s-pilula: rgba(255,255,255,.2); --s-foco: #1A0F05; --s-grao-mix: multiply; --s-grao-op: .06; color-scheme: light; }