/* ========================================================================== BOTICA NOTURNA — tokens canonicos · v1.1 (revisao) · 2026-09-14 Especificacao: design-system/DESIGN-BOTICA-NOTURNA.md -------------------------------------------------------------------------- - Prefixo unico: --bn-* - Toda cor (solida ou borda) tem par "--bn--hsl: H S% L%" (Tailwind/shadcn): hsl(var(--bn-forest-hsl) / ) Bordas translucidas (rgba) tem tambem "-solid" (= a borda composta sobre o painel padrao) para adaptadores que so aceitam cor opaca/triplet. - Componentes consomem SO tokens de papel (--bn-bg, --bn-panel, --bn-ink...) + tom local (--bn-tone, --bn-tone-hsl, --bn-tone-text, --bn-field-hsl) + ambar. Nunca hex direto. Nunca --ring-tone / --bn-card-tone-hsl (removidos na v1.1). - Escopos: :root = noite (padrao). .bn-surface-night / .bn-surface-cream redefinem os tokens de papel; .bn-panel--brand remapeia para o painel assinatura forest-deep. Escopo NAO pinta fundo: quem pinta e o componente (body, .bn-sheet, .bn-panel, .bn-card). - [data-col], [data-glow], [data-glow-at] so mapeiam tokens (nao pintam). - NUNCA redefinir um token em funcao dele mesmo (--x: calc(var(--x) * 2) e invalido em CSS). Use um token multiplicador separado (ex.: --bn-glow-boost). - INTEGRACAO: o bloco de base esta em @layer bn-base e PERDE para CSS sem camada (preflight do Tailwind 3, @layer base do shadcn compilado sem camada). O adaptador deve redeclarar background/color/font/line-height do body na base do projeto, ou usar a classe opt-in .bn-body (sem camada) no . - Validar: node design-system/tools/contrast.mjs --tokens design-system/tokens/tokens.css ========================================================================== */ :root { /* ---------- NOITE · superficie cinematografica ---------- */ --bn-night: #0A0F0B; /* chao da pagina (quase-preto com vies verde) */ --bn-night-hsl: 132 20% 4.9%; --bn-night-raised: #141C16; /* paineis e cards (1.11:1 sobre o chao = separacao EQUA) */ --bn-night-raised-hsl: 135 16.7% 9.4%; --bn-night-overlay: #1D2620; /* pill da nav, chips, inputs, icon tiles, trilho segmentado */ --bn-night-overlay-hsl: 140 13.4% 13.1%; --bn-night-line: rgba(255, 254, 250, 0.08); /* hairlines, borda de painel */ --bn-night-line-solid: #272E28; /* = .08 bone sobre raised (adaptadores opacos) */ --bn-night-line-solid-hsl: 128.6 8.2% 16.7%; --bn-night-line-strong: rgba(255, 254, 250, 0.40); /* borda de input/botao secundario/estado selecionado */ --bn-night-line-strong-solid: #727671; /* = .40 sobre raised: 3.76 raised / 3.37 overlay */ --bn-night-line-strong-solid-hsl: 108 2.2% 45.3%; --bn-night-ink: #F3EEE3; /* texto primario */ --bn-night-ink-hsl: 41.3 40% 92.2%; --bn-night-ink-2: #A9A396; /* texto secundario: eyebrow, paragrafo, legenda (>=6.2:1) */ --bn-night-ink-2-hsl: 41.1 9.9% 62.5%; --bn-night-ink-3: #736E64; /* continuacao do headline 2 tons — SO texto >=24px (>=3.4:1) */ --bn-night-ink-3-hsl: 40 7% 42.2%; --bn-night-glass: rgba(20, 28, 22, 0.48); /* cartao de vidro sobre foto: SO com --bn-glass-filter */ --bn-night-glass-fallback: rgba(20, 28, 22, 0.92); /* sem suporte a backdrop-filter */ --bn-glass-blur: 28px; --bn-glass-filter: blur(28px) saturate(1.6) brightness(0.68); /* brightness limita a foto a #ADADAD: ink >=4.93:1 */ --bn-night-tag: rgba(10, 15, 11, 0.80); /* etiqueta local atras de mono-label em foto (ink 9.25:1 sobre #FFF) */ --bn-night-scrim: rgba(10, 15, 11, 0.84); /* nav rolada, menu, barra inferior, modal */ /* ---------- NOITE · painel assinatura da marca (1 por pagina) ---------- */ --bn-night-brand: #1F4A20; /* = forest-deep. bone 10.11 / ink 8.82 / ink-2 4.06 (so grande) */ --bn-night-brand-hsl: 121.4 41% 20.6%; --bn-night-brand-2: #265227; /* elemento interno no painel de marca (ink 7.83) */ --bn-night-brand-2-hsl: 121.4 36.7% 23.5%; --bn-night-brand-line: rgba(255, 254, 250, 0.12); --bn-night-brand-line-solid: #3A603A; --bn-night-brand-line-solid-hsl: 120 24.7% 30.2%; --bn-night-brand-line-strong: rgba(255, 254, 250, 0.48); /* 3.65:1 sobre forest-deep */ --bn-night-brand-line-strong-solid: #8BA089; --bn-night-brand-line-strong-solid-hsl: 114.8 10.8% 58.2%; /* ---------- CREME · superficie editorial ---------- */ --bn-cream: #F8F4EC; /* folha creme (painel de secao editorial) */ --bn-cream-hsl: 40 46.2% 94.9%; --bn-bone: #FFFEFA; /* cards e inputs sobre a folha; papel da etiqueta */ --bn-bone-hsl: 48 100% 99%; --bn-cream-2: #F0EADC; /* chips, icon tiles, trilhos, cabecalho de tabela (= border-light v1) */ --bn-cream-2-hsl: 42 40% 90.2%; --bn-cream-line: #E6DFD0; /* hairlines e bordas decorativas (= border v1) */ --bn-cream-line-hsl: 40.9 30.6% 85.9%; --bn-cream-line-strong: #8C8373; /* borda de input/controle (>=3:1 sobre bone/cream) */ --bn-cream-line-strong-hsl: 38.4 9.8% 50%; --bn-charcoal: #1F2826; /* texto primario no creme */ --bn-charcoal-hsl: 166.7 12.7% 13.9%; --bn-mute: #6B7280; /* mute v1 — so sobre bone (4.79:1); falha no cream (4.41:1) */ --bn-mute-hsl: 220 8.9% 46.1%; --bn-mute-deep: #5B616D; /* texto secundario no creme (5.67:1 cream / 5.19:1 cream-2) */ --bn-mute-deep-hsl: 220 9% 39.2%; --bn-cream-ink-3: #857F74; /* continuacao do headline 2 tons no creme — SO >=24px */ --bn-cream-ink-3-hsl: 38.8 6.8% 48.8%; /* ---------- MARCA (DESIGN.md v1) ---------- */ --bn-forest: #2C5F2D; --bn-forest-hsl: 121.2 36.7% 27.3%; --bn-forest-deep: #1F4A20; --bn-forest-deep-hsl: 121.4 41% 20.6%; --bn-lime: #90BE53; /* NUNCA texto. NUNCA icone significativo no creme (1.98:1). Areas, aneis na noite */ --bn-lime-hsl: 85.8 45.1% 53.5%; --bn-sage: #8FA689; /* tom neutro de anel/controle na noite (6.61:1 raised) */ --bn-sage-hsl: 107.6 14% 59.4%; --bn-earth: #7A5C42; --bn-earth-hsl: 27.9 29.8% 36.9%; --bn-terracotta: #C4655A; /* assinatura: <=5% dos pixels. Nunca texto sobre raised/overlay */ --bn-terracotta-hsl: 6.2 47.3% 56.1%; --bn-terracotta-hover: #D2776C; /* hover do CTA acento nas duas superficies */ --bn-terracotta-hover-hsl: 6.5 53.1% 62.4%; /* ---------- SEMANTICA ---------- */ --bn-success: #4A7C59; /* v1 — area/icone; texto no creme usa -deep */ --bn-success-hsl: 138 25.3% 38.8%; --bn-warning: #C29830; --bn-warning-hsl: 42.7 60.3% 47.5%; --bn-error: #B85450; --bn-error-hsl: 2.3 42.3% 51.8%; --bn-info: #4A7C95; --bn-info-hsl: 200 33.6% 43.7%; --bn-success-deep: #3F6D4D; /* texto sobre creme */ --bn-success-deep-hsl: 138.3 26.7% 33.7%; --bn-warning-deep: #806018; --bn-warning-deep-hsl: 41.5 68.4% 29.8%; --bn-error-deep: #A8463F; --bn-error-deep-hsl: 4 45.5% 45.3%; --bn-info-deep: #3F6C82; --bn-info-deep-hsl: 199.7 34.7% 37.8%; --bn-success-glow: #86C49A; /* texto/icone sobre noite */ --bn-success-glow-hsl: 139.4 34.4% 64.7%; --bn-warning-glow: #EDBE55; --bn-warning-glow-hsl: 41.4 80.9% 63.1%; --bn-error-glow: #F0948B; --bn-error-glow-hsl: 5.3 77.1% 74.3%; --bn-info-glow: #7DB9D6; --bn-info-glow-hsl: 199.6 52% 66.5%; /* ---------- COLECOES · base (rebranding 04) = cor do CAMPO do glow card ---------- */ --bn-col-passeio: #4E7A3A; /* Passeio & Protecao · Verde Cerrado */ --bn-col-passeio-hsl: 101.3 35.6% 35.3%; --bn-col-banho: #4A7C95; /* Banho & Pelo · Azul Agua-de-rio */ --bn-col-banho-hsl: 200 33.6% 43.7%; --bn-col-calma: #8B7A9E; /* Calma & Sono · Lavanda Queimada */ --bn-col-calma-hsl: 268.3 15.7% 54.9%; --bn-col-boca: #5FA88F; /* Boca & Sorriso · Menta Fresca */ --bn-col-boca-hsl: 159.5 29.6% 51.6%; --bn-col-barriga: #C29830; /* Barriga & Apetite · Ambar Pequi */ --bn-col-barriga-hsl: 42.7 60.3% 47.5%; --bn-col-mesa: #90BE53; /* Mesa Natural · Verde Folha (lime) */ --bn-col-mesa-hsl: 85.8 45.1% 53.5%; --bn-col-cuidados: #C4655A; /* Primeiros Cuidados · Terracotta */ --bn-col-cuidados-hsl: 6.2 47.3% 56.1%; /* alpha maximo do campo no canto (x --bn-glow-strength x --bn-glow-level x --bn-glow-boost). Tons claros (boca, barriga, mesa) e calma (teto anti-violeta) usam menos. Validado no contrast.mjs. */ --bn-field-alpha-passeio: 0.70; --bn-field-alpha-banho: 0.70; --bn-field-alpha-calma: 0.55; --bn-field-alpha-boca: 0.60; --bn-field-alpha-barriga: 0.60; --bn-field-alpha-mesa: 0.55; --bn-field-alpha-cuidados: 0.70; /* ---------- COLECOES · glow (TRACO do anel e rotulo micro na noite) ---------- Auditoria: croma Lab do glow <= 1.10 x croma da base; calma croma <= 25 e matiz HSL 255-275. */ --bn-glow-passeio: #95C274; /* v1.1: croma 51.7 -> 45 (era #8FC46A, 1.26x a base) */ --bn-glow-passeio-hsl: 94.6 39% 60.8%; --bn-glow-banho: #81B9D4; /* v1.1: croma 23.8 -> 22.4 (era #7DB9D6, 1.13x a base; agora 1.07x) */ --bn-glow-banho-hsl: 199.5 49.1% 66.9%; --bn-glow-calma: #B9A7D1; /* lavanda apagada: croma 23.9, matiz HSL 265.7 */ --bn-glow-calma-hsl: 265.7 31.3% 73.7%; --bn-glow-boca: #86D1B5; --bn-glow-boca-hsl: 157.6 44.9% 67.3%; --bn-glow-barriga: #EDBE55; --bn-glow-barriga-hsl: 41.4 80.9% 63.1%; --bn-glow-mesa: #B5E07A; /* lime luminoso: nunca texto */ --bn-glow-mesa-hsl: 85.3 62.2% 67.8%; --bn-glow-cuidados: #E88B7C; --bn-glow-cuidados-hsl: 8.3 70.1% 69.8%; /* ---------- COLECOES · deep (texto micro, icone e arco de anel no creme, >=4.6:1) ---------- */ --bn-deep-passeio: #446B33; --bn-deep-passeio-hsl: 101.8 35.4% 31%; --bn-deep-banho: #3F6C82; --bn-deep-banho-hsl: 199.7 34.7% 37.8%; --bn-deep-calma: #6E5F82; --bn-deep-calma-hsl: 265.7 15.6% 44.1%; --bn-deep-boca: #357060; --bn-deep-boca-hsl: 163.7 35.8% 32.4%; --bn-deep-barriga: #806018; --bn-deep-barriga-hsl: 41.5 68.4% 29.8%; --bn-deep-mesa: #476E26; /* tambem: icone significativo "verde folha" no creme (5.43:1) */ --bn-deep-mesa-hsl: 92.5 48.6% 29%; --bn-deep-cuidados: #A44E44; --bn-deep-cuidados-hsl: 6.3 41.4% 45.5%; /* ---------- AMBAR · vidro da gota de oleo (calibrado no frasco ambar real) ---------- Uso restrito: gota, caustica, pico do HUD, linha do rodape e (pendente) anel de foco. */ --bn-amber-50: #FFF3E0; --bn-amber-50-hsl: 36.8 100% 93.9%; --bn-amber-100: #FFE0B2; --bn-amber-100-hsl: 35.8 100% 84.9%; --bn-amber-200: #FFCB7A; /* anel de foco na noite (pendente de aprovacao; alternativa: --bn-shadow-focus-ink) */ --bn-amber-200-hsl: 36.5 100% 73.9%; --bn-amber-300: #F2A94E; /* luz transmitida, caustica, pico do HUD, linha do rodape */ --bn-amber-300-hsl: 33.3 86.3% 62.7%; --bn-amber-400: #D9822E; --bn-amber-400-hsl: 29.5 69.2% 51.6%; --bn-amber-500: #B5601C; /* corpo medio do vidro */ --bn-amber-500-hsl: 26.7 73.2% 41%; --bn-amber-600: #8C4212; --bn-amber-600-hsl: 23.6 77.2% 31%; --bn-amber-700: #62290B; /* nucleo */ --bn-amber-700-hsl: 20.7 79.8% 21.4%; --bn-amber-800: #3F1807; --bn-amber-800-hsl: 18.2 80% 13.7%; --bn-amber-900: #220C04; /* espessura do vidro (so LOD L) */ --bn-amber-900-hsl: 16 78.9% 7.5%; --bn-amber-glass: rgba(140, 66, 18, 0.62); /* tinta translucida (usos CSS simples) */ --bn-amber-core: #62290B; --bn-amber-core-hsl: 20.7 79.8% 21.4%; --bn-amber-rim: #FFD08A; /* luz de borda */ --bn-amber-rim-hsl: 35.9 100% 77.1%; --bn-amber-caustic: #F2A94E; /* brilho projetado na superficie abaixo */ --bn-amber-caustic-hsl: 33.3 86.3% 62.7%; --bn-amber-specular: #FFF8EC; /* especular */ --bn-amber-specular-hsl: 37.9 100% 96.3%; /* ---------- TIPOGRAFIA ---------- */ --bn-font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --bn-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --bn-font-accent: "Fraunces", Georgia, "Times New Roman", serif; --bn-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --bn-fvs-accent: "opsz" 144, "SOFT" 100, "WONK" 1; --bn-fvs-botanical: "opsz" 14, "SOFT" 0, "WONK" 0; /* nome cientifico (pendente de aprovacao fora de headline) */ --bn-accent-size: 1em; /* testado em render: 1.08em fica maior que a DM Sans */ --bn-ls-accent: -0.01em; /* a Fraunces nao acompanha o tracking negativo da DM Sans */ --bn-accent-overhang: 0.06em; /* padding-inline-end do acento: a italica WONK invade a palavra seguinte */ --bn-accent-guard: 0.12em; /* respiro horizontal minimo em volta de display-xl/l com acento dentro de overflow:hidden */ --bn-fw-body: 400; --bn-fw-medium: 500; --bn-fw-display: 600; --bn-fw-accent: 400; /* escala por viewport: so em secoes abertas e paineis largos (hero, CTA, rodape) */ --bn-fs-display-xl: clamp(48px, 9vw, 144px); --bn-lh-display-xl: 0.92; --bn-lh-display-xl-accent: 0.96; /* +.04 quando o bloco tem acento Fraunces (descendentes da italica) */ --bn-ls-display-xl: -0.045em; --bn-fs-display-l: clamp(36px, 5.6vw, 84px); --bn-lh-display-l: 0.96; --bn-lh-display-l-accent: 1; --bn-ls-display-l: -0.035em; --bn-fs-display-m: clamp(28px, 3.6vw, 52px); --bn-lh-display-m: 1.02; --bn-ls-display-m: -0.025em; /* escala por CONTAINER (cqi): dentro de .bn-panel, .bn-card, .bn-ficha, .bn-glass (container-type: inline-size) */ --bn-fs-panel-head: clamp(28px, 8cqi, 56px); /* headline de painel split (EQUA: 7-8% da largura do painel) */ --bn-lh-panel-head: 1.02; --bn-ls-panel-head: -0.025em; --bn-fs-stat: clamp(40px, 17cqi, 84px); /* numero da ficha */ --bn-fs-stat-word: clamp(28px, 11cqi, 52px); /* ficha com palavra ("Goiania"); hyphens: manual */ --bn-fs-glass-hero: clamp(28px, 10cqi, 36px); /* destaque do cartao de vidro */ --bn-fs-title: 24px; --bn-lh-title: 1.2; --bn-ls-title: -0.015em; --bn-fs-title-s: 18px; /* rotulo de card, titulo de cartao de vidro */ --bn-lh-title-s: 1.3; --bn-ls-title-s: -0.01em; --bn-fs-body-l: 18px; --bn-lh-body-l: 1.55; --bn-fs-body: 16px; --bn-lh-body: 1.55; --bn-fs-body-s: 15px; /* paragrafo de painel, botao md, legenda de ficha, chat, tagline */ --bn-lh-body-s: 1.5; --bn-fs-small: 14px; --bn-lh-small: 1.5; --bn-fs-caption: 13px; /* descricao de glow card, valor secundario de lista, legenda de imagem */ --bn-lh-caption: 1.45; --bn-fs-micro: 12px; --bn-lh-micro: 1.4; --bn-fs-eyebrow: 13px; /* sentence case, ink-2, sem caixa alta */ --bn-lh-eyebrow: 1.4; --bn-fs-mono-label: 11px; /* JetBrains Mono 500, CAIXA ALTA, ls .08em. Minimo absoluto de texto: 11px */ --bn-lh-mono-label: 1.3; --bn-ls-mono-label: 0.08em; --bn-fs-hud: 12px; /* JetBrains Mono, caixa normal (Hz, min) */ --bn-fs-hud-sm: 11px; /* HUD < 480px */ --bn-ls-hud: 0.02em; --bn-fs-article: 17px; /* corpo de artigo (folha creme) */ --bn-lh-article: 1.7; --bn-fs-h2-article: 26px; --bn-lh-h2-article: 1.2; --bn-fs-h3-article: 20px; --bn-lh-h3-article: 1.3; --bn-fs-ring-num: 30px; /* numero dentro do anel de card */ --bn-fs-ring-num-sm: 26px; /* anel de card mobile (104px) */ --bn-fs-ring-cap: 11px; /* legenda dentro do anel: ink 500, <= 8 caracteres */ /* ---------- RAIO (hierarquia por papel e largura, nunca um raio so) ---------- Mapear legado por VALOR em px, nunca por nome (v1 md=8, Botica md=12). */ --bn-r-xs: 6px; /* micro: barra segmentada, tooltip, kbd, etiqueta, tag de foto */ --bn-r-sm: 8px; /* controles: botoes, inputs, chips, itens de nav/segmented, miniaturas */ --bn-r-md: 12px; /* containers <=480px: pill da nav, tile, trilho segmented, card/glow card, ficha, vidro, toast */ --bn-r-lg: 16px; /* paineis >480px: split, bento grande, midia, painel de chat */ --bn-r-xl: 24px; /* folhas creme (mobile tambem), drawer, modal, device frame */ --bn-r-pill: 999px; /* so: trilho/segmentos de barra, dots, toggle, avatar */ /* ---------- ESPACO (base 4px, DESIGN.md) ---------- */ --bn-space-1: 4px; --bn-space-2: 8px; --bn-space-3: 12px; --bn-space-4: 16px; --bn-space-5: 24px; --bn-space-6: 32px; --bn-space-7: 48px; --bn-space-8: 64px; --bn-space-9: 96px; --bn-space-10: 128px; --bn-gutter: clamp(16px, 2.78vw, 40px); /* margem lateral da pagina: 16 mobile -> 40 desktop */ --bn-gap-panel: clamp(12px, 1.2vw, 20px); /* entre paineis: 12 mobile -> ~17 @1440 -> 20 */ --bn-pad-panel: clamp(24px, 3.4vw, 56px); /* padding interno de painel: 24 -> ~49 @1440 */ --bn-pad-card: clamp(20px, 1.8vw, 28px); /* bento/glow card */ --bn-pad-sheet: clamp(24px, 5.6vw, 96px); /* folha creme */ --bn-section-y: clamp(64px, 8vw, 128px); /* respiro vertical entre secoes abertas na noite */ --bn-max-panels: 1440px; /* pendente de aprovacao (v1: 1200px) */ --bn-max-sheet: 1120px; /* conteudo de checkout/tabela na folha */ --bn-max-form: 720px; /* formulario simples */ --bn-max-text: 65ch; --bn-max-panel-text: 46ch; /* paragrafo de painel (~220 caracteres em 4 linhas) */ /* ---------- MEDIDAS DE COMPONENTE ---------- */ --bn-nav-h: 64px; --bn-nav-top: 20px; --bn-nav-top-scrolled: 12px; --bn-nav-pill-h: 44px; --bn-btn-h-nav: 44px; /* CTA da nav = mesma altura do pill */ --bn-navbar-h: 56px; /* barra mobile (+ safe-area-inset-top) */ --bn-btn-h-sm: 40px; --bn-btn-h-md: 48px; --bn-btn-h-lg: 56px; --bn-chip-h-sm: 28px; --bn-chip-h-md: 36px; --bn-chip-h-lg: 48px; /* chip de hero/assistente com gota S 22x32 */ --bn-input-h: 48px; --bn-row-h: 64px; --bn-tile: 40px; --bn-ring-mini: 40px; --bn-ring-card: 132px; --bn-ring-card-sm: 104px; --bn-ring-hero-min: 280px; --bn-ring-hero-max: 360px; --bn-orb: 64px; /* botao flutuante da Liz */ --bn-orb-tabbar: 56px; --bn-avatar: 32px; /* avatar de pessoa real / gota S no chat */ --bn-card-min-h: 220px; --bn-card-min-h-sm: 180px; --bn-bottom-bar-h: 0px; /* barra fixa inferior ativa (compra, checkout, tab bar): 64px. Substitui --bn-hud-offset */ --bn-hud-bottom: clamp(12px, 2.1vw, 30px); --bn-chat-gap: 28px; /* orb da Liz acima do HUD direito */ --bn-chat-w: 380px; --bn-chat-h: 560px; --bn-drawer-w: 420px; --bn-wordmark-h: 18px; /* pendente de aprovacao (v1: logo 36-48px no header) */ --bn-wordmark-h-sm: 16px; --bn-wordmark-h-footer: 24px; /* ---------- SOMBRA E GLOW ---------- */ --bn-shadow-sm: 0 1px 2px rgba(31, 40, 38, 0.05); --bn-shadow-md: 0 4px 12px rgba(31, 40, 38, 0.08); --bn-shadow-lg: 0 12px 32px rgba(31, 40, 38, 0.12); --bn-shadow-night-float: 0 2px 8px rgba(0, 0, 0, 0.40), 0 24px 64px rgba(0, 0, 0, 0.55); --bn-shadow-glass: inset 0 1px 0 rgba(255, 254, 250, 0.10), 0 24px 64px rgba(0, 0, 0, 0.45); /* anel duplo: o anel interno escuro garante o indicador sobre QUALQUER fundo (obrigatorio em objetos fixos/flutuantes) */ --bn-shadow-focus-night: 0 0 0 2px var(--bn-night), 0 0 0 4px var(--bn-amber-200); --bn-shadow-focus-cream: 0 0 0 2px var(--bn-cream), 0 0 0 4px var(--bn-forest); --bn-shadow-focus-ink: 0 0 0 2px var(--bn-night), 0 0 0 4px var(--bn-night-ink); /* alternativa ao ambar (pendente) */ --bn-shadow-focus-input-cream: 0 0 0 3px hsl(var(--bn-forest-hsl) / 0.15); /* = --shadow-focus do v1 (+ borda forest) */ --bn-glow-shadow-passeio: 0 0 16px hsl(var(--bn-glow-passeio-hsl) / 0.45), 0 0 48px hsl(var(--bn-glow-passeio-hsl) / 0.20); --bn-glow-shadow-banho: 0 0 16px hsl(var(--bn-glow-banho-hsl) / 0.45), 0 0 48px hsl(var(--bn-glow-banho-hsl) / 0.20); --bn-glow-shadow-calma: 0 0 16px hsl(var(--bn-glow-calma-hsl) / 0.40); /* sem halo de 48px (anti-violeta) */ --bn-glow-shadow-boca: 0 0 16px hsl(var(--bn-glow-boca-hsl) / 0.45), 0 0 48px hsl(var(--bn-glow-boca-hsl) / 0.20); --bn-glow-shadow-barriga: 0 0 16px hsl(var(--bn-glow-barriga-hsl) / 0.45), 0 0 48px hsl(var(--bn-glow-barriga-hsl) / 0.20); --bn-glow-shadow-mesa: 0 0 16px hsl(var(--bn-glow-mesa-hsl) / 0.40); /* sem halo de 48px (anti lime-neon) */ --bn-glow-shadow-cuidados: 0 0 16px hsl(var(--bn-glow-cuidados-hsl) / 0.45), 0 0 48px hsl(var(--bn-glow-cuidados-hsl) / 0.20); --bn-glow-shadow-amber: 0 0 24px hsl(var(--bn-amber-300-hsl) / 0.45), 0 0 80px hsl(var(--bn-amber-400-hsl) / 0.25); --bn-glow-boost-hover: 1.2; /* valor de --bn-glow-boost no hover (1.35 reprovava a legenda do anel em mesa) */ /* ---------- MOTION (easings DESIGN.md) ---------- */ --bn-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --bn-ease-in: cubic-bezier(0.4, 0, 1, 1); --bn-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --bn-ease-float: cubic-bezier(0.45, 0, 0.55, 1); --bn-dur-micro: 100ms; --bn-dur-short: 200ms; --bn-dur-medium: 300ms; --bn-dur-long: 500ms; --bn-dur-count: 900ms; --bn-dur-ring: 1200ms; --bn-stagger-ring: 120ms; --bn-dur-drop-float: 6000ms; --bn-drop-float-y: -8px; --bn-dur-hud-rise: 600ms; --bn-dur-hud-hold: 900ms; --bn-dur-hud-fall: 1800ms; --bn-dur-typing: 1200ms; /* indicador de 3 pontos (conversa) */ --bn-reveal-y: 16px; /* ---------- HUD (lido pelo botica.js) ---------- */ --bn-hud-hz-base: 25; --bn-hud-hz-peak-min: 32; --bn-hud-hz-peak-max: 38; --bn-hud-cooldown: 8000ms; --bn-care-min-seconds: 10; /* abaixo disso o rodape mostra a frase fallback */ --bn-care-refresh: 60000ms; /* atualizacao da frase do rodape enquanto visivel */ /* ---------- CAMADAS (pilha inferior: safe area -> barra -> HUD -> orb) ---------- */ --bn-z-hud: 40; --bn-z-bottombar: 45; --bn-z-nav: 50; --bn-z-chat: 55; --bn-z-menu: 60; --bn-z-modal: 65; --bn-z-toast: 70; --bn-z-consent: 80; --bn-z-skip: 90; } /* ========================================================================== TOKENS DE PAPEL · NOITE (padrao da pagina) ========================================================================== */ :root, .bn-surface-night { --bn-bg: var(--bn-night); --bn-bg-hsl: var(--bn-night-hsl); --bn-panel: var(--bn-night-raised); --bn-panel-hsl: var(--bn-night-raised-hsl); --bn-panel-2: var(--bn-night-overlay); --bn-panel-2-hsl: var(--bn-night-overlay-hsl); --bn-ink: var(--bn-night-ink); --bn-ink-hsl: var(--bn-night-ink-hsl); --bn-ink-2: var(--bn-night-ink-2); --bn-ink-2-hsl: var(--bn-night-ink-2-hsl); --bn-ink-3: var(--bn-night-ink-3); --bn-ink-3-hsl: var(--bn-night-ink-3-hsl); --bn-line: var(--bn-night-line); --bn-line-solid: var(--bn-night-line-solid); --bn-line-hsl: var(--bn-night-line-solid-hsl); --bn-line-strong: var(--bn-night-line-strong); --bn-line-strong-solid: var(--bn-night-line-strong-solid); --bn-line-strong-hsl: var(--bn-night-line-strong-solid-hsl); --bn-glass: var(--bn-night-glass); --bn-glass-fallback: var(--bn-night-glass-fallback); --bn-tag: var(--bn-night-tag); --bn-scrim: var(--bn-night-scrim); --bn-hover: hsl(var(--bn-night-ink-hsl) / 0.06); --bn-pressed: hsl(var(--bn-night-ink-hsl) / 0.10); --bn-cta-bg: var(--bn-bone); --bn-cta-bg-hsl: var(--bn-bone-hsl); --bn-cta-bg-hover: var(--bn-night-ink); --bn-cta-bg-hover-hsl: var(--bn-night-ink-hsl); --bn-cta-ink: var(--bn-charcoal); --bn-cta-ink-hsl: var(--bn-charcoal-hsl); --bn-cta-accent-bg: var(--bn-terracotta); --bn-cta-accent-bg-hsl: var(--bn-terracotta-hsl); --bn-cta-accent-bg-hover: var(--bn-terracotta-hover); --bn-cta-accent-bg-hover-hsl: var(--bn-terracotta-hover-hsl); --bn-cta-accent-ink: var(--bn-night); --bn-cta-accent-ink-hsl: var(--bn-night-hsl); --bn-link: var(--bn-night-ink); --bn-link-hsl: var(--bn-night-ink-hsl); --bn-link-underline: hsl(var(--bn-night-ink-hsl) / 0.35); --bn-focus: var(--bn-amber-200); --bn-focus-hsl: var(--bn-amber-200-hsl); --bn-shadow-focus: var(--bn-shadow-focus-night); --bn-shadow-float: var(--bn-shadow-night-float); --bn-state-success: var(--bn-success-glow); --bn-state-success-hsl: var(--bn-success-glow-hsl); --bn-state-warning: var(--bn-warning-glow); --bn-state-warning-hsl: var(--bn-warning-glow-hsl); --bn-state-error: var(--bn-error-glow); --bn-state-error-hsl: var(--bn-error-glow-hsl); --bn-state-info: var(--bn-info-glow); --bn-state-info-hsl: var(--bn-info-glow-hsl); --bn-tone-passeio: var(--bn-glow-passeio); --bn-tone-passeio-hsl: var(--bn-glow-passeio-hsl); --bn-tone-banho: var(--bn-glow-banho); --bn-tone-banho-hsl: var(--bn-glow-banho-hsl); --bn-tone-calma: var(--bn-glow-calma); --bn-tone-calma-hsl: var(--bn-glow-calma-hsl); --bn-tone-boca: var(--bn-glow-boca); --bn-tone-boca-hsl: var(--bn-glow-boca-hsl); --bn-tone-barriga: var(--bn-glow-barriga); --bn-tone-barriga-hsl: var(--bn-glow-barriga-hsl); --bn-tone-mesa: var(--bn-glow-mesa); --bn-tone-mesa-hsl: var(--bn-glow-mesa-hsl); --bn-tone-cuidados: var(--bn-glow-cuidados); --bn-tone-cuidados-hsl: var(--bn-glow-cuidados-hsl); --bn-tone-neutral: var(--bn-sage); /* anel de passos, segmented, controles sem colecao */ --bn-tone-neutral-hsl: var(--bn-sage-hsl); /* tom local (sobrescrito por [data-col]) — componentes usam SO estes 4 */ --bn-tone: var(--bn-tone-neutral); --bn-tone-hsl: var(--bn-tone-neutral-hsl); --bn-tone-text: var(--bn-night-ink); --bn-field-hsl: var(--bn-sage-hsl); --bn-field-alpha: 0.55; --bn-glow-strength: 1; /* por superficie: 1 noite / .22 creme / 0 painel de marca */ --bn-glow-level: 0.45; /* por card: soft (padrao) .45 / hero 1 — max. 1 hero por linha */ --bn-glow-boost: 1; /* por estado: hover = var(--bn-glow-boost-hover) */ --bn-glow-at: 100% 100%; /* ancora do campo: br (padrao) | r | tr */ --bn-ring-track-alpha: 0.16; --bn-ring-glow: 1; /* 1 = desenha bloom + nucleo do anel */ --bn-ring-bloom: 0.9; /* opacidade do bloom (x --bn-ring-glow). Mesa e calma: .6 */ --bn-drop-shadow: rgba(0, 0, 0, 0.60); --bn-drop-caustic-alpha: 1; --bn-drop-halo-alpha: 1; color-scheme: dark; color: var(--bn-ink); } /* ========================================================================== TOKENS DE PAPEL · CREME (folhas editoriais inset sobre a noite) ========================================================================== */ .bn-surface-cream { --bn-bg: var(--bn-cream); --bn-bg-hsl: var(--bn-cream-hsl); --bn-panel: var(--bn-bone); --bn-panel-hsl: var(--bn-bone-hsl); --bn-panel-2: var(--bn-cream-2); --bn-panel-2-hsl: var(--bn-cream-2-hsl); --bn-ink: var(--bn-charcoal); --bn-ink-hsl: var(--bn-charcoal-hsl); --bn-ink-2: var(--bn-mute-deep); --bn-ink-2-hsl: var(--bn-mute-deep-hsl); --bn-ink-3: var(--bn-cream-ink-3); --bn-ink-3-hsl: var(--bn-cream-ink-3-hsl); --bn-line: var(--bn-cream-line); --bn-line-solid: var(--bn-cream-line); --bn-line-hsl: var(--bn-cream-line-hsl); --bn-line-strong: var(--bn-cream-line-strong); --bn-line-strong-solid: var(--bn-cream-line-strong); --bn-line-strong-hsl: var(--bn-cream-line-strong-hsl); --bn-glass: rgba(255, 254, 250, 0.78); --bn-glass-fallback: rgba(255, 254, 250, 0.94); --bn-tag: var(--bn-night-tag); --bn-scrim: rgba(248, 244, 236, 0.92); --bn-hover: hsl(var(--bn-charcoal-hsl) / 0.05); --bn-pressed: hsl(var(--bn-charcoal-hsl) / 0.09); --bn-cta-bg: var(--bn-forest); --bn-cta-bg-hsl: var(--bn-forest-hsl); --bn-cta-bg-hover: var(--bn-forest-deep); --bn-cta-bg-hover-hsl: var(--bn-forest-deep-hsl); --bn-cta-ink: var(--bn-bone); --bn-cta-ink-hsl: var(--bn-bone-hsl); --bn-cta-accent-bg: var(--bn-terracotta); --bn-cta-accent-bg-hsl: var(--bn-terracotta-hsl); --bn-cta-accent-bg-hover: var(--bn-terracotta-hover); --bn-cta-accent-bg-hover-hsl: var(--bn-terracotta-hover-hsl); --bn-cta-accent-ink: var(--bn-night); --bn-cta-accent-ink-hsl: var(--bn-night-hsl); --bn-link: var(--bn-forest); --bn-link-hsl: var(--bn-forest-hsl); --bn-link-underline: hsl(var(--bn-forest-hsl) / 0.40); --bn-focus: var(--bn-forest); --bn-focus-hsl: var(--bn-forest-hsl); --bn-shadow-focus: var(--bn-shadow-focus-cream); --bn-shadow-float: var(--bn-shadow-lg); --bn-state-success: var(--bn-success-deep); --bn-state-success-hsl: var(--bn-success-deep-hsl); --bn-state-warning: var(--bn-warning-deep); --bn-state-warning-hsl: var(--bn-warning-deep-hsl); --bn-state-error: var(--bn-error-deep); --bn-state-error-hsl: var(--bn-error-deep-hsl); --bn-state-info: var(--bn-info-deep); --bn-state-info-hsl: var(--bn-info-deep-hsl); --bn-tone-passeio: var(--bn-deep-passeio); --bn-tone-passeio-hsl: var(--bn-deep-passeio-hsl); --bn-tone-banho: var(--bn-deep-banho); --bn-tone-banho-hsl: var(--bn-deep-banho-hsl); --bn-tone-calma: var(--bn-deep-calma); --bn-tone-calma-hsl: var(--bn-deep-calma-hsl); --bn-tone-boca: var(--bn-deep-boca); --bn-tone-boca-hsl: var(--bn-deep-boca-hsl); --bn-tone-barriga: var(--bn-deep-barriga); --bn-tone-barriga-hsl: var(--bn-deep-barriga-hsl); --bn-tone-mesa: var(--bn-deep-mesa); --bn-tone-mesa-hsl: var(--bn-deep-mesa-hsl); --bn-tone-cuidados: var(--bn-deep-cuidados); --bn-tone-cuidados-hsl: var(--bn-deep-cuidados-hsl); --bn-tone-neutral: var(--bn-forest); --bn-tone-neutral-hsl: var(--bn-forest-hsl); --bn-tone: var(--bn-tone-neutral); --bn-tone-hsl: var(--bn-tone-neutral-hsl); --bn-tone-text: var(--bn-charcoal); --bn-field-hsl: var(--bn-sage-hsl); --bn-field-alpha: 0.55; --bn-glow-strength: 0.22; /* no creme o glow vira mancha de aquarela */ --bn-glow-level: 0.45; --bn-glow-boost: 1; --bn-glow-at: 100% 100%; --bn-ring-track-alpha: 0.18; --bn-ring-glow: 0; --bn-drop-shadow: rgba(122, 92, 66, 0.22); /* sombra terrosa (charcoal lia como faixa fria sob a caustica) */ --bn-drop-caustic-alpha: 0.7; --bn-drop-halo-alpha: 0; color-scheme: light; color: var(--bn-ink); } /* ========================================================================== PAINEL ASSINATURA DA MARCA · forest-deep na noite (1 por pagina) Texto secundario vira ink (ink-2 mede 4.06:1 aqui); a continuacao 2 tons usa ink-2. Sem glow de colecao, sem glass. O componente pinta com --bn-panel. ========================================================================== */ .bn-panel--brand { --bn-panel: var(--bn-night-brand); --bn-panel-hsl: var(--bn-night-brand-hsl); --bn-panel-2: var(--bn-night-brand-2); --bn-panel-2-hsl: var(--bn-night-brand-2-hsl); --bn-ink: var(--bn-night-ink); --bn-ink-hsl: var(--bn-night-ink-hsl); --bn-ink-2: var(--bn-night-ink); --bn-ink-2-hsl: var(--bn-night-ink-hsl); --bn-ink-3: var(--bn-night-ink-2); --bn-ink-3-hsl: var(--bn-night-ink-2-hsl); --bn-line: var(--bn-night-brand-line); --bn-line-solid: var(--bn-night-brand-line-solid); --bn-line-hsl: var(--bn-night-brand-line-solid-hsl); --bn-line-strong: var(--bn-night-brand-line-strong); --bn-line-strong-solid: var(--bn-night-brand-line-strong-solid); --bn-line-strong-hsl: var(--bn-night-brand-line-strong-solid-hsl); --bn-hover: hsl(var(--bn-night-ink-hsl) / 0.08); --bn-tone-neutral: var(--bn-night-ink); --bn-tone-neutral-hsl: var(--bn-night-ink-hsl); --bn-tone: var(--bn-night-ink); --bn-tone-hsl: var(--bn-night-ink-hsl); --bn-tone-text: var(--bn-night-ink); --bn-glow-strength: 0; --bn-ring-glow: 0; color: var(--bn-ink); } /* ========================================================================== TOM LOCAL POR COLECAO · [data-col] (so tokens; resolve glow na noite, deep no creme) Componentes usam SO: --bn-tone, --bn-tone-hsl, --bn-tone-text, --bn-field-hsl (+ --bn-field-alpha) ========================================================================== */ [data-col="passeio"] { --bn-tone: var(--bn-tone-passeio); --bn-tone-hsl: var(--bn-tone-passeio-hsl); --bn-tone-text: var(--bn-tone-passeio); --bn-field-hsl: var(--bn-col-passeio-hsl); --bn-field-alpha: var(--bn-field-alpha-passeio); } [data-col="banho"] { --bn-tone: var(--bn-tone-banho); --bn-tone-hsl: var(--bn-tone-banho-hsl); --bn-tone-text: var(--bn-tone-banho); --bn-field-hsl: var(--bn-col-banho-hsl); --bn-field-alpha: var(--bn-field-alpha-banho); } [data-col="calma"] { --bn-tone: var(--bn-tone-calma); --bn-tone-hsl: var(--bn-tone-calma-hsl); --bn-tone-text: var(--bn-tone-calma); --bn-field-hsl: var(--bn-col-calma-hsl); --bn-field-alpha: var(--bn-field-alpha-calma); --bn-ring-bloom: 0.6; } [data-col="boca"] { --bn-tone: var(--bn-tone-boca); --bn-tone-hsl: var(--bn-tone-boca-hsl); --bn-tone-text: var(--bn-tone-boca); --bn-field-hsl: var(--bn-col-boca-hsl); --bn-field-alpha: var(--bn-field-alpha-boca); } [data-col="barriga"] { --bn-tone: var(--bn-tone-barriga); --bn-tone-hsl: var(--bn-tone-barriga-hsl); --bn-tone-text: var(--bn-tone-barriga); --bn-field-hsl: var(--bn-col-barriga-hsl); --bn-field-alpha: var(--bn-field-alpha-barriga); } [data-col="mesa"] { --bn-tone: var(--bn-tone-mesa); --bn-tone-hsl: var(--bn-tone-mesa-hsl); --bn-tone-text: var(--bn-ink); /* Mesa Natural: rotulo sempre em ink (lime nunca texto) */ --bn-field-hsl: var(--bn-col-mesa-hsl); --bn-field-alpha: var(--bn-field-alpha-mesa); --bn-ring-bloom: 0.6; } [data-col="cuidados"] { --bn-tone: var(--bn-tone-cuidados); --bn-tone-hsl: var(--bn-tone-cuidados-hsl); --bn-tone-text: var(--bn-tone-cuidados); --bn-field-hsl: var(--bn-col-cuidados-hsl); --bn-field-alpha: var(--bn-field-alpha-cuidados); } [data-glow="hero"] { --bn-glow-level: 1; } [data-glow="soft"] { --bn-glow-level: 0.45; } [data-glow-at="br"] { --bn-glow-at: 100% 100%; } [data-glow-at="r"] { --bn-glow-at: 100% 50%; } /* sem boost no hover (arco cuidados cai a 2.73:1) */ [data-glow-at="tr"] { --bn-glow-at: 100% 0%; } [data-glow-at="c"] { --bn-glow-at: 50% 50%; } /* so no dial: texto sobre o campo em ink */ /* ========================================================================== MOVIMENTO REDUZIDO — zera movimento ambiente e de entrada ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --bn-dur-count: 0ms; --bn-dur-ring: 0ms; --bn-stagger-ring: 0ms; --bn-dur-drop-float: 0ms; --bn-drop-float-y: 0px; --bn-dur-hud-rise: 0ms; --bn-dur-hud-hold: 0ms; --bn-dur-hud-fall: 0ms; --bn-dur-typing: 0ms; --bn-reveal-y: 0px; } } /* ========================================================================== BASE · chao noturno por padrao (em @layer: estilos do projeto vencem) ========================================================================== */ @layer bn-base { html { background-color: var(--bn-night); color-scheme: dark; } body { background-color: var(--bn-bg); color: var(--bn-ink); font-family: var(--bn-font-body); font-size: var(--bn-fs-body); line-height: var(--bn-lh-body); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: hsl(var(--bn-sage-hsl) / 0.32); /* v1.1: sai do ambar (ambar fica restrito a gota/HUD/rodape) */ color: inherit; } } /* Opt-in SEM camada: vence preflight/base de Tailwind e shadcn. */ body.bn-body { background-color: var(--bn-bg); color: var(--bn-ink); font-family: var(--bn-font-body); font-size: var(--bn-fs-body); line-height: var(--bn-lh-body); }