/* ========================================================================= CAFÉ COM PIZZA — DESIGN TOKENS Etapa 1 do redesign (ver PLANO-LAYOUT.md). A base é o design system do projeto RASTREIO (C:\CLIENTES\RASTREIO\apps\web\src\app\globals.css): paleta vinho + areia, Inter, raio 0.75rem, gradiente 135° na primária, foco com anel e offset. Os valores são guardados como TRIPLA HSL, igual lá — não como hex. É o que permite `hsl(var(--primary) / .1)` para o item selecionado do dropdown e para qualquer véu translúcido, sem precisar de um segundo token. Mostarda #FDBA23 primária (da logo) Deep Wine #340912 texto (claro) / fundo (escuro) Warm Sand #80624D texto de apoio Champagne #ECE4D9 superfícies suaves White Alabaster #F8F6F1 fundo (claro) ─── ONDE NOS AFASTAMOS DO RASTREIO, E POR QUÊ ────────────────────────── 1. `--input` lá tem o mesmo valor de `--border` (1,31:1 contra o fundo). Serve de divisor, não de contorno de campo — o critério WCAG 1.4.11 pede 3:1. Aqui `--contorno-controle` é um token à parte, medido. 2. A mostarda é CLARA, e isso mudou várias regras: texto branco sobre ela dá 1,72:1 e está proibido — o que vai por cima é o vinho profundo. E ela não serve de texto sobre superfície clara, daí --primary-text e --ring existirem em versão escurecida e medida. 3. O tema é trocado por `data-tema="escuro"` no , não pela classe `.dark` — o carimbo vem do trecho inline do , antes da primeira pintura, e evita o flash. ========================================================================= */ /* ========================================================================= 1. TEMA CLARO — os valores padrão ========================================================================= */ :root { color-scheme: light; /* ---- superfícies e texto ---- */ --background: 37 36% 96%; /* #F8F6F1 */ --foreground: 348 70% 12%; /* #340912 · 16,29:1 sobre o fundo */ --card: 38 45% 99%; /* #FEFDFB */ --card-foreground: 348 70% 12%; --muted: 34 34% 89%; /* #ECE4D9 */ --muted-foreground: 25 25% 40%; /* #80624D · 5,15:1 sobre o fundo */ /* ---- primária: a MOSTARDA da logo ---- Era o vinho do RASTREIO; virou a mostarda a pedido. A consequência que manda no resto: mostarda é CLARA. Texto branco sobre ela dá 1,72:1 e está proibido; o que vai por cima é o vinho profundo. E ela não serve de texto sobre superfície clara — daí --primary-text e --ring, que são versões escurecidas medidas. */ --primary: 41.6 98.2% 56.5%; /* #FDBA23 — o amarelo da fatia */ --primary-soft: 45 100% 66%; /* #FFD452 — ponta clara do degradê */ --primary-foreground: 348 40% 10%; /* #240F13 — 10,60:1 sobre a primária · 12,83:1 sobre a soft */ --primary-text: 36 92% 30%; /* #935B06 — 5,52:1 sobre o card */ /* ---- linhas ---- */ --border: 33 30% 84%; /* #E2D7CA · divisor decorativo */ --input: 33 30% 84%; --control: 30 18% 52%; /* #9B856F · contorno de campo, 3,46:1 */ --ring: 38 95% 38%; /* #BD7905 · 3,30:1 contra o fundo */ /* ---- semânticas ---- */ --success: 100 32% 28%; --success-foreground: 37 36% 96%; --warning: 30 80% 30%; --warning-foreground: 37 36% 96%; --danger: 358 70% 38%; --danger-foreground: 37 36% 96%; /* Apelidos antigos do acento. A mostarda virou a primária, então apontam para ela — mantidos só para não quebrar CSS já escrito. */ --accent: var(--primary); --accent-foreground: var(--primary-foreground); --accent-text: var(--primary-text); /* ---- forma ---- */ --radius: 0.75rem; /* 12px, como lá */ --radius-sm: calc(var(--radius) - 8px); --radius-md: calc(var(--radius) - 4px); --radius-lg: var(--radius); --radius-xl: 1rem; /* card = rounded-2xl */ --radius-full: 9999px; /* ---- sombra ---- */ --shadow-tint: 348 70% 12%; --shadow-sm: 0 1px 2px hsl(var(--shadow-tint) / .06), 0 1px 3px hsl(var(--shadow-tint) / .04); --shadow-md: 0 4px 12px hsl(var(--shadow-tint) / .08), 0 2px 4px hsl(var(--shadow-tint) / .04); --shadow-lg: 0 12px 28px hsl(var(--shadow-tint) / .12), 0 4px 8px hsl(var(--shadow-tint) / .06); --shadow-xl: 0 24px 56px hsl(var(--shadow-tint) / .16), 0 8px 16px hsl(var(--shadow-tint) / .08); /* ---- grão de farinha ---- Ruído gerado em SVG, sem imagem externa. Multiply no claro escurece minimamente; no escuro a mistura vira soft-light para não sujar. */ --grao-opacidade: .035; --grao-mistura: multiply; } /* ========================================================================= 2. TEMA ESCURO No RASTREIO a primária CLAREIA no escuro, porque ali ela também é cor de texto (link, item ativo) e precisa de contraste sobre o vinho profundo. ========================================================================= */ :root[data-tema="escuro"] { color-scheme: dark; --background: 348 40% 8%; /* #1D0C10 */ --foreground: 37 35% 92%; /* #F2ECE3 · 16,08:1 */ --card: 348 30% 12%; /* #281519 */ --card-foreground: 37 35% 92%; --muted: 345 20% 18%; /* #372529 */ --muted-foreground: 30 25% 68%; /* #C2AD99 · 8,03:1 sobre o card */ /* No escuro a mostarda já serve de texto (10,09:1 sobre o card), então a primária não precisa de versão separada — ao contrário do vinho, que precisava clarear. */ --primary: 41.6 98.2% 56.5%; /* #FDBA23 */ --primary-soft: 45 100% 66%; /* #FFD452 */ --primary-foreground: 348 40% 10%; /* #240F13 · 10,60:1 */ --primary-text: 41.6 98.2% 56.5%; /* 10,09:1 sobre o card */ --border: 345 18% 22%; /* #422E33 */ --input: 345 18% 22%; --control: 20 14% 46%; /* #867065 · 3,73:1 sobre o card */ --ring: 41.6 98.2% 56.5%; /* 10,99:1 contra o fundo escuro */ --success: 100 38% 58%; --success-foreground: 348 40% 8%; --warning: 35 80% 62%; --warning-foreground: 348 40% 8%; --danger: 358 80% 70%; --danger-foreground: 348 40% 8%; --shadow-tint: 0 0% 0%; --shadow-sm: 0 1px 2px hsl(var(--shadow-tint) / .5); --shadow-md: 0 4px 12px hsl(var(--shadow-tint) / .45), 0 2px 4px hsl(var(--shadow-tint) / .4); --shadow-lg: 0 12px 28px hsl(var(--shadow-tint) / .5), 0 4px 8px hsl(var(--shadow-tint) / .4); --shadow-xl: 0 24px 56px hsl(var(--shadow-tint) / .6), 0 8px 16px hsl(var(--shadow-tint) / .5); --grao-opacidade: .05; --grao-mistura: soft-light; } /* ========================================================================= 3. ATALHOS RESOLVIDOS O resto do CSS usa estes; a tripla fica reservada para quando se precisa de transparência — `hsl(var(--primary) / .1)`. ========================================================================= */ :root { --cor-fundo: hsl(var(--background)); --cor-texto: hsl(var(--foreground)); --cor-card: hsl(var(--card)); --cor-card-texto: hsl(var(--card-foreground)); --cor-suave: hsl(var(--muted)); --cor-suave-texto: hsl(var(--muted-foreground)); --cor-primaria: hsl(var(--primary)); --cor-primaria-clara: hsl(var(--primary-soft)); --cor-primaria-texto: hsl(var(--primary-foreground)); --cor-primaria-tipo: hsl(var(--primary-text)); /* primária COMO texto */ --cor-borda: hsl(var(--border)); --cor-controle: hsl(var(--control)); --cor-anel: hsl(var(--ring)); --cor-sucesso: hsl(var(--success)); --cor-sucesso-texto: hsl(var(--success-foreground)); --cor-atencao: hsl(var(--warning)); --cor-atencao-texto: hsl(var(--warning-foreground)); --cor-perigo: hsl(var(--danger)); --cor-perigo-texto: hsl(var(--danger-foreground)); /* O acento ERA a mostarda. Agora que ela é a primária, manter os dois seria ter duas vezes a mesma cor com nomes diferentes — os apelidos antigos apontam para a primária. */ --cor-acento: var(--cor-primaria); --cor-acento-texto: var(--cor-primaria-texto); --cor-acento-tipo: var(--cor-primaria-tipo); --cor-whatsapp: #25D366; --cor-whatsapp-texto: #04241A; /* O gradiente que o RASTREIO usa no botão primário. Aqui ele também é a régua de "calor": quanto mais perto do forno, mais gradiente. */ --gradiente-primaria: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-soft)) 100%); --gradiente-acento: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(40 98% 66%) 100%); --anel-foco: 0 0 0 2px var(--cor-fundo), 0 0 0 4px var(--cor-anel); } /* ========================================================================= 4. TIPOGRAFIA — Inter, só ela, como no RASTREIO ========================================================================= */ :root { --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fonte-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --txt-2xs: .6875rem; /* 11px */ --txt-xs: .75rem; /* 12px */ --txt-sm: .8125rem; /* 13px */ --txt-md: .875rem; /* 14px — o tamanho de UI do RASTREIO */ --txt-base:1rem; --txt-lg: 1.125rem; --txt-xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); --txt-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); --txt-3xl: clamp(1.875rem, 1.4rem + 2.3vw, 3rem); --txt-4xl: clamp(2.25rem, 1.5rem + 3.6vw, 4rem); --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-bold: 700; --peso-black: 800; --lh-apertado: 1.1; --lh-titulo: 1.22; --lh-normal: 1.55; --lh-solto: 1.7; --ls-titulo: -0.022em; --ls-etiqueta: .1em; } /* ========================================================================= 5. ESPAÇO, CAMADA E MOVIMENTO ========================================================================= */ :root { --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px; --e-20: 80px; --e-24: 96px; --largura: 1180px; --gutter: clamp(16px, 4vw, 40px); --leitura: 66ch; --z-base: 0; --z-fixo: 100; --z-cabecalho: 200; --z-gaveta: 300; --z-modal: 400; --z-toast: 500; --t-rapido: 130ms; --t-medio: 200ms; --t-lento: 320ms; --ease: cubic-bezier(.4, 0, .2, 1); --ease-saida: cubic-bezier(.16, 1, .3, 1); } /* ========================================================================= 6. BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--cor-fundo); } body { margin: 0; position: relative; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte); font-size: var(--txt-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; transition: background-color var(--t-medio) var(--ease), color var(--t-medio) var(--ease); } /* ---- grão de farinha ---- Fica atrás de tudo (z-index -1) e não intercepta clique. A frequência alta deixa o grão fino; em telas 2× ele some quase por completo, que é o comportamento desejado — textura, não estampa. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grao-opacidade); mix-blend-mode: var(--grao-mistura); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); } /* Enquanto o tema inicial é aplicado, nada anima — evita ver o claro virar escuro no carregamento. A classe sai no primeiro quadro (js/tema.js). */ .tema-carregando, .tema-carregando * { transition: none !important; } :focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: var(--radius-sm); } ::selection { background: hsl(var(--primary) / .18); color: var(--cor-texto); } hr { border: 0; border-top: 1px solid var(--cor-borda); margin: var(--e-6) 0; } /* ========================================================================= 7. BARRA DE ROLAGEM Regra herdada do RASTREIO, escrita no CSS deles: "nada de UI nativa crua". É a mesma razão de o