/* ============================================================================ DAS — Design Tokens Sistema visual da DAS (sites, sistemas e automações com IA). Arquitetura em 2 camadas: 1. PRIMITIVAS --cor-- valor cru, nunca usar direto na UI 2. SEMÂNTICAS --cor- é isto que você usa no componente Escalas geradas por interpolação em OKLCH (perceptualmente uniforme), não em hex. Todo par texto/fundo definido aqui foi medido contra a WCAG 2.1 AA — 60/60 aprovados. Tabela completa em DESIGN-SYSTEM.md. Fontes: Bricolage Grotesque (títulos) + Instrument Sans (texto) + JetBrains Mono (código/dados). Import logo abaixo. ========================================================================== */ /* ========================================================================== 1. PRIMITIVAS — COR ========================================================================== */ :root { /* --- NOITE — roxo quase preto. Base do dono: #18132D (passo 950). É a família mais dessaturada das três: serve como o cinza-roxo estrutural do tema escuro (fundos, superfícies, bordas). --------------------------- */ --cor-noite-50: #F5F5FB; --cor-noite-100: #EBEAF5; --cor-noite-200: #D7D5E9; --cor-noite-300: #BEBBDB; --cor-noite-400: #A49FCA; --cor-noite-500: #8B84B6; --cor-noite-600: #736CA0; --cor-noite-700: #5D5587; --cor-noite-800: #47406D; --cor-noite-900: #342E53; --cor-noite-950: #18132D; /* ← base do dono */ /* --- ROXO — roxo profundo. Base do dono: #442669 (passo 900). A cor institucional. É o que o cliente lembra. ------------------------- */ --cor-roxo-50: #F7F4FE; --cor-roxo-100: #EEE8FA; --cor-roxo-200: #DDD1F4; --cor-roxo-300: #C8B4EA; --cor-roxo-400: #B195DE; --cor-roxo-500: #9A77CD; --cor-roxo-600: #835DB8; --cor-roxo-700: #6C459E; --cor-roxo-800: #553181; --cor-roxo-900: #442669; /* ← base do dono */ --cor-roxo-950: #291343; /* --- MAGENTA — o acento quente da marca. Base do dono: #932684 (passo 700). Energia e ousadia. Usar como destaque, nunca como cor de ação. --------- */ --cor-magenta-50: #FEF2FB; --cor-magenta-100: #F9E4F4; --cor-magenta-200: #F2C9E9; --cor-magenta-300: #E7A8D9; --cor-magenta-400: #D883C8; --cor-magenta-500: #C560B4; --cor-magenta-600: #AF419E; --cor-magenta-700: #932684; /* ← base do dono */ --cor-magenta-800: #77116B; --cor-magenta-900: #5B0251; --cor-magenta-950: #3D0036; /* --- ACENTO — verde-água elétrico. #2BE8C0 (passo 300). Escolhido por medição, não por gosto: é o ponto onde o contraste contra os roxos é máximo sem virar "energético de lata". Ver DESIGN-SYSTEM.md. */ --cor-acento-50: #E4FCF4; --cor-acento-100: #CAF7E8; --cor-acento-200: #90EDD2; --cor-acento-300: #2BE8C0; /* ← acento puro */ --cor-acento-400: #00C19E; --cor-acento-500: #00A385; --cor-acento-600: #00886E; --cor-acento-700: #006D59; --cor-acento-800: #005544; --cor-acento-900: #003E31; --cor-acento-950: #00281F; /* --- NEUTROS — cinzas com viés roxo (matiz 301°, croma ~0.016). Não são cinzas puros: sentam ao lado dos roxos sem brigar. ------------- */ --cor-neutro-50: #FBFAFE; --cor-neutro-100: #F4F1F8; --cor-neutro-200: #E3E0E9; --cor-neutro-300: #CDC9D5; --cor-neutro-400: #B1ACB9; --cor-neutro-500: #938F9B; --cor-neutro-600: #78747F; --cor-neutro-700: #5D5963; --cor-neutro-800: #44414A; --cor-neutro-900: #2D2A32; --cor-neutro-950: #19171D; --cor-branco: #FFFFFF; /* --- ESTADOS — sucesso / atenção / erro / info. Mesma rampa de luminosidade das outras famílias, para que um alerta tenha o mesmo "peso" visual que um card de marca. ---------------------- */ --cor-sucesso-50: #EEF9F3; --cor-sucesso-100: #DDF1E6; --cor-sucesso-200: #BBE3CE; --cor-sucesso-300: #90D0B0; --cor-sucesso-400: #5DBB90; --cor-sucesso-500: #0E9F6E; --cor-sucesso-600: #00895E; --cor-sucesso-700: #006F4B; --cor-sucesso-800: #005639; --cor-sucesso-900: #003F29; --cor-sucesso-950: #002919; --cor-atencao-50: #FFF3EB; --cor-atencao-100: #FCE7D7; --cor-atencao-200: #F6CFB1; --cor-atencao-300: #EDB182; --cor-atencao-400: #E18F4B; --cor-atencao-500: #D97706; --cor-atencao-600: #AC5C00; --cor-atencao-700: #8B4A00; --cor-atencao-800: #6C3800; --cor-atencao-900: #512800; --cor-atencao-950: #351900; --cor-erro-50: #FFF2F1; --cor-erro-100: #FFE4E0; --cor-erro-200: #FFC8C1; --cor-erro-300: #FFA398; --cor-erro-400: #FD7669; --cor-erro-500: #ED4940; --cor-erro-600: #E02424; --cor-erro-700: #B1000D; --cor-erro-800: #8B0008; --cor-erro-900: #680004; --cor-erro-950: #460002; --cor-info-50: #F1F6FF; --cor-info-100: #E0ECFF; --cor-info-200: #C1D9FF; --cor-info-300: #9AC1FF; --cor-info-400: #6DA5FF; --cor-info-500: #3B82F6; --cor-info-600: #1A6BE9; --cor-info-700: #0053C7; --cor-info-800: #00409C; --cor-info-900: #002E76; --cor-info-950: #001D50; } /* ========================================================================== 2. SEMÂNTICAS — COR (tema claro, padrão) Use SEMPRE estes tokens nos componentes. Trocar de tema é trocar esta camada; nenhum componente precisa saber que o tema mudou. ========================================================================== */ :root { --cor-fundo: var(--cor-neutro-50); /* fundo da página */ --cor-fundo-sutil: var(--cor-neutro-100); /* faixas, zebra, seções */ --cor-superficie: var(--cor-branco); /* card, modal, dropdown */ --cor-superficie-alta: var(--cor-branco); /* popover sobre card */ --cor-texto: var(--cor-noite-950); /* corpo e títulos */ --cor-texto-suave: var(--cor-neutro-700); /* secundário, legendas */ --cor-texto-tenue: var(--cor-neutro-600); /* placeholder, metadado */ --cor-texto-invertido: var(--cor-branco); /* sobre fundo de marca */ --cor-borda: var(--cor-neutro-200); /* divisórias decorativas */ --cor-borda-forte: var(--cor-neutro-500); /* borda de input (3:1) */ --cor-marca: var(--cor-roxo-700); /* links, ícones, rótulos */ --cor-marca-forte: var(--cor-roxo-900); /* títulos de marca */ --cor-marca-suave: var(--cor-roxo-50); /* fundo de realce */ --cor-destaque: var(--cor-magenta-700); /* números, badges, ênfase*/ --cor-destaque-suave: var(--cor-magenta-50); --cor-acao: var(--cor-acento-500); /* preenchimento do CTA */ --cor-acao-forte: var(--cor-acento-400); /* hover: o CTA acende */ --cor-acao-borda: var(--cor-acento-600); /* garante o limite 3:1 */ --cor-acao-texto: var(--cor-noite-950); /* texto sobre o CTA */ --cor-foco: var(--cor-magenta-600); /* anel de foco */ --cor-sucesso: var(--cor-sucesso-700); --cor-sucesso-fundo: var(--cor-sucesso-50); --cor-sucesso-borda: var(--cor-sucesso-200); --cor-atencao: var(--cor-atencao-700); --cor-atencao-fundo: var(--cor-atencao-50); --cor-atencao-borda: var(--cor-atencao-200); --cor-erro: var(--cor-erro-700); --cor-erro-fundo: var(--cor-erro-50); --cor-erro-borda: var(--cor-erro-200); --cor-info: var(--cor-info-700); --cor-info-fundo: var(--cor-info-50); --cor-info-borda: var(--cor-info-200); /* tinta das sombras: roxo da marca, nunca preto puro */ --sombra-tinta: 42 28 78; --sombra-opacidade: 1; color-scheme: light; } /* ========================================================================== 3. SEMÂNTICAS — COR (tema escuro) Dois gatilhos: preferência do sistema E atributo manual. O atributo [data-tema] sempre vence, para o usuário poder desobedecer ao sistema. ========================================================================== */ /* Bloco escrito uma vez e aplicado nos dois gatilhos. (CSS não tem "mixin", então o bloco aparece duplicado — é o custo de suportar os dois modos sem JS obrigatório.) */ @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) { --cor-fundo: var(--cor-noite-950); --cor-fundo-sutil: #120E24; --cor-superficie: var(--cor-noite-900); --cor-superficie-alta: var(--cor-noite-800); --cor-texto: var(--cor-neutro-50); --cor-texto-suave: var(--cor-neutro-300); --cor-texto-tenue: var(--cor-neutro-400); --cor-texto-invertido: var(--cor-noite-950); --cor-borda: var(--cor-noite-800); --cor-borda-forte: var(--cor-noite-600); --cor-marca: var(--cor-roxo-300); --cor-marca-forte: var(--cor-roxo-200); --cor-marca-suave: var(--cor-roxo-900); --cor-destaque: var(--cor-magenta-300); --cor-destaque-suave: var(--cor-magenta-950); --cor-acao: var(--cor-acento-300); --cor-acao-forte: var(--cor-acento-200); --cor-acao-borda: var(--cor-acento-300); --cor-acao-texto: var(--cor-noite-950); --cor-foco: var(--cor-acento-300); --cor-sucesso: var(--cor-sucesso-300); --cor-sucesso-fundo: var(--cor-sucesso-950); --cor-sucesso-borda: var(--cor-sucesso-800); --cor-atencao: var(--cor-atencao-300); --cor-atencao-fundo: var(--cor-atencao-950); --cor-atencao-borda: var(--cor-atencao-800); --cor-erro: var(--cor-erro-300); --cor-erro-fundo: var(--cor-erro-950); --cor-erro-borda: var(--cor-erro-800); --cor-info: var(--cor-info-300); --cor-info-fundo: var(--cor-info-950); --cor-info-borda: var(--cor-info-800); /* no escuro a sombra some; a elevação passa a ser dada pela superfície mais clara. Mantemos uma sombra forte só para o que flutua de verdade. */ --sombra-tinta: 10 4 28; --sombra-opacidade: 2.2; color-scheme: dark; } } :root[data-tema='escuro'] { --cor-fundo: var(--cor-noite-950); --cor-fundo-sutil: #120E24; --cor-superficie: var(--cor-noite-900); --cor-superficie-alta: var(--cor-noite-800); --cor-texto: var(--cor-neutro-50); --cor-texto-suave: var(--cor-neutro-300); --cor-texto-tenue: var(--cor-neutro-400); --cor-texto-invertido: var(--cor-noite-950); --cor-borda: var(--cor-noite-800); --cor-borda-forte: var(--cor-noite-600); --cor-marca: var(--cor-roxo-300); --cor-marca-forte: var(--cor-roxo-200); --cor-marca-suave: var(--cor-roxo-900); --cor-destaque: var(--cor-magenta-300); --cor-destaque-suave: var(--cor-magenta-950); --cor-acao: var(--cor-acento-300); --cor-acao-forte: var(--cor-acento-200); --cor-acao-borda: var(--cor-acento-300); --cor-acao-texto: var(--cor-noite-950); --cor-foco: var(--cor-acento-300); --cor-sucesso: var(--cor-sucesso-300); --cor-sucesso-fundo: var(--cor-sucesso-950); --cor-sucesso-borda: var(--cor-sucesso-800); --cor-atencao: var(--cor-atencao-300); --cor-atencao-fundo: var(--cor-atencao-950); --cor-atencao-borda: var(--cor-atencao-800); --cor-erro: var(--cor-erro-300); --cor-erro-fundo: var(--cor-erro-950); --cor-erro-borda: var(--cor-erro-800); --cor-info: var(--cor-info-300); --cor-info-fundo: var(--cor-info-950); --cor-info-borda: var(--cor-info-800); --sombra-tinta: 10 4 28; --sombra-opacidade: 2.2; color-scheme: dark; } /* ========================================================================== 4. GRADIENTES DE MARCA O principal é #442669 → #932684 a 135°. Conferido: o ponto médio em sRGB (#6B2676) e em OKLCH (#69287C) coincidem — esta dupla não suja no meio, e por isso o gradiente dispensa parada intermediária. Texto branco é legível em qualquer ponto dele (pior caso 7.37:1). ========================================================================== */ :root { --grad-marca: linear-gradient(135deg, #442669 0%, #932684 100%); --grad-marca-horizontal: linear-gradient(90deg, #442669 0%, #932684 100%); --grad-marca-vertical: linear-gradient(180deg, #442669 0%, #932684 100%); --grad-marca-invertido: linear-gradient(135deg, #932684 0%, #442669 100%); --grad-marca-radial: radial-gradient(circle at 30% 20%, #932684 0%, #442669 70%); /* noite: fundo de seção/hero, escuro o bastante para texto branco em qualquer ponto */ --grad-noite: linear-gradient(160deg, #18132D 0%, #442669 100%); --grad-profundo:linear-gradient(135deg, #18132D 0%, #442669 55%, #932684 100%); /* aurora: só ornamento (blobs, ilustração, fundo desfocado). Nunca atrás de texto — a ponta de acento é clara demais para garantir AA. */ --grad-aurora: linear-gradient(120deg, #442669 0%, #932684 55%, #2BE8C0 100%); /* texto em gradiente: aplicar junto de background-clip:text */ --grad-texto: linear-gradient(100deg, #6C459E 0%, #932684 100%); /* realce de superfície (tema claro) */ --grad-sutil: linear-gradient(135deg, #F7F4FE 0%, #FEF2FB 100%); } /* ========================================================================== 5. TIPOGRAFIA Títulos: Bricolage Grotesque — grotesca variável com largura e tamanho ópticos, terminais levemente irregulares. Tem personalidade sem ser "divertidinha": bold e amigável, mas contemporânea. Texto: Instrument Sans — desenhada para interface, altura-x grande, aberturas abertas e diacríticos bem resolvidos (ã, õ, ç, é, ê, à). Dados/código: JetBrains Mono. ========================================================================== */ :root { --fonte-titulo: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --fonte-texto: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fonte-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Escala modular, razão 1.200 (terça menor) a partir de 1rem. Abaixo da base ficam dois degraus de interface (14px e 12px) fora da razão: a razão pura daria 13.3px e 11.1px, tamanhos ruins de ler em tela e fora da grade de 2px. Decisão consciente. */ --texto-xs: 0.75rem; /* 12.0px */ --texto-sm: 0.875rem; /* 14.0px */ --texto-base: 1rem; /* 16.0px */ --texto-lg: 1.2rem; /* 19.2px */ --texto-xl: 1.44rem; /* 23.0px */ --texto-2xl: 1.728rem; /* 27.6px */ --texto-3xl: 2.074rem; /* 33.2px */ --texto-4xl: 2.488rem; /* 39.8px */ --texto-5xl: 2.986rem; /* 47.8px */ /* variantes fluidas para display — evita hero gigante no celular */ --texto-3xl-fluido: clamp(1.728rem, 1.4rem + 1.6vw, 2.074rem); --texto-4xl-fluido: clamp(2.074rem, 1.6rem + 2.4vw, 2.488rem); --texto-5xl-fluido: clamp(2.074rem, 1.5rem + 3.6vw, 2.986rem); --peso-normal: 400; --peso-medio: 500; --peso-semibold: 600; --peso-bold: 700; --peso-extrabold: 800; /* Altura de linha. Corpo em 1.6 porque português acentuado precisa de ar vertical: ã/õ sobem e ç desce, e 1.5 encosta as linhas. */ --lh-apertada: 1.05; /* 4xl, 5xl */ --lh-titulo: 1.15; /* 2xl, 3xl */ --lh-subtitulo: 1.3; /* lg, xl */ --lh-corpo: 1.6; /* base, sm */ --lh-solta: 1.75; /* texto longo de leitura */ /* Letter-spacing: negativo no display (fecha o buraco entre letras grandes), positivo só em rótulo caixa-alta. */ --ls-display: -0.03em; --ls-titulo: -0.02em; --ls-subtitulo:-0.01em; --ls-normal: 0em; --ls-rotulo: 0.08em; /* uso exclusivo em LABEL MAIÚSCULO */ --largura-leitura: 68ch; /* medida ideal de linha em PT-BR */ } /* ========================================================================== 6. ESPAÇAMENTO — base 4px ========================================================================== */ :root { --esp-0: 0; --esp-px: 1px; --esp-05: 0.125rem; /* 2px */ --esp-1: 0.25rem; /* 4px */ --esp-2: 0.5rem; /* 8px */ --esp-3: 0.75rem; /* 12px */ --esp-4: 1rem; /* 16px */ --esp-5: 1.25rem; /* 20px */ --esp-6: 1.5rem; /* 24px */ --esp-7: 1.75rem; /* 28px */ --esp-8: 2rem; /* 32px */ --esp-10: 2.5rem; /* 40px */ --esp-12: 3rem; /* 48px */ --esp-16: 4rem; /* 64px */ --esp-20: 5rem; /* 80px */ --esp-24: 6rem; /* 96px */ --esp-32: 8rem; /* 128px */ --esp-40: 10rem; /* 160px */ --largura-conteudo: 72rem; /* 1152px */ --largura-estreita: 44rem; /* 704px */ } /* ========================================================================== 7. RAIO DE BORDA — generoso, a marca é "bold e amigável" ========================================================================== */ :root { --raio-xs: 0.25rem; /* 4px — tags minúsculas */ --raio-sm: 0.5rem; /* 8px — badge, checkbox */ --raio-md: 0.75rem; /* 12px — input, botão pequeno */ --raio-lg: 1rem; /* 16px — botão, card padrão */ --raio-xl: 1.5rem; /* 24px — card grande, modal */ --raio-2xl: 2rem; /* 32px — seção, hero, imagem */ --raio-3xl: 2.5rem; /* 40px — bloco de destaque */ --raio-pilula: 62.5rem; /* botão pílula, chip */ --raio-circulo: 50%; /* avatar */ } /* ========================================================================== 8. SOMBRA — tingida de roxo (42 28 78), nunca cinza puro O token --sombra-opacidade deixa o tema escuro endurecer as sombras sem reescrever cada nível. ========================================================================== */ :root { --sombra-xs: 0 1px 2px rgb(var(--sombra-tinta) / calc(0.06 * var(--sombra-opacidade))); --sombra-sm: 0 1px 2px rgb(var(--sombra-tinta) / calc(0.06 * var(--sombra-opacidade))), 0 2px 4px rgb(var(--sombra-tinta) / calc(0.05 * var(--sombra-opacidade))); --sombra-md: 0 2px 4px rgb(var(--sombra-tinta) / calc(0.05 * var(--sombra-opacidade))), 0 6px 12px rgb(var(--sombra-tinta) / calc(0.08 * var(--sombra-opacidade))); --sombra-lg: 0 4px 8px rgb(var(--sombra-tinta) / calc(0.05 * var(--sombra-opacidade))), 0 12px 24px rgb(var(--sombra-tinta) / calc(0.10 * var(--sombra-opacidade))); --sombra-xl: 0 8px 16px rgb(var(--sombra-tinta) / calc(0.06 * var(--sombra-opacidade))), 0 24px 48px rgb(var(--sombra-tinta) / calc(0.14 * var(--sombra-opacidade))); --sombra-interna: inset 0 1px 2px rgb(var(--sombra-tinta) / calc(0.10 * var(--sombra-opacidade))); /* brilhos — identidade, não elevação */ --sombra-acao: 0 4px 14px rgb(0 163 133 / 0.32); --sombra-marca: 0 8px 24px rgb(147 38 132 / 0.28); --anel-foco: 0 0 0 3px var(--cor-fundo), 0 0 0 6px var(--cor-foco); } /* ========================================================================== 9. MOVIMENTO Curva padrão com saída longa (entra rápido, assenta devagar) — passa sensação de resposta imediata sem parecer abrupto. ========================================================================== */ :root { --dur-instantanea: 80ms; /* troca de cor em hover */ --dur-rapida: 150ms; /* botão, checkbox, tooltip */ --dur-media: 250ms; /* dropdown, accordion */ --dur-lenta: 400ms; /* modal, gaveta */ --dur-entrada: 650ms; /* animação de entrada de seção */ --ease-padrao: cubic-bezier(0.2, 0, 0, 1); --ease-entrada: cubic-bezier(0, 0, 0.2, 1); --ease-saida: cubic-bezier(0.4, 0, 1, 1); --ease-elastico: cubic-bezier(0.34, 1.56, 0.64, 1); /* "amigável": o leve repique */ --z-base: 0; --z-suspenso: 10; --z-fixo: 100; --z-sobreposicao: 1000; --z-modal: 1100; --z-aviso: 1200; } @media (prefers-reduced-motion: reduce) { :root { --dur-instantanea: 1ms; --dur-rapida: 1ms; --dur-media: 1ms; --dur-lenta: 1ms; --dur-entrada: 1ms; } }