/* GERADO por design-system/build.mjs — NAO EDITAR A MAO. Fonte da verdade: design-system/tokens/tokens.json So tokens e @font-face. Classe nenhuma mora aqui de proposito. */ /* ========================================================================== PHANTOM UNIT — TIPOGRAFIA Lemon Milk é a única família da marca. Decisão do Nathan, 19/08/2026. ELA TEM TRÊS PESOS DE VERDADE, e só esses três existem no sistema: 300 light texto corrido, célula de tabela, legenda 400 normal campo, botão secundário, valor de linha 700 bold título, rótulo, KPI, botão principal Pedir 500, 600, 800 ou 900 não cria peso novo. Ou o navegador engorda a letra sozinho (o "negrito falso", que borra a Lemon Milk porque ela já é larga), ou cai num arquivo que já existe e a tela fica com dois pesos diferentes com o mesmo nome. Os aliases lá embaixo existem só como rede: se algum HTML gerado por fora pedir 800, ele recebe o Bold de verdade em vez de um borrão. No código da casa, use os três. Os TAMANHOS não moram aqui — moram em phantom-system.css, no :root, como --fs-*. Um lugar só. Formato: woff2 primeiro (484 KB → 157 KB no total), otf como reserva pra navegador velho. ========================================================================== */ /* ── 700 · BOLD ─────────────────────────────────────────────────────────── */ @font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilkbold.woff2') format('woff2'), url('/fonts/LemonMilkbold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilkbolditalic.woff2') format('woff2'), url('/fonts/LemonMilkbolditalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; } /* ── 400 · NORMAL ───────────────────────────────────────────────────────── */ @font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilk.woff2') format('woff2'), url('/fonts/LemonMilk.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilkitalic.woff2') format('woff2'), url('/fonts/LemonMilkitalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } /* ── 300 · LIGHT ────────────────────────────────────────────────────────── */ @font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilklight.woff2') format('woff2'), url('/fonts/LemonMilklight.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilklightitalic.woff2') format('woff2'), url('/fonts/LemonMilklightitalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; } /* ── REDE DE SEGURANÇA ────────────────────────────────────────────────────── Peso que o sistema não usa, apontado pro arquivo mais próximo. Serve pra HTML de e-mail, texto colado e conteúdo gerado por fora não virarem borrão. Não escreva estes pesos em código novo — o portão reprova. ───────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilkbold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilkbold.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilk.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilk.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilklight.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'LemonMilk'; src: url('/fonts/LemonMilklight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; } :root { /* ── COR ─────────────────────────────────────────────────────────────── */ --bg: #000000; /* fundo absoluto de tela, post e vídeo */ --card: #121212; /* superfície de cartão, modal, painel */ --card-alto: #181818; /* cartão sobre cartão, linha zebrada */ --border: #222222; /* divisória padrão */ --border-bright: #2C2C2C; /* divisória em destaque, contorno de campo em foco */ --green: #B3FF00; /* ACENTO UNICO da marca. Medido do ACID GREEN.png em 20/08/2026 — rgb(179,255,0) */ --green-rgb: 179, 255, 0; /* os canais do verde, pra rgba() com alpha proprio: rgba(var(--green-rgb), .35) */ --green-hover: #A1E500; /* o verde pressionado */ --green-dim: rgba(179, 255, 0, 0.15); /* fundo de selo e faixa em verde translúcido */ --text: #ffffff; /* texto de leitura */ --muted: #888888; /* metadado, legenda, placeholder */ --muted-dim: #52525b; /* ⚠️ resíduo da paleta zinc antiga — candidato a morrer, conferir os usos antes */ --danger: #ef4444; /* ação destrutiva. NÃO é o vermelho do semáforo */ --danger-dim: #7f1d1d; /* fundo de aviso destrutivo — vermelho sem lavagem transparente */ --danger-hover: #241618; /* fundo do botao de perigo no hover */ --yellow-dim: #854d0e; /* fundo de aviso em atencao — par do --yellow do semaforo */ --desativado: #17171b; /* fundo de controle desativado — nao flutua, nao clica */ --desativado-txt: #55555f; /* texto de controle desativado */ /* ── SEMAFORO ────────────────────────────────────────────────────────── */ /* Três cores, um significado só em todo o app: vermelho = falta fazer, */ /* amarelo = em andamento, verde = concluído. Vermelho é trabalho, nunca */ /* julgamento. */ --red-sem: #ff5f56; /* 🔴 falta fazer */ --red-sem-line: #e0443e; /* a borda do vermelho */ --yellow: #ffbd2e; /* 🟡 em andamento / esperando */ --yellow-line: #dea123; /* a borda do amarelo */ --green-sem: #27c93f; /* 🟢 concluído */ --green-sem-line: #1aab29; /* a borda do verde */ /* ── TIPOGRAFIA ──────────────────────────────────────────────────────── */ /* Lemon Milk tem TRÊS pesos de verdade. Pedir 500, 600, 800 ou 900 não cria */ /* peso novo — o navegador engorda a letra sozinho e borra a face, que já é */ /* larga. Os tamanhos saíram dos 374 usos reais do app, não de uma régua */ /* teórica. */ --font-brand: 'LemonMilk', sans-serif; /* título, marca, botão */ --font-sans: 'LemonMilk', sans-serif; /* leitura, campo */ --font-mono: 'LemonMilk', sans-serif; /* rótulo, número, código */ --fw-light: 300; /* texto corrido, célula de tabela, legenda */ --fw-normal: 400; /* campo, botão secundário, valor de linha */ --fw-bold: 700; /* título, rótulo, KPI, botão principal */ --fs-micro: 10px; /* chip, rótulo de eixo, carimbo */ --fs-mini: 11px; /* metadado, legenda, célula densa — o degrau mais usado do app */ --fs-peq: 12px; /* corpo de UI: botão, campo, tabela */ --fs-base: 13px; /* leitura corrida */ --fs-h4: 16px; /* título de cartão */ --fs-h3: 21px; /* título de cartão grande */ --fs-h2: 26px; /* título de bloco */ --fs-h1: 38px; /* título de tela */ --fs-display: clamp(44px, 7vw, 76px); /* capa, landing, número gigante — só peça de marketing */ --lh-titulo: 1.06; /* título: quase colado */ --lh-densa: 1.35; /* tabela, lista densa */ --lh-base: 1.55; /* leitura corrida */ --ls-titulo: -0.02em; /* título aperta: a Lemon Milk já é larga */ --ls-base: 0; /* leitura */ --ls-rotulo: 0.12em; /* rótulo em caixa alta abre */ /* ── FORMA ───────────────────────────────────────────────────────────── */ /* A altura de controle é 38px porque o Nathan pediu em 09/08: 'a altura dos */ /* botões, das linhas, lá é tudo muito fino, muito horizontal, otimizando o */ /* espaço'. É decisão de ferramenta. Peça de marketing usa --h-cta, que é */ /* outra régua. */ --r: 8px; /* canto padrão de tudo */ --h-controle: 38px; /* botão, campo, seletor — a linha de base do app */ --h-controle-sm: 30px; /* controle de ferramenta: barra, canto de cartão */ --h-cta: 48px; /* botão de peça de marketing, landing e post — NÃO usar no app */ --pad-controle: 18px; /* respiro horizontal do botão */ --pad-controle-sm: 12px; /* respiro do controle pequeno */ --pad-linha: 9px 14px; /* célula de tabela */ --pad-cartao: 18px; /* respiro interno do cartão */ --r-selo: 4px; /* raio do selo e da etiqueta pequena — menor que o --r do cartao */ --h-passo: 32px; /* altura do passo numerado (checkout, esteira) */ /* ── SOMBRA ──────────────────────────────────────────────────────────── */ /* A sombra é a assinatura da Phantom: no escuro, é ela que separa o cartão */ /* do fundo, não a borda. */ --flutua: 0 1px 2px rgba(0,0,0,.5), 0 8px 20px -10px rgba(0,0,0,.85); /* cartão, botão em repouso */ --flutua-alta: 0 3px 6px rgba(0,0,0,.6), 0 20px 34px -12px rgba(0,0,0,.95); /* modal, menu aberto, botão em hover */ --afundado: inset 0 2px 5px rgba(0,0,0,.7); /* campo e area rebaixada — o oposto do --flutua, que promete clique */ } /* ── hierarquia de título ──────────────────────────────────────────────── */ h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo); } h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: var(--ls-titulo); } h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -0.015em; } h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.01em; } h5 { font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; } h6 { font-size: var(--fs-mini); font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: var(--ls-rotulo); text-transform: uppercase; }