/* ════════════════════════════════════════════════════════════════════════ TOKENS · ADG Venda Fácil — FUNDAÇÃO VISUAL v2 Lei: docs/33_FUNDACAO_VISUAL.md (exceção declarada à §1 do 03, nos moldes do que o 27 §4 faz com a stack). O 03 segue valendo para o ADG-Koruja. ARQUITETURA EM 3 CAMADAS 1. PRIMITIVOS --color-brand-500, --color-neutral-800 (valor cru) 2. SEMÂNTICOS --color-bg, --color-text-primary (uso — prefira estes) 3. ALIAS --bg, --text, --primary (nomes antigos, vivos) A camada 3 existe para NÃO QUEBRAR NADA: 210 usos na landing e 207 seletores no components.css continuam funcionando. Muda o valor, não o contrato. Código novo usa a camada 2. TODO valor de cor aqui foi verificado em WCAG. Os índices estão anotados. ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ FONTES — variáveis, locais, sem CDN. Um arquivo por família cobre os pesos 100–900: 92 KB no total, contra 244 KB dos 5 estáticos do Geist que estavam aqui antes. ════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter Tight'; src: url('../fonts/InterTight-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('../fonts/GeistMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } :root { /* ══════════════════════════════════════════════════════════════════ 1 · PRIMITIVOS — COR ══════════════════════════════════════════════════════════════════ */ /* ──── Marca (laranja) ──── 500 é a marca. 400 é o hover, 600 o active — os três vieram da direção do Marcelo. O resto da rampa foi gerado no mesmo matiz (31.6°) e conferido um a um. 500 sobre #0B0D0F ......... 7.81:1 AAA (laranja como texto no escuro) #0B0D0F sobre 500 ......... 7.81:1 AAA (texto do botão primário) BRANCO sobre 500 .......... 2.49:1 REPROVA — por isso o botão usa texto escuro 800 sobre #F6F7F8 ......... 5.84:1 AA (laranja como texto no CLARO) 500 sobre #F6F7F8 ......... 2.32:1 REPROVA — no claro o laranja escurece */ --color-brand-50: #fff4e8; --color-brand-100: #ffe7cc; --color-brand-200: #ffcf99; --color-brand-300: #ffb766; --color-brand-400: #ffa12e; --color-brand-500: #f28a16; --color-brand-600: #c96b08; --color-brand-700: #a35a09; --color-brand-800: #915008; --color-brand-900: #723f06; /* ──── Neutros ──── Calibrados para o grafite #0B0D0F. Os quatro degraus do topo do escuro (950/900/850/800) são as superfícies: fundo, surface-1, surface-2 e borda. */ --color-neutral-0: #ffffff; --color-neutral-50: #f6f7f8; --color-neutral-100: #edeff1; --color-neutral-200: #dde1e5; --color-neutral-300: #c3c9d0; --color-neutral-400: #a8afb7; --color-neutral-500: #878f99; --color-neutral-600: #737b85; /* Degrau extra: o 600 passa em AA no ESCURO (4.54:1) mas reprova no CLARO (3.99:1). O 650 é o texto apagado do tema claro — 4.54:1. */ --color-neutral-650: #6a727c; /* Clareado de #555c66: no escuro este degrau é a borda de controle e precisava de 3:1 contra o fundo — em #555c66 dava 2.88 e reprovava. */ --color-neutral-700: #5a616a; --color-neutral-800: #3a4048; --color-neutral-850: #272c33; --color-neutral-900: #171b20; --color-neutral-925: #111417; --color-neutral-950: #0b0d0f; /* ──── Semânticas (primitivo) ──── Conferidas sobre #0B0D0F: success 5.85:1 · danger 4.97:1 · warning 8.66:1. Cada uma tem um par escuro para servir de texto no tema claro. */ --color-green-400: #4cc38a; --color-green-500: #22a06b; --color-green-700: #136c47; --color-red-400: #ff6369; --color-red-500: #e5484d; --color-red-700: #aa2429; --color-yellow-400: #f5cc3d; --color-yellow-500: #d9a514; --color-yellow-700: #8a6a05; --color-blue-400: #6ea8fe; --color-blue-500: #3b82f6; --color-blue-700: #1d4ed8; /* ══════════════════════════════════════════════════════════════════ 2 · SEMÂNTICOS — COR (tema CLARO é o padrão) Use SEMPRE estes. Primitivo direto só dentro deste arquivo. ══════════════════════════════════════════════════════════════════ */ --color-bg: var(--color-neutral-50); --color-surface-1: var(--color-neutral-0); --color-surface-2: var(--color-neutral-100); --color-surface-elevated: var(--color-neutral-0); --color-surface-inverted: var(--color-neutral-950); --color-text-primary: #16181d; --color-text-secondary: var(--color-neutral-700); --color-text-muted: var(--color-neutral-650); --color-text-disabled: var(--color-neutral-400); --color-text-inverted: var(--color-neutral-50); /* default é divisória (não precisa de 3:1); strong é o que identifica um controle — input, botão secundário — e por isso cumpre 3:1 (WCAG 1.4.11). */ --color-border-default: var(--color-neutral-200); --color-border-strong: var(--color-neutral-500); --color-border-subtle: var(--color-neutral-100); /* No claro o laranja de TEXTO escurece (o 500 reprova em AA sobre claro); o laranja de FUNDO continua sendo o 500 — a marca não muda de cor. */ --color-brand-primary: var(--color-brand-500); --color-brand-hover: var(--color-brand-400); --color-brand-active: var(--color-brand-600); --color-brand-text: var(--color-brand-800); --color-brand-on: #0b0d0f; /* o que escreve EM CIMA do laranja */ --color-brand-subtle: var(--color-brand-50); --color-brand-border: var(--color-brand-200); --color-success: var(--color-green-700); --color-success-strong: var(--color-green-500); --color-success-subtle: #e8f7f0; --color-success-border: #b7e4cd; --color-danger: var(--color-red-700); --color-danger-strong: var(--color-red-500); --color-danger-subtle: #fdeced; --color-danger-border: #f7c3c5; --color-warning: var(--color-yellow-700); --color-warning-strong: var(--color-yellow-500); --color-warning-subtle: #fdf5dd; --color-warning-border: #f0dda0; --color-info: var(--color-blue-700); --color-info-strong: var(--color-blue-500); --color-info-subtle: #e8f0fe; --color-info-border: #bed4fb; /* No claro o laranja da marca dá só 2.32:1 e reprova como anel de foco (WCAG pede 3:1). O 700 dá 4.87:1. No escuro volta a ser o 500. */ --color-focus-ring: var(--color-brand-700); /* ══════════════════════════════════════════════════════════════════ TIPOGRAFIA Inter Tight nos títulos (mais estreita — headline grande sem esparramar), Inter na interface. Geist Mono segue nos números e código. ══════════════════════════════════════════════════════════════════ */ --font-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-numeric: 'Geist Mono', ui-monospace, 'Courier New', monospace; /* ──── Níveis (cada um com corpo, entrelinha e espacejamento próprios). É isto que faltava: antes havia escala de tamanho, não havia arquitetura. Os tamanhos são os de DESKTOP — a versão fluida está logo abaixo. ──── */ --display-size: 64px; --display-lh: 68px; --display-ls: -0.03em; --display-fw: 700; --h1-size: 56px; --h1-lh: 60px; --h1-ls: -0.028em; --h1-fw: 700; --h2-size: 44px; --h2-lh: 50px; --h2-ls: -0.022em; --h2-fw: 700; --h3-size: 28px; --h3-lh: 34px; --h3-ls: -0.016em; --h3-fw: 600; --h4-size: 22px; --h4-lh: 28px; --h4-ls: -0.012em; --h4-fw: 600; --body-lg-size: 20px; --body-lg-lh: 30px; --body-lg-ls: -0.006em; --body-lg-fw: 400; --body-size: 16px; --body-lh: 25px; --body-ls: 0; --body-fw: 400; --body-sm-size: 14px; --body-sm-lh: 21px; --body-sm-ls: 0; --body-sm-fw: 400; --label-size: 14px; --label-lh: 20px; --label-ls: 0.005em; --label-fw: 500; --caption-size: 12px; --caption-lh: 16px; --caption-ls: 0.01em; --caption-fw: 400; /* ──── Tipografia fluida ──── Uma conta só por nível, sem dezenas de exceções por breakpoint. Alvos: 360px ≈ mobile · 1440px ≈ desktop grande. display 38 → 64 h1 34 → 56 h2 28 → 44 */ --display-fluid: clamp(38px, 2.37rem + 2.41vw, 64px); --h1-fluid: clamp(34px, 2.13rem + 2.04vw, 56px); --h2-fluid: clamp(28px, 1.85rem + 1.48vw, 44px); --h3-fluid: clamp(24px, 1.36rem + 0.37vw, 28px); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ══════════════════════════════════════════════════════════════════ ESPAÇAMENTO — escala única. Nenhum componente inventa a sua. ══════════════════════════════════════════════════════════════════ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ──── Respiro entre dobras da landing ──── */ --section-gap: 72px; /* mobile */ --section-gap-tablet: 88px; --section-gap-desktop: 128px; /* ══════════════════════════════════════════════════════════════════ RAIO — poucos níveis. Pill só onde é semântico (status, badge, chip). ══════════════════════════════════════════════════════════════════ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 22px; --radius-pill: 999px; /* ══════════════════════════════════════════════════════════════════ BORDA ══════════════════════════════════════════════════════════════════ */ --border-width: 1px; --border-width-strong: 2px; /* ══════════════════════════════════════════════════════════════════ SOMBRA — três níveis, cada um com finalidade. No escuro a profundidade vem de superfície e borda, não de sombra: os valores escuros estão no bloco de tema. ══════════════════════════════════════════════════════════════════ */ --shadow-sm: 0 1px 2px rgba(11, 13, 15, 0.06); --shadow-md: 0 4px 12px rgba(11, 13, 15, 0.08); --shadow-lg: 0 12px 32px rgba(11, 13, 15, 0.12); /* ══════════════════════════════════════════════════════════════════ ALTURA DE CONTROLE — acaba com o 36/44/52/84/96 solto ══════════════════════════════════════════════════════════════════ */ --control-h-sm: 36px; --control-h-md: 44px; /* alvo de toque mínimo */ --control-h-lg: 52px; --control-h-cta: 56px; /* CTA de marketing */ /* ══════════════════════════════════════════════════════════════════ CONTAINER ══════════════════════════════════════════════════════════════════ */ --container-landing: 1240px; --container-app: 1120px; --container-narrow: 720px; --container-xs: 480px; --gutter: 20px; /* mobile */ --gutter-tablet: 24px; --gutter-desktop: 40px; /* ══════════════════════════════════════════════════════════════════ MOVIMENTO — comunica mudança, não decora. ══════════════════════════════════════════════════════════════════ */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --easing-enter: cubic-bezier(0, 0, 0.2, 1); --easing-exit: cubic-bezier(0.4, 0, 1, 1); /* ══════════════════════════════════════════════════════════════════ BREAKPOINTS — documentais. CSS não aceita var() dentro de @media, então estes valores são a REFERÊNCIA a ser escrita à mão. Acabou o tempo dos 16 breakpoints diferentes: use só estes seis. ══════════════════════════════════════════════════════════════════ */ --bp-xs: 360px; --bp-sm: 390px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1440px; /* ══════════════════════════════════════════════════════════════════ Z-INDEX ══════════════════════════════════════════════════════════════════ */ --z-dropdown: 100; --z-modal: 500; --z-tooltip: 1000; --z-toast: 2000; /* ══════════════════════════════════════════════════════════════════ LAYOUT ══════════════════════════════════════════════════════════════════ */ --topbar-h: 56px; --bottom-nav-h: 60px; /* ══════════════════════════════════════════════════════════════════ PALETA DE CATEGORIAS DO MOTOR (admin) Fica no arquivo de tokens de propósito: a alternativa era hex solto no JavaScript, e "nunca cor hardcoded" é lei. Sete matizes de luminosidade parecida, para nenhuma categoria gritar mais que a outra. O laranja fica no gatilho — é onde tudo começa, e é a cor da marca. ══════════════════════════════════════════════════════════════════ */ --cat-gatilho: #a35a09; --cat-ia: #6d5ce0; --cat-dado: #0f8a63; --cat-logica: #0a72b8; --cat-memoria: #0e8ca0; --cat-acao: #c62f4b; --cat-humano: #64748b; /* ══════════════════════════════════════════════════════════════════ 3 · ALIAS — os nomes antigos, vivos. NÃO use em código novo. Estão aqui para que nada que já funciona quebre: a landing e o components.css inteiro dependem deles. ══════════════════════════════════════════════════════════════════ */ --font-sans: var(--font-body); --font-mono: var(--font-numeric); --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px; --text-6xl: 64px; --tracking-tight: -0.02em; --tracking-tighter: -0.03em; --tracking-wide: 0.05em; --tracking-widest: 0.1em; --neutral-0: var(--color-neutral-0); --neutral-50: var(--color-neutral-50); --neutral-100: var(--color-neutral-100); --neutral-200: var(--color-neutral-200); --neutral-300: var(--color-neutral-300); --neutral-400: var(--color-neutral-400); --neutral-500: var(--color-neutral-500); --neutral-600: var(--color-neutral-600); --neutral-700: var(--color-neutral-700); --neutral-800: var(--color-neutral-850); --neutral-900: var(--color-neutral-900); --neutral-950: var(--color-neutral-950); --accent-amber-50: var(--color-brand-50); --accent-amber-100: var(--color-brand-100); --accent-amber-600: var(--color-brand-500); --accent-amber-700: var(--color-brand-600); --accent-amber-800: var(--color-brand-700); --accent-blue-50: var(--color-info-subtle); --accent-blue-100: var(--color-info-border); --accent-blue-600: var(--color-blue-500); --accent-blue-700: var(--color-blue-700); --accent-purple-50: #f3f0ff; --accent-purple-100: #e0d8ff; --accent-purple-600: #6d5ce0; --accent-emerald-50: var(--color-success-subtle); --accent-emerald-100: var(--color-success-border); --accent-emerald-600: var(--color-green-500); --accent-emerald-700: var(--color-green-700); --accent-red-50: var(--color-danger-subtle); --accent-red-100: var(--color-danger-border); --accent-red-600: var(--color-red-500); --bg: var(--color-bg); --bg-subtle: var(--color-surface-2); --bg-muted: var(--color-neutral-100); --bg-inverted: var(--color-surface-inverted); --text: var(--color-text-primary); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --text-subtle: var(--color-text-disabled); --text-inverted: var(--color-text-inverted); --border: var(--color-border-default); --border-strong: var(--color-border-strong); --border-subtle: var(--color-border-subtle); --primary: var(--color-brand-primary); --primary-hover: var(--color-brand-active); --primary-text: var(--color-brand-on); --primary-subtle: var(--color-brand-subtle); --primary-border: var(--color-brand-border); --success: var(--color-success); --success-bg: var(--color-success-subtle); --success-border: var(--color-success-border); --info: var(--color-info); --info-bg: var(--color-info-subtle); --info-border: var(--color-info-border); --warning: var(--color-warning); --warning-bg: var(--color-warning-subtle); --warning-border: var(--color-warning-border); --danger: var(--color-danger); --danger-bg: var(--color-danger-subtle); --danger-border: var(--color-danger-border); --radius-full: var(--radius-pill); --shadow-xl: var(--shadow-lg); --shadow-2xl: 0 24px 64px rgba(11, 13, 15, 0.18); --ease: var(--easing-standard); --ease-out: var(--easing-enter); --duration: var(--duration-normal); --container: var(--container-app); --container-sm: var(--container-xs); } /* ════════════════════════════════════════════════════════════════════════ TEMA ESCURO Regra do projeto: o app tem tema claro, escuro e automático, e a escolha do usuário SEMPRE vence o sistema (ver 01_PROJECT_VARIABLES → TEMA_*). Os dois blocos abaixo existem de propósito: - o @media atende quem não escolheu nada (segue o sistema); - o [data-tema="escuro"] atende quem escolheu, inclusive num aparelho configurado em claro. O `:not([data-tema="claro"])` é o que faz a escolha manual ganhar do sistema — sem ele, quem prefere claro num celular escuro não conseguiria. Só a camada 2 é redefinida aqui. Os alias seguem a camada 2 sozinhos. ════════════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) { --color-bg: var(--color-neutral-950); --color-surface-1: var(--color-neutral-925); --color-surface-2: var(--color-neutral-900); --color-surface-elevated: var(--color-neutral-850); --color-surface-inverted: var(--color-neutral-0); --color-text-primary: #f5f6f7; --color-text-secondary: var(--color-neutral-400); --color-text-muted: var(--color-neutral-600); --color-text-disabled: var(--color-neutral-700); --color-text-inverted: var(--color-neutral-950); --color-border-default: var(--color-neutral-850); --color-border-strong: var(--color-neutral-700); --color-border-subtle: var(--color-neutral-900); --color-focus-ring: var(--color-brand-500); /* No escuro o laranja da marca JÁ passa como texto (7.81:1) — não precisa escurecer como no claro. */ --color-brand-text: var(--color-brand-500); --color-brand-subtle: rgba(242, 138, 22, 0.14); --color-brand-border: rgba(242, 138, 22, 0.32); --color-success: var(--color-green-400); --color-success-subtle: rgba(34, 160, 107, 0.14); --color-success-border: rgba(34, 160, 107, 0.32); --color-danger: var(--color-red-400); --color-danger-subtle: rgba(229, 72, 77, 0.14); --color-danger-border: rgba(229, 72, 77, 0.32); --color-warning: var(--color-yellow-400); --color-warning-subtle: rgba(217, 165, 20, 0.14); --color-warning-border: rgba(217, 165, 20, 0.32); --color-info: var(--color-blue-400); --color-info-subtle: rgba(59, 130, 246, 0.14); --color-info-border: rgba(59, 130, 246, 0.32); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); /* No escuro os mesmos matizes ficam abafados — sobem em luminosidade para manter contraste de 4.5:1 contra o fundo. */ --cat-gatilho: #f0a437; --cat-ia: #a394ff; --cat-dado: #45c99b; --cat-logica: #55b0ee; --cat-memoria: #4cc4d8; --cat-acao: #ff7a90; --cat-humano: #9aa6b8; } } /* Escolha manual do usuário — vence o sistema, nos dois sentidos. */ :root[data-tema='escuro'] { --color-bg: var(--color-neutral-950); --color-surface-1: var(--color-neutral-925); --color-surface-2: var(--color-neutral-900); --color-surface-elevated: var(--color-neutral-850); --color-surface-inverted: var(--color-neutral-0); --color-text-primary: #f5f6f7; --color-text-secondary: var(--color-neutral-400); --color-text-muted: var(--color-neutral-600); --color-text-disabled: var(--color-neutral-700); --color-text-inverted: var(--color-neutral-950); --color-border-default: var(--color-neutral-850); --color-border-strong: var(--color-neutral-700); --color-border-subtle: var(--color-neutral-900); --color-focus-ring: var(--color-brand-500); --color-brand-text: var(--color-brand-500); --color-brand-subtle: rgba(242, 138, 22, 0.14); --color-brand-border: rgba(242, 138, 22, 0.32); --color-success: var(--color-green-400); --color-success-subtle: rgba(34, 160, 107, 0.14); --color-success-border: rgba(34, 160, 107, 0.32); --color-danger: var(--color-red-400); --color-danger-subtle: rgba(229, 72, 77, 0.14); --color-danger-border: rgba(229, 72, 77, 0.32); --color-warning: var(--color-yellow-400); --color-warning-subtle: rgba(217, 165, 20, 0.14); --color-warning-border: rgba(217, 165, 20, 0.32); --color-info: var(--color-blue-400); --color-info-subtle: rgba(59, 130, 246, 0.14); --color-info-border: rgba(59, 130, 246, 0.32); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --cat-gatilho: #f0a437; --cat-ia: #a394ff; --cat-dado: #45c99b; --cat-logica: #55b0ee; --cat-memoria: #4cc4d8; --cat-acao: #ff7a90; --cat-humano: #9aa6b8; } /* Sem transição na troca de tema: animar cor de fundo de página inteira pisca e fica pior que a troca seca. */ :root[data-tema] * { transition-property: none !important; } :root[data-tema].tema-pronto * { transition-property: revert; }