/* ============================================ Bernard Barbearia · App — Design Tokens Extraídos do Figma "App Bernard / 04 Home" (node 129:2). Ordem de carga: tokens → base → components. ARQUITETURA DE TEMA (Wave Pré-Lançamento) Camada dupla, pronta pra light mode futuro: 1. `:root` expõe os tokens SEMÂNTICOS que o resto do CSS consome (--bg-base, --white, --accent, ...). Eles apenas APONTAM pro tema ativo. 2. `:root, [data-theme="dark"]` define os VALORES reais do tema escuro (sufixo -dark). Quando criar `[data-theme="light"]` no futuro, basta definir os valores -light lá e remapear os semânticos dentro do bloco light. Trocar de tema = trocar o atributo data-theme no , sem mexer no resto. ============================================ */ :root { /* --- Tokens semânticos (lidos pelo resto do CSS) — apontam pro tema ativo --- */ /* Cores da marca */ --bg-base: var(--bg-base-dark); --bg-pure: var(--bg-pure-dark); --bg-card: var(--bg-card-dark); --accent: var(--accent-dark); --accent-rgb: var(--accent-rgb-dark); --warm-gray: var(--warm-gray-dark); --faint: var(--faint-dark); --white: var(--white-dark); --off-white: var(--off-white-dark); --glow: var(--glow-dark); /* Superfícies translúcidas (cards sobre o fundo) */ --surface: var(--surface-dark); --surface-borda: var(--surface-borda-dark); --surface-borda-suave: var(--surface-borda-suave-dark); --thumb-tint: var(--thumb-tint-dark); /* Card "glass" (sem refração — fill + borda leves) */ --card-fill: var(--card-fill-dark); --card-borda: var(--card-borda-dark); --card-fill-destaque: var(--card-fill-destaque-dark); /* Tints brancos pontuais (chips, ícones, trilhos) */ --tint-fraca: var(--tint-fraca-dark); --tint-media: var(--tint-media-dark); --tint-forte: var(--tint-forte-dark); /* Superfícies sólidas específicas */ --nav-bg: var(--nav-bg-dark); --toast-bg: var(--toast-bg-dark); /* Cores funcionais (status, marcas externas) */ --verde-pago: var(--verde-pago-dark); --verde-pago-bg: var(--verde-pago-bg-dark); --ambar-pendente: var(--ambar-pendente-dark); --ambar-pendente-bg: var(--ambar-pendente-bg-dark); --ambar-atencao: var(--ambar-atencao-dark); --ambar-atencao-borda: var(--ambar-atencao-borda-dark); --ambar-atencao-bg: var(--ambar-atencao-bg-dark); --whatsapp: var(--whatsapp-dark); --whatsapp-texto: var(--whatsapp-texto-dark); } /* ============================================ Tema ESCURO — valores reais (default) ============================================ */ :root, [data-theme="dark"] { --bg-base-dark: #0A0908; /* fundo imersivo */ --bg-pure-dark: #000000; --bg-card-dark: #181410; /* fundo sólido do card de plano (sem textura) */ --accent-dark: #E03134; /* vermelho da marca */ --accent-rgb-dark: 224, 49, 52; /* para usar em rgba() */ --warm-gray-dark: #A8A29A; /* texto secundário */ --faint-dark: #847F76; /* texto terciário / desabilitado — 5.0:1 sobre --bg-base-dark (WCAG AA) */ --white-dark: #FFFFFF; --off-white-dark: #FEFDFD; /* branco "quente" da identidade */ --glow-dark: #E8C9A0; /* halo quente */ --surface-dark: rgba(255, 255, 255, 0.05); --surface-borda-dark: rgba(255, 255, 255, 0.09); --surface-borda-suave-dark: rgba(255, 255, 255, 0.08); --thumb-tint-dark: rgba(232, 201, 160, 0.04); /* véu quente sobre as fotos */ /* Card glass leve (decisão Wave Pré-Lançamento: fill 6% + borda 8%, sem blur) */ --card-fill-dark: rgba(255, 255, 255, 0.06); --card-borda-dark: rgba(255, 255, 255, 0.08); --card-fill-destaque-dark: rgba(255, 255, 255, 0.09); --tint-fraca-dark: rgba(255, 255, 255, 0.06); --tint-media-dark: rgba(255, 255, 255, 0.10); --tint-forte-dark: rgba(255, 255, 255, 0.16); --nav-bg-dark: #0F0D0B; --toast-bg-dark: #1B1916; --verde-pago-dark: #6FD89A; --verde-pago-bg-dark: rgba(61, 168, 111, 0.16); --ambar-pendente-dark: #E8C9A0; --ambar-pendente-bg-dark: rgba(232, 201, 160, 0.14); --ambar-atencao-dark: #E6A23C; --ambar-atencao-borda-dark: rgba(230, 162, 60, 0.45); --ambar-atencao-bg-dark: rgba(230, 162, 60, 0.10); --whatsapp-dark: #25D366; --whatsapp-texto-dark: #06351A; } /* ============================================ Tema CLARO — valores reais + remap dos semânticos Paleta quente (off-white + ink quente) pra manter a alma da marca. O token --white é "texto primário": no claro ele vira INK escuro. Texto sobre superfície vermelha é tratado à parte (ver components.css). ============================================ */ [data-theme="light"] { --bg-base-light: #F6F3EF; /* off-white quente */ --bg-pure-light: #FFFFFF; --bg-card-light: #FFFFFF; --accent-light: #D22B2E; /* vermelho um tom mais fechado p/ contraste */ --accent-rgb-light: 210, 43, 46; --warm-gray-light: #6E655C; /* texto secundário */ --faint-light: #736858; /* terciário — 4.9:1 sobre --bg-base-light (WCAG AA) */ --white-light: #1B1613; /* = texto primário (ink) no claro */ --off-white-light: #241E19; --glow-light: #E8C9A0; --surface-light: rgba(28, 22, 18, 0.045); --surface-borda-light: rgba(28, 22, 18, 0.12); --surface-borda-suave-light: rgba(28, 22, 18, 0.09); --thumb-tint-light: rgba(120, 90, 50, 0.05); --card-fill-light: #FFFFFF; --card-borda-light: rgba(28, 22, 18, 0.09); --card-fill-destaque-light: #FFFFFF; --tint-fraca-light: rgba(28, 22, 18, 0.045); --tint-media-light: rgba(28, 22, 18, 0.09); --tint-forte-light: rgba(28, 22, 18, 0.16); --nav-bg-light: #FFFFFF; --toast-bg-light: #241E19; /* toast escuro (contraste no claro) */ --verde-pago-light: #1E9E5A; --verde-pago-bg-light: rgba(30, 158, 90, 0.14); --ambar-pendente-light: #B07A1E; --ambar-pendente-bg-light: rgba(176, 122, 30, 0.14); --ambar-atencao-light: #B07A1E; --ambar-atencao-borda-light: rgba(176, 122, 30, 0.40); --ambar-atencao-bg-light: rgba(176, 122, 30, 0.10); --whatsapp-light: #1DA851; --whatsapp-texto-light: #FFFFFF; /* remap dos semânticos p/ o tema claro */ --bg-base: var(--bg-base-light); --bg-pure: var(--bg-pure-light); --bg-card: var(--bg-card-light); --accent: var(--accent-light); --accent-rgb: var(--accent-rgb-light); --warm-gray: var(--warm-gray-light); --faint: var(--faint-light); --white: var(--white-light); --off-white: var(--off-white-light); --glow: var(--glow-light); --surface: var(--surface-light); --surface-borda: var(--surface-borda-light); --surface-borda-suave: var(--surface-borda-suave-light); --thumb-tint: var(--thumb-tint-light); --card-fill: var(--card-fill-light); --card-borda: var(--card-borda-light); --card-fill-destaque: var(--card-fill-destaque-light); --tint-fraca: var(--tint-fraca-light); --tint-media: var(--tint-media-light); --tint-forte: var(--tint-forte-light); --nav-bg: var(--nav-bg-light); --toast-bg: var(--toast-bg-light); --verde-pago: var(--verde-pago-light); --verde-pago-bg: var(--verde-pago-bg-light); --ambar-pendente: var(--ambar-pendente-light); --ambar-pendente-bg: var(--ambar-pendente-bg-light); --ambar-atencao: var(--ambar-atencao-light); --ambar-atencao-borda: var(--ambar-atencao-borda-light); --ambar-atencao-bg: var(--ambar-atencao-bg-light); --whatsapp: var(--whatsapp-light); --whatsapp-texto: var(--whatsapp-texto-light); } :root { /* --- Tipografia --- */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* --- Espaçamento --- */ --gutter: 16px; /* margem lateral do app (Figma) */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* --- Raios --- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 16px; --radius-pill: 999px; /* --- Layout --- */ --app-max: 480px; /* mobile-first: base 375, OK até 480 */ --app-max-tablet: 860px; /* tablet: desktop compacto, sem cara de celular esticado */ --nav-altura: 72px; /* --- Breakpoints (auditoria responsivo 2026-07-02) --- Tablet ganha coluna própria com bottom nav mais larga — desktop troca bottom nav por sidebar fixa (ver Figma "Desktop · Piloto") e libera a coluna de conteúdo pra 640px. */ --bp-tablet: 768px; --bp-desktop: 1024px; --sidebar-largura: 260px; --sidebar-largura-colapsada: 84px; --coluna-desktop: 640px; /* largura padrão das telas com sidebar (listas/forms) */ /* --- Alvos de toque (auditoria UI/UX 2026-07-01) --- Todo elemento interativo novo deve puxar daqui, não inventar um px solto. --tap-min é o piso recomendado (Apple HIG / Material) pra qualquer botão tocado com frequência (voltar, ações primárias). --tap-compact só serve pra ações secundárias lado a lado (ex. Remarcar/Cancelar) onde 44px empurraria demais o layout — nunca abaixo de 40px. */ --tap-min: 44px; --tap-compact: 40px; /* --- Escala de z-index (auditoria UI/UX 2026-07-01) --- Os valores já em uso formavam uma hierarquia coerente, só sem nome — nomeei em vez de trocar números, pra não arriscar quebrar empilhamento que já funciona. Todo z-index NOVO deve puxar um destes, nunca um número solto (ordem: fundo < rodapé fixo < nav < overlay-carregando < toast < modal < overlay-crítico). */ --z-fundo: -1; --z-rodape-fixo: 10; --z-nav: 20; --z-overlay-carregando: 50; --z-toast: 100; --z-modal: 200; --z-overlay-critico: 300; /* --- Movimento --- */ --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); }