/* ========================================================================= EXCURSÕES · DESIGN TOKENS Base: design system do RASTREIO (C:\CLIENTES\RASTREIO\apps\web\src\app\globals.css) e a adaptação feita no Café com Pizza. Valores em TRIPLA HSL para permitir `hsl(var(--primary) / .1)` em véus e estados. Paleta desta casa (viagem, estrada, festa): Azul estrada #25499D primária (botão, item ativo, assento escolhido) Azul claro #2F6BD6 ponta clara do degradê Âmbar #F59E0B acento (assento reservado, avisos de sinal) Grafite #0F172A texto (claro) / fundo (escuro) Névoa #F4F6FA fundo (claro) O tema é trocado por `data-tema="escuro"` no , carimbado por um script inline no antes da primeira pintura (sem flash). ========================================================================= */ /* ========================================================================= 1. TEMA CLARO (padrão) ========================================================================= */ :root { color-scheme: light; --background: 220 30% 97%; /* #F4F6FA */ --foreground: 222 47% 11%; /* #0F172A · 16:1 sobre o fundo */ --card: 0 0% 100%; --card-foreground: 222 47% 11%; --muted: 220 22% 92%; /* #E6EAF1 */ --muted-foreground: 220 12% 42%; /* #5F6B7C · 5,4:1 sobre o card */ --primary: 222 62% 38%; /* #25499D · branco por cima = 8,3:1 */ --primary-soft: 218 72% 52%; /* #2F6BD6 */ --primary-foreground: 0 0% 100%; --primary-text: 222 62% 38%; /* a primária como texto sobre o card */ --accent: 38 92% 50%; /* #F59E0B */ --accent-soft: 42 96% 60%; --accent-foreground: 30 60% 12%; /* marrom escuro sobre o âmbar */ --accent-text: 30 90% 32%; /* âmbar como texto sobre o card, 5,6:1 */ --border: 220 20% 87%; /* #D7DDE6 divisor */ --input: 220 20% 87%; --control: 220 12% 58%; /* contorno de campo, 3,2:1 */ --ring: 222 62% 45%; --success: 152 60% 30%; --success-foreground: 0 0% 100%; --warning: 30 85% 34%; --warning-foreground: 0 0% 100%; --danger: 0 68% 44%; --danger-foreground: 0 0% 100%; --radius: 0.75rem; --radius-sm: calc(var(--radius) - 8px); --radius-md: calc(var(--radius) - 4px); --radius-lg: var(--radius); --radius-xl: 1rem; --radius-full: 9999px; --shadow-tint: 222 47% 11%; --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); } /* ========================================================================= 2. TEMA ESCURO A primária CLAREIA porque também é cor de texto (link, item ativo). ========================================================================= */ :root[data-tema="escuro"] { color-scheme: dark; --background: 222 40% 8%; /* #0C1220 */ --foreground: 220 25% 93%; --card: 222 32% 12%; /* #141C2C */ --card-foreground: 220 25% 93%; --muted: 222 22% 18%; --muted-foreground: 220 15% 68%; --primary: 218 85% 68%; /* #6AA0F5 */ --primary-soft: 210 90% 76%; --primary-foreground: 222 45% 10%; --primary-text: 218 85% 70%; --accent: 40 95% 60%; --accent-soft: 44 96% 70%; --accent-foreground: 30 50% 10%; --accent-text: 40 95% 62%; --border: 222 20% 22%; --input: 222 20% 22%; --control: 222 12% 48%; --ring: 218 85% 68%; --success: 150 50% 58%; --success-foreground: 222 40% 8%; --warning: 38 85% 62%; --warning-foreground: 222 40% 8%; --danger: 0 80% 70%; --danger-foreground: 222 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); } /* ========================================================================= 3. ATALHOS RESOLVIDOS ========================================================================= */ :root { --cor-fundo: hsl(var(--background)); --cor-texto: hsl(var(--foreground)); --cor-card: hsl(var(--card)); --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)); --cor-acento: hsl(var(--accent)); --cor-acento-texto: hsl(var(--accent-foreground)); --cor-acento-tipo: hsl(var(--accent-text)); --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)); --cor-whatsapp: #25D366; --cor-whatsapp-texto: #04241A; --gradiente-primaria: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-soft)) 100%); --gradiente-acento: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(var(--accent-soft)) 100%); --anel-foco: 0 0 0 2px var(--cor-fundo), 0 0 0 4px var(--cor-anel); } /* ========================================================================= 4. TIPOGRAFIA ========================================================================= */ :root { --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fonte-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, monospace; --txt-2xs: .6875rem; --txt-xs: .75rem; --txt-sm: .8125rem; --txt-md: .875rem; --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; --largura: 1180px; --gutter: clamp(16px, 4vw, 40px); --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); } html, body { overflow-x: clip; } /* clip, nunca hidden: hidden mata o sticky no Chrome mobile */ body { margin: 0; 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); } .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; } [hidden] { display: none !important; } /* ========================================================================= 7. BARRA DE ROLAGEM ========================================================================= */ * { scrollbar-width: thin; scrollbar-color: var(--cor-borda) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--cor-borda); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .5); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ========================================================================= 8. ACESSIBILIDADE DO SISTEMA ========================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --t-rapido: 0ms; --t-medio: 0ms; --t-lento: 0ms; } } @media (prefers-contrast: more) { :root { --border: 220 16% 62%; --muted-foreground: 220 16% 30%; } :root[data-tema="escuro"] { --border: 222 14% 40%; --muted-foreground: 220 20% 78%; } }