/* ============================================================================= SWEET FERRON — DESIGN TOKENS Floricultura + Cestas de Presente · Capão da Canoa / RS v1.1 · Julho 2026 — PALETA RE-ANCORADA NO LOGO REAL O vinho saiu (não existe no logo). A assinatura da marca é o marrom do script. Ver DESIGN-SYSTEM.md §1 (revisão) e §1.4 (contraste recalculado). ----------------------------------------------------------------------------- REGRA-MÃE: nenhum valor hex, px de espaçamento, raio ou sombra pode existir fora deste arquivo. Componentes consomem tokens. Campanhas sazonais sobrescrevem APENAS os tokens do bloco [THEME CONTRACT]. Ver DESIGN-SYSTEM.md §8. ============================================================================= */ /* ----------------------------------------------------------------------------- 0. FONTES — SELF-HOSTED, ZERO CDN Coloque os .woff2 (subset latin) em ./fonts/. Se os arquivos NÃO existirem, a página continua correta: as pilhas de fallback são desenhadas pra segurar a marca sozinhas (Georgia carrega o serifado; system-ui carrega o corpo). Baixar: Playfair Display (OFL), Nunito Sans (OFL), Parisienne (OFL). -------------------------------------------------------------------------- */ @font-face { font-family: "Playfair Display"; src: url("./fonts/playfair-display-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122; } @font-face { font-family: "Playfair Display"; src: url("./fonts/playfair-display-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122; } @font-face { font-family: "Nunito Sans"; src: url("./fonts/nunito-sans-latin-var.woff2") format("woff2-variations"); font-weight: 300 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122; } @font-face { font-family: "Parisienne"; src: url("./fonts/parisienne-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; } :root { /* ========================================================================== 1. CORES — PRIMITIVAS (nunca use direto em componente; use as semânticas) ========================================================================== */ /* -------------------------------------------------------------------------- PROVENIÊNCIA: toda cor abaixo foi amostrada do LOGO REAL (logo-sweet-ferron.jpg, 518×518). Os cantos escuros do arquivo são vinheta do recorte da foto de perfil — NÃO são cor de marca e foram descartados. Âncoras medidas: campo creme #FCF4E6 · script "Sweet Ferron" #9C7B61 taupe do círculo tracejado #A08A70 · asa da abelha #D9BC91 -------------------------------------------------------------------------- */ /* 1.1 CREME / BEGE — o campo do logo. É a "pele" da marca. ~75% dos pixels. */ --c-cream-50: #FFFBF3; /* superfície de card — um degrau acima do campo */ --c-cream-100: #FCF4E6; /* ✱ O CREME DO LOGO — fundo padrão da página */ --c-cream-200: #F6EBD6; /* seção alternada */ --c-cream-300: #EADCC2; /* borda suave, divisor */ --c-cream-400: #D9C6A6; /* borda visível, placeholder */ /* 1.2 MARROM / TAUPE — ✱ A ASSINATURA DA MARCA. É o script e o círculo do logo. Esta família substitui o vinho. O degrau 700 é o cavalo de batalha: é o único que é, ao mesmo tempo, texto no creme (7.58:1) e fundo de barra com texto creme por cima (7.58:1). Ver DESIGN-SYSTEM.md §1.4. */ --c-brown-50: #F5EEE7; /* wash de badge */ --c-brown-100: #E9DED2; /* fundo suave */ --c-brown-200: #D5C4B2; /* borda */ --c-brown-300: #BCA792; /* divisor / tracejado do logo */ --c-brown-400: #A08A70; /* ✱ TAUPE DO LOGO (círculo tracejado) */ --c-brown-500: #9C7B61; /* ✱ O SCRIPT DO LOGO — fill/ornamento. ✗ não é texto */ --c-brown-600: #7C614C; /* hover */ --c-brown-700: #634936; /* ✱ AUTORIDADE — barra, heading, preço, foco */ --c-brown-800: #4C3729; /* fundo inverso (rodapé), pressed */ --c-brown-900: #38281D; /* marrom mais fundo */ /* 1.3 OURO / MEL ANTIGO — o contorno da abelha. SÓ ORNAMENTO. O ouro real do logo é mel/âmbar envelhecido (#D9BC91), NÃO um mostarda saturado. Os degraus claros (300/400) são a cor honesta da asa; os escuros (600/700) existem porque ouro claro não alcança contraste — são o mesmo matiz, só legíveis. ✗ Nunca fundo de botão. ✗ Nunca texto claro. */ --c-gold-200: #F0E3C9; /* highlight */ --c-gold-300: #E6D0A8; /* ✓ anel de foco SOBRE fundo escuro/verde */ --c-gold-400: #D9BC91; /* ✱ A ASA DA ABELHA — fill decorativo */ --c-gold-500: #C2A06B; /* mel médio — fill/detalhe. ✗ fraco como borda */ --c-gold-600: #A9834A; /* ✓ BORDA que precisa ser vista (3.37:1) */ --c-gold-700: #8C652C; /* ✓ ÚNICO ouro legível como TEXTO no creme (5.07:1) */ --c-gold-900: #4A3712; /* ouro queimado — texto sobre ouro claro */ /* 1.4 VERDE WHATSAPP — RESERVADO. Só transação. Nunca decoração. INTOCADO. */ --c-wa-400: #4ADE80; /* glow / anel de foco sobre verde */ --c-wa-500: #25D366; /* ✱ VERDE OFICIAL — ícone, brilho, borda, hover */ --c-wa-600: #0A7F3E; /* ✓ FUNDO DO BOTÃO (branco = 5.10:1, AA) */ --c-wa-700: #076B33; /* pressed */ /* 1.5 TINTA / NEUTROS — marrom-quente, nunca cinza-azulado (esfria a marca) */ --c-ink-900: #2B211B; /* texto principal (14.39:1 no creme novo — AAA) */ --c-ink-700: #4A3B31; /* heading secundário (10.37:1 — AAA) */ --c-ink-500: #6B5B4E; /* texto de apoio (5.95:1 — AA) */ --c-ink-300: #9C8B7D; /* ✗ NÃO usar como texto. Só ícone decorativo/borda. */ --c-white: #FFFFFF; /* 1.6 ALIASES DEPRECADOS — ⚠️ NÃO USE EM CÓDIGO NOVO. O vinho NÃO existe no logo (nem uma gota). Ele veio da barra do site antigo. Foi substituído pelo marrom do script. Estes nomes sobrevivem só como ponte: nenhum consumidor real restou (components.css e index.html consomem apenas a camada semântica do §2 — verificado por grep), então podem ser removidos na próxima varredura sem risco. Mantidos para não quebrar tema sazonal em rascunho. REMOVER EM: v1.2. */ --c-wine-100: var(--c-brown-50); /* @deprecated → --c-brown-50 */ --c-wine-500: var(--c-brown-600); /* @deprecated → --c-brown-600 */ --c-wine-600: var(--c-brown-700); /* @deprecated → --c-brown-700 */ --c-wine-800: var(--c-brown-800); /* @deprecated → --c-brown-800 */ /* 1.7 PROIBIDO #FF0004 — vermelho do catálogo Cardápio Web. Estoura o bege e transforma "artesanal afetivo" em "liquidação". Se aparecer no CSS da LP, é bug. #C9A227 — o antigo "dourado da marca". Mostarda saturado que nunca esteve no logo; além disso media 2.34:1 como borda (reprova o mínimo 3:1 de não-texto). #8C2437 — o antigo "vinho da marca". Não existe no logo. Ver §1.6. Ver DESIGN-SYSTEM.md §9 (lint). ========================================================================== */ /* ========================================================================== 2. CORES — SEMÂNTICAS (é isto que o componente consome) ========================================================================== */ --bg-page: var(--c-cream-100); --bg-surface: var(--c-cream-50); --bg-surface-alt: var(--c-cream-200); --bg-inverse: var(--c-brown-800); /* rodapé — creme por cima 10.19:1 */ --text-strong: var(--c-ink-900); --text-default: var(--c-ink-700); --text-muted: var(--c-ink-500); --text-on-inverse: var(--c-cream-100); --text-price: var(--c-brown-700); /* 8.02:1 no card — AAA */ --border-subtle: var(--c-cream-300); --border-strong: var(--c-cream-400); /* border-accent marca o card de preço EM DESTAQUE = informação, não enfeite. Por isso precisa de 3:1. gold-600 = 3.37:1. (O antigo gold-500 dava 2.34:1 e reprovava — era um bug silencioso.) */ --border-accent: var(--c-gold-600); /* ornament vira ESTRELA de depoimento e ÍCONE da barra de confiança — carrega significado, então respeita 4.5:1 como texto. gold-700 = 5.07:1. */ --ornament: var(--c-gold-700); /* abelha, filete, aspas, divisor */ --focus-ring: var(--c-brown-700); /* 7.58:1 no creme — bem visível */ --focus-ring-inverse: var(--c-gold-300); /* sobre marrom (5.5:1) e verde (3.39:1) */ /* ========================================================================== 3. TIPOGRAFIA ========================================================================== */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Script: SÓ pro eco do logo (assinatura da Hevelin, 1 palavra por seção). Nunca em headline, nunca em botão, nunca abaixo de 20px. Baixa legibilidade. */ --font-script: "Parisienne", "Segoe Script", cursive; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* Escala fluida — mobile-first. min = 360px, max = 1280px. */ --fs-xs: 0.8125rem; /* 13px — legal/nota */ --fs-sm: 0.875rem; /* 14px — label */ --fs-base: 1rem; /* 16px — corpo (piso)*/ --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem); /* 17→18 — lead */ --fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20→24 — h3 */ --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24→32 — h2 */ --fs-2xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem); /* 28→44 — h1 mobile */ --fs-3xl: clamp(2rem, 1.5rem + 2.4vw, 3.5rem); /* 32→56 — hero desk */ --lh-tight: 1.12; /* h1/h2 display */ --lh-snug: 1.28; /* h3, títulos de card */ --lh-normal: 1.5; /* corpo — piso de leitura confortável */ --lh-loose: 1.65; /* parágrafos longos (FAQ) */ --ls-tight: -0.015em; --ls-normal: 0; --ls-wide: 0.06em; /* eyebrow / caps */ --measure: 62ch; /* largura máxima de linha de texto corrido */ /* ========================================================================== 4. ESPAÇAMENTO — base 4px ========================================================================== */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ --sp-24: 6rem; /* 96 */ /* Ritmo de seção (o único espaçamento que muda por breakpoint) */ --section-y: var(--sp-12); /* 48 mobile → 80 desktop (ver §breakpoints) */ --gutter: var(--sp-4); /* 16 mobile → 24 desktop */ --container: 72rem; /* 1152px */ --container-narrow: 44rem; /* 704px — blocos de leitura */ /* Alvos de toque — piso WCAG 2.5.5 = 44px. Casa = 48px. */ --touch-min: 44px; --touch-house: 48px; --touch-cta: 56px; /* botão WhatsApp principal */ --touch-gap: var(--sp-2); /* distância mínima entre 2 alvos */ /* ========================================================================== 5. RAIOS — arredondado e macio (marca afetiva, nada de canto reto) ========================================================================== */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; /* card de ocasião */ --r-lg: 16px; /* card de preço, imagem */ --r-xl: 24px; /* hero, seções destacadas */ --r-pill: 999px; /* botão, badge — TODOS os CTAs são pill */ --r-circle: 50%; /* ========================================================================== 6. SOMBRAS — tinta marrom, nunca preto puro (preto suja o creme) ========================================================================== */ --shadow-xs: 0 1px 2px rgba(43, 33, 27, 0.06); --shadow-sm: 0 2px 6px rgba(43, 33, 27, 0.08); --shadow-md: 0 6px 16px rgba(43, 33, 27, 0.10); --shadow-lg: 0 14px 32px rgba(43, 33, 27, 0.14); --shadow-cta: 0 6px 18px rgba(10, 127, 62, 0.30); /* aura do WhatsApp */ --shadow-cta-hover: 0 8px 24px rgba(37, 211, 102, 0.42); --shadow-sticky: 0 -6px 20px rgba(43, 33, 27, 0.16); /* barra de rodapé */ --inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.55); /* brilho de topo */ /* ========================================================================== 7. MOVIMENTO ========================================================================== */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ========================================================================== 8. ELEVAÇÃO (z-index) — nomeada, nunca número mágico ========================================================================== */ --z-base: 0; --z-raised: 10; --z-sticky-top: 100; /* barra de urgência + header */ --z-sticky-cta: 200; /* barra de CTA do rodapé — SEMPRE por cima */ --z-modal: 400; /* ========================================================================== 9. ALTURAS DE CHROME — usadas no cálculo do fold. Ver DESIGN-SYSTEM.md §5. ========================================================================== */ --h-urgency: 32px; /* teórico p/ barra NÃO-clicável */ --h-header: 52px; /* A .urgency é um → cai no piso de 44px do touch target (--touch-min), NÃO nos 32px de --h-urgency. Conta real: 44 (urgency) + 52 (topbar) = 96. */ --h-chrome: 96px; /* urgency(44) + header(52) */ --h-sticky-cta: 72px; /* + safe-area no componente */ /* ========================================================================== 10. [THEME CONTRACT] — ✱ OS ÚNICOS TOKENS QUE UMA CAMPANHA PODE SOBRESCREVER Clonar a LP pra Dia dos Pais/Namorados/Mães = criar theme-{campanha}.css redefinindo SÓ estas 8 linhas em [data-theme="..."]. Nada mais. Zero CSS novo. O verde do WhatsApp NÃO está aqui — é imutável por design. ========================================================================== */ --theme-accent: var(--c-brown-700); /* cor da campanha */ --theme-accent-hover: var(--c-brown-600); --theme-accent-contrast: var(--c-white); /* texto SOBRE o accent (8.28:1) */ --theme-accent-soft: var(--c-brown-50); /* fundo de badge/urgência suave */ --theme-urgency-bg: var(--c-brown-700); --theme-urgency-fg: var(--c-cream-100); /* 7.58:1 na barra — AAA */ /* Scrim INVERTIDO (16/07): o texto do hero mobile ancora no TOPO, então o escuro fica em cima e a cesta embaixo fica limpa — zero véu após ~58%. Trabalha em dupla com o escurecimento assado na própria foto mobile. */ --theme-hero-scrim: linear-gradient(180deg, rgba(43, 33, 27, 0.55) 0%, rgba(43, 33, 27, 0.42) 38%, rgba(43, 33, 27, 0.00) 58%); --theme-ornament-glyph: "\1F41D"; /* 🐝 abelha (base). ❤ Namorados. */ } /* ----------------------------------------------------------------------------- BREAKPOINTS — mobile-first. Só 2 coisas escalam: ritmo e gutter. sm 480 · md 768 · lg 1024 · xl 1280 (Custom media queries não têm suporte nativo — os valores estão hardcoded aqui de propósito, e SÓ aqui. Nenhum componente escreve media query própria com número solto; usa as classes utilitárias/queries desta folha.) -------------------------------------------------------------------------- */ @media (min-width: 768px) { :root { --section-y: var(--sp-16); /* 64 */ --gutter: var(--sp-6); /* 24 */ --h-header: 64px; --h-chrome: 108px; /* urgency(44, piso touch) + header(64) */ } } @media (min-width: 1024px) { :root { --section-y: var(--sp-20); /* 80 */ --gutter: var(--sp-8); /* 32 */ } } /* ----------------------------------------------------------------------------- EXEMPLO DE TEMA SAZONAL (copie pra theme-namorados.css — 8 linhas, mais nada) -------------------------------------------------------------------------- */ /* [data-theme="namorados"] { --theme-accent: #B31942; --theme-accent-hover: #C93A5D; --theme-accent-contrast: #FFFFFF; --theme-accent-soft: #FBE3E9; --theme-urgency-bg: #7A0F2B; --theme-urgency-fg: #FDF2F4; --theme-hero-scrim: linear-gradient(180deg, rgba(58,10,24,.20), rgba(58,10,24,.85)); --theme-ornament-glyph: "\2764"; } */ /* ----------------------------------------------------------------------------- MOVIMENTO REDUZIDO — global, não negociável -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }