/* * DESIGN TOKENS * Responsabilidade: única fonte de verdade para cor, espaço, tipografia, * radius e sombra. Componentes NUNCA usam valores crus — só estas variáveis. * * Duas camadas: * 1. Primitivos → paleta crua, não usar direto em componente. * 2. Semânticos → o que componentes consomem. O tema dark reescreve * apenas os semânticos, apontando para outros primitivos. */ :root { /* ---- Primitivos: escala de cinza (leve tom frio, casa com o petróleo) ---- */ color-scheme: light; --gray-0: #ffffff; --gray-50: #f5f6f8; --gray-100: #eaecef; --gray-200: #dde0e4; --gray-300: #cdd1d6; --gray-400: #a9a9b0; --gray-500: #7d7d85; --gray-600: #56565c; --gray-700: #3a3a3f; --gray-800: #262629; --gray-875: #1c1c1f; /* graphite: superfície (card) no dark */ --gray-900: #18181a; --gray-925: #161618; /* graphite: sidebar no dark */ --gray-950: #0f0f10; --gray-975: #0d0d0f; /* graphite: fundo (quase preto) no dark */ --gray-1000: #000000; /* ---- Primitivos: ação (azul petróleo sóbrio) e perigo (vermelho) ---- Petróleo (teal-azulado) transmite confiança/seriedade para a imobiliária sem o índigo genérico de SaaS. 500 = ação; 600 = hover/link no claro; 400 = variante clara (hover no escuro, foco). */ --petrol-400: #2a9fb8; --petrol-500: #0e7490; --petrol-600: #155e75; --red-400: #f2585f; --red-500: #dc2f37; --red-600: #b91c23; --green-400: #4ade80; --green-600: #15803d; /* Teal de marca: degradê do painel de autenticação (login/cadastro). */ --brand-teal-1: #0e6e7e; --brand-teal-2: #15b8a6; --amber-400: #fbbf24; --amber-600: #a86410; /* âmbar/ocre dourado (menos ferrugem); AA 4.68:1 no branco — teto acessível p/ texto de badge */ /* ---- Tipografia ---- */ /* Stack neutra de sistema: legível, sem dependência de fonte externa. Prioriza a fonte nativa de cada SO (clareza tipo ChatGPT). */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace; --text-2xs: 0.7rem; /* ~11px — micro-rótulos (ex.: tag de inadimplência) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.875rem; /* 30px — mais presença nos títulos de página */ --text-3xl: 2.125rem; /* 34px — número-herói (valor de KPI) com mais impacto */ --leading-tight: 1.25; --leading-normal: 1.5; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Espaçamento (escala base 4px) ---- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ /* ---- Movimento ---- */ /* Easing de saída suave (rápido no começo, desacelera) para entradas e micro-interações. Usado pelo 51_motion.css. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ---- Radius ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* ---- Sombra (em camadas, tom de tinta ardósia; profundidade sutil) ---- Dupla camada (contato + difusa) lê mais refinado que a sombra plana. Base rgba(16,24,40) = ardósia, mais rica que o preto puro. */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 1px rgba(16, 24, 40, 0.04); --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.10), 0 2px 6px -2px rgba(16, 24, 40, 0.06); --shadow-lg: 0 16px 32px -8px rgba(16, 24, 40, 0.20), 0 4px 12px -4px rgba(16, 24, 40, 0.12); /* modais, popovers */ --shadow-bar: 0 -4px 14px -10px rgba(16, 24, 40, 0.10); /* barra fixa de ações (sombra para cima, sutil) */ /* Card flutuante: sombra mais presente que a -sm para o card "descolar" do fundo (premium sem virar caixa pesada). Hover aprofunda. */ --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px -6px rgba(16, 24, 40, 0.08); --shadow-card-hover: 0 2px 4px rgba(16, 24, 40, 0.05), 0 12px 24px -8px rgba(16, 24, 40, 0.12); /* ---- Camadas de empilhamento (z-index) ---- Escala central por papel. Componentes usam SEMPRE estes tokens, nunca valores soltos, para o empilhamento ser previsível. */ --z-base: 1; /* acima de irmãos no fluxo (ex.: marcador de timeline) */ --z-sticky: 5; /* barra de ações fixa do formulário */ --z-raised: 10; /* controle elevado pontual (ex.: toggle de tema no auth) */ --z-dropdown: 20; /* menus dropdown, nav da landing */ --z-header: 30; /* topbar */ --z-overlay: 40; /* scrims/barras sobre o conteúdo (sidebar overlay, cookie, impersonação) */ --z-drawer: 50; /* gaveta da sidebar no mobile */ --z-skip-link: 100; /* link "pular para o conteúdo" (acessibilidade) */ --z-lightbox: 1000; /* visualizador de fotos */ --z-modal: 1100; /* modais e command palette */ --z-toast: 1200; /* notificações toast (acima do modal: erros de form no modal precisam ficar nítidos, não borrados pelo backdrop) */ /* ---- Layout ---- */ /* Páginas largas (listas, dashboard, show): generoso, enche telas grandes até ~ultrawide em vez de deixar buraco lateral. */ --max-width-content: 100rem; /* Formulários e leitura: largura confortável — campos não se espalham. */ --max-width-form: 52rem; --border-width: 1px; /* ===================================================================== SEMÂNTICOS — TEMA CLARO (padrão) Componentes consomem APENAS estas variáveis. ===================================================================== */ /* Cinza névoa (neutro-frio, discreto): canvas com leve tom, card branco destaca por tom + sombra. Par do escuro "graphite black". */ --color-bg: #f5f6f8; /* canvas: cinza névoa (não branco puro) */ --color-surface: var(--gray-0); /* cards/inputs: branco — pulam do canvas por tom+sombra */ --color-surface-2: #edeef1; /* superfície secundária (trilhos, fills sutis) */ --color-sidebar: #eef0f3; /* barra lateral: névoa entre o canvas e o card */ --color-text: #191a1c; /* texto principal: quase-preto neutro */ --color-text-muted: #63666b; /* secundário — AA ≥4.5 sobre a sidebar névoa */ --color-text-subtle: #63666b; /* legendas/help */ --color-text-placeholder: #a6a9af; /* placeholder: isento de AA, mais claro */ --color-border: #e3e5e9; /* bordas e divisores */ --color-hover: #edeef1; /* hover discreto */ --color-accent: var(--petrol-500); /* ação primária (azul petróleo) */ --color-accent-hover: var(--petrol-600); --color-accent-text: var(--gray-0); /* texto sobre accent */ --color-on-brand: var(--gray-0); /* texto/superfície branca sobre o teal da marca (igual nos 2 temas) */ --color-link: var(--petrol-600); /* link = petróleo de ação (AA no branco) */ --color-danger: var(--red-500); /* somente ações destrutivas */ --color-danger-hover: var(--red-600); --color-danger-text: var(--gray-0); --color-focus-ring: var(--petrol-500); /* anel de foco = cor de ação */ /* Scrim de sobreposição (modal, lightbox). Preto translúcido, igual nos dois temas. strong = mais opaco, para o visualizador de fotos. */ --color-overlay: rgb(0 0 0 / 60%); --color-overlay-strong: rgb(0 0 0 / 85%); /* Status (badges): texto forte + fundo suave. O "soft" é derivado da própria cor de status misturada à superfície (color-mix) — uma fonte só, consistente, e que se adapta sozinha ao tema (sem hex hardcoded). */ --color-success: var(--green-600); --color-success-soft: color-mix(in srgb, var(--color-success) 14%, var(--color-surface)); --color-warning: var(--amber-600); --color-warning-soft: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)); --color-status-danger-soft: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface)); --color-status-neutral: #63666b; /* neutro frio */ --color-status-neutral-soft: #edeef1; /* Derivados da cor de ação (também via color-mix, adaptam ao tema): soft = fundo de chip/realce; muted = fundo do primary desabilitado. */ --color-accent-soft: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); --color-accent-muted: color-mix(in srgb, var(--color-accent) 32%, var(--color-surface)); } /* ======================================================================= SEMÂNTICOS — TEMA ESCURO (all-black / cinza escuro, baixo contraste) Reescreve SÓ os semânticos. Ativado por [data-theme="dark"] no . O tema inicial é resolvido pelo JS (script anti-FOUC + theme_controller), nunca por @media — o JS é a única fonte de verdade do tema. ======================================================================= */ [data-theme="dark"] { color-scheme: dark; /* Graphite premium: no escuro a sombra não aparece, então a elevação vem da CLAREZA, não da sombra — cada camada (fundo → sidebar → card → fills) sobe um tom. Fundo quase-preto (não preto puro) evita o contraste duro. */ /* Graphite black (cinza-preto neutro, confortável): "outro tipo de preto" — não preto puro (#000), não azul. Card SOBE de tom sobre o fundo E ganha sombra. */ --color-bg: #1a1a1d; /* fundo: graphite (não preto puro) */ --color-surface: #242427; /* card: sobe de tom sobre o fundo + sombra */ --color-surface-2: #2d2d31; /* fills/pílula: + 1 tom */ --color-sidebar: #151517; /* barra lateral: entre o fundo e o card */ --color-text: #eaeaee; /* off-white neutro: menos fadiga */ --color-text-muted: #909299; /* AA ≥4.5 sobre o card */ --color-text-subtle: #909299; /* legendas/help */ --color-text-placeholder: #5c5c62; /* placeholder: isento de AA, mais dim */ --color-border: #34343a; /* linha que define a borda do card */ --color-hover: #2d2d31; /* hover: sobe 1 tom */ /* MESMA geometria das sombras do tema claro (offsets/blur/spread idênticos), só a cor muda: no escuro a ardósia clara do claro é invisível, então usamos preto com alpha mais alto (o fundo graphite não é preto puro, então a sombra preta o escurece e destaca o card). O inset claro no topo é o único acréscimo do dark — simula a luz batendo na borda de cima. */ --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 16px -6px rgba(0, 0, 0, 0.55); --shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 24px -8px rgba(0, 0, 0, 0.65); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50), 0 1px 1px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.60), 0 4px 12px -4px rgba(0, 0, 0, 0.50); --color-accent: var(--petrol-500); /* petróleo pop sobre o preto */ --color-accent-hover: var(--petrol-400); --color-accent-text: var(--gray-0); --color-link: var(--petrol-400); /* petróleo mais claro p/ legibilidade no escuro */ --color-danger: var(--red-400); --color-danger-hover: var(--red-500); --color-danger-text: var(--gray-1000); --color-focus-ring: var(--petrol-500); /* anel de foco = cor de ação */ /* Status: no escuro usa as variantes 400 (mais claras). Os "soft" e o accent-soft/muted são derivados no :root via color-mix e se adaptam sozinhos (a mistura usa a superfície escura) — não repetir aqui. */ --color-success: var(--green-400); --color-warning: var(--amber-400); --color-status-neutral: #a8a8ae; /* neutro frio (casa com o graphite) */ --color-status-neutral-soft: #2d2d31; }