/* ============================================================ EVER UI — 01 PRIMITIVES · v1.0.0 · 2026-07-09 · @dev-designer ============================================================ Camada 1 de 3 (primitives → semantic → component). PROIBIDO consumir estes tokens direto em componente (regra de ouro da arquitetura — componente consome semantic/component). OKLCH sempre (gotcha D1). Fusão de 3 fontes: · arquitetura: criativos-uelicon tokens.css v1.0 · curadoria premium: contrato-consultor tokens-redesign-2026-07 · escalas: skills/designer/templates/design-tokens.css O CORAÇÃO DO THEMING: --brand-h / --brand-c. Toda a rampa de marca é DERIVADA por calc() com L FIXO por degrau → o contraste é ESTRUTURAL (não depende do matiz). Tema de produto = setar 2 variáveis (ver tokens/themes/). Runtime por tenant = lib branding.ts (reuso verbatim do contrato-consultor) injeta --brand-h/--brand-c num ELEMENTO escopado (nunca no documentElement de um console fixo), com guard de contraste AA (CROMA_MAX 0.18). ⚠️ Tema novo: rodar tools/validar-contraste.py ANTES de usar (D5 + F36 — L fixo garante a estrutura, mas matizes amarelos/ ciano extremos merecem confirmação). ============================================================ */ :root { /* ========================================================== 0. PARÂMETROS DE MARCA (o tema sobrescreve; runtime idem) ========================================================== */ --brand-h: 145; /* matiz da marca — default: jade Ever */ --brand-c: 0.17; /* croma da marca — teto seguro 0.18 (anti-neon) */ --neutral-h: var(--brand-h); /* neutros brand-tinted (cinza "da família") */ --shadow-h: var(--neutral-h); /* sombras tingidas pela família, não preto puro */ /* ========================================================== 1. RAMPA DE MARCA — derivada, L fixo por degrau ========================================================== L fixo = contraste estrutural. Croma decai nos extremos (rampa perceptualmente correta, sem "neon" no claro/escuro). */ --brand-50: oklch(97% calc(var(--brand-c) * 0.12) var(--brand-h)); --brand-100: oklch(93% calc(var(--brand-c) * 0.30) var(--brand-h)); --brand-200: oklch(86% calc(var(--brand-c) * 0.55) var(--brand-h)); --brand-300: oklch(78% calc(var(--brand-c) * 0.85) var(--brand-h)); /* primary do dark app */ --brand-400: oklch(70% var(--brand-c) var(--brand-h)); --brand-500: oklch(58% var(--brand-c) var(--brand-h)); /* CTA branded (stage) — AA-large c/ #fff */ --brand-600: oklch(50% var(--brand-c) var(--brand-h)); /* AÇÃO light — 5.53:1 c/ #fff no jade */ --brand-650: oklch(46% calc(var(--brand-c) * 0.95) var(--brand-h)); /* hover da ação */ --brand-700: oklch(42% calc(var(--brand-c) * 0.85) var(--brand-h)); /* texto de marca/link — 7.88:1 */ --brand-800: oklch(32% calc(var(--brand-c) * 0.60) var(--brand-h)); --brand-900: oklch(24% calc(var(--brand-c) * 0.40) var(--brand-h)); /* Derivados de PALCO (stage escuro) — verbatim contrato-consultor, L fixos validados; consumidos pelo escopo [data-surface="stage"] */ --brand-neon: oklch(78% var(--brand-c) var(--brand-h)); /* título/dot/acento — 10.35:1 no ink */ --brand-neon-soft: oklch(78% calc(var(--brand-c) * 0.55) var(--brand-h)); /* glow/sublinhado */ --brand-on-stage: oklch(85% calc(var(--brand-c) * 0.40) var(--brand-h)); /* ícone sobre faixa escura */ --brand-soft-bg: oklch(95% calc(var(--brand-c) * 0.30) var(--brand-h)); --brand-soft-fg: oklch(45% var(--brand-c) var(--brand-h)); --brand-soft-border: oklch(88% calc(var(--brand-c) * 0.45) var(--brand-h)); --brand-ring: oklch(50% var(--brand-c) var(--brand-h) / 0.30); --text-on-brand: oklch(99% 0.005 var(--brand-h)); /* ========================================================== 2. NEUTROS — brand-tinted (hue da família, croma quase nulo) ========================================================== Curva do redesign contrato-consultor (M1) + degraus 150/850/950 dos criativos (necessários pro dark). RECALIBRADOS p/ AA: n500 L58.5→56 (4.62:1 s/ branco) · n600 L48.5→47 (6.77:1). */ --neutral-0: oklch(100% 0 0); --neutral-50: oklch(99.0% 0.002 var(--neutral-h)); --neutral-100: oklch(97.6% 0.004 var(--neutral-h)); --neutral-150: oklch(95.4% 0.005 var(--neutral-h)); --neutral-200: oklch(94.2% 0.006 var(--neutral-h)); --neutral-300: oklch(88.5% 0.009 var(--neutral-h)); --neutral-400: oklch(72.5% 0.014 var(--neutral-h)); --neutral-500: oklch(56.0% 0.016 var(--neutral-h)); /* piso de texto AA (4.62:1 s/ branco) */ --neutral-600: oklch(47.0% 0.018 var(--neutral-h)); --neutral-700: oklch(35.5% 0.022 var(--neutral-h)); --neutral-800: oklch(25.5% 0.020 var(--neutral-h)); --neutral-850: oklch(21.0% 0.014 var(--neutral-h)); /* surface do dark app */ --neutral-900: oklch(18.5% 0.018 var(--neutral-h)); /* bg do dark app */ --neutral-950: oklch(13.5% 0.010 var(--neutral-h)); /* teleprompter/contraste máximo */ /* ========================================================== 3. SEMÂNTICOS FIXOS — feedback NUNCA é branded (cor de estado é vocabulário global, igual em todos os produtos) ========================================================== */ --green-50: oklch(96.5% 0.025 145); --green-100: oklch(92.0% 0.055 145); --green-200: oklch(85.0% 0.100 145); --green-500: oklch(64.0% 0.180 145); /* dot/ícone — nunca fundo de texto branco (3.13:1) */ --green-600: oklch(56.0% 0.170 145); --green-700: oklch(45.0% 0.140 145); /* texto verde sobre claro — 5.63:1 em green-100 */ --red-50: oklch(96.5% 0.020 25); --red-100: oklch(92.0% 0.050 25); --red-500: oklch(60.0% 0.210 25); --red-600: oklch(52.0% 0.190 25); --red-700: oklch(42.0% 0.160 25); /* 8.22:1 em red-50 */ --amber-50: oklch(97.0% 0.025 75); --amber-100: oklch(93.0% 0.060 75); --amber-500: oklch(75.0% 0.160 75); --amber-700: oklch(50.0% 0.130 75); /* 4.94:1 em amber-100 */ --blue-50: oklch(96.0% 0.020 245); --blue-100: oklch(91.0% 0.045 245); --blue-500: oklch(58.0% 0.180 245); --blue-700: oklch(45.0% 0.150 245); /* 5.52:1 em blue-100 */ /* Escala do PALCO (stage) — L fixos do contrato-consultor, matiz segue a família (--neutral-h) */ --stage-ink-1000: oklch(15.5% 0.012 var(--neutral-h)); /* fundo base do palco */ --stage-ink-950: oklch(19.0% 0.013 var(--neutral-h)); /* elevado (header da moldura) */ --stage-ink-900: oklch(23.0% 0.014 var(--neutral-h)); /* borda/hairline do palco */ --stage-haze-100: oklch(98.0% 0.004 var(--neutral-h)); /* texto principal — 18.44:1 */ --stage-haze-300: oklch(82.0% 0.010 var(--neutral-h)); /* subtítulo — 11.22:1 */ --stage-haze-500: oklch(66.0% 0.012 var(--neutral-h)); /* meta/legal — 6.30:1 */ /* ========================================================== 4. TIPOGRAFIA ========================================================== Uma família de UI + uma display + mono SÓ pra código/ID (dinheiro = Inter + tabular-nums, NUNCA mono — ver 03). */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Sora', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-num: var(--font-sans); /* números/dinheiro: sans + tnum */ /* Escala do CONSOLE (fixa, densa — app B2B desktop-first) */ --text-xs: 0.75rem; /* 12 — metadados, eyebrow, label de badge */ --text-sm: 0.8125rem; /* 13 — células de tabela, hints */ --text-base: 0.875rem; /* 14 — corpo do console */ --text-md: 1rem; /* 16 — corpo confortável / mobile */ --text-lg: 1.125rem; /* 18 — título de card */ --text-xl: 1.25rem; /* 20 — título de seção */ --text-2xl: 1.5rem; /* 24 — título de página */ --text-3xl: 1.75rem; /* 28 — número grande de dashboard */ /* Escala FLUID do STAGE (páginas públicas branded, mobile-first) */ --stage-title: clamp(1.4rem, 5.5vw, 2rem); --stage-lead: clamp(0.95rem, 3.4vw, 1.0625rem); --stage-card-h: clamp(1.125rem, 4.5vw, 1.375rem); --stage-body: 0.95rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-display: 800; --leading-tight: 1.1; --leading-snug: 1.35; --leading-normal: 1.5; /* Tracking aperta com o tamanho (regra Stripe/Linear — por faixa, nunca global). Utilitários .tk-* em 03-components. */ --tracking-display: -0.028em; /* ≥28px — títulos de página, valores hero */ --tracking-heading: -0.018em; /* 20–26px */ --tracking-snug: -0.010em; /* 16–19px */ --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* labels uppercase */ /* ========================================================== 5. SPACING — escala 4px (fechada; não inventar degrau) ========================================================== */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ========================================================== 6. RADIUS — vocabulário fechado (Linear: raio inconsistente é o jeito mais rápido de barateá-lo) ========================================================== */ --radius-sm: 6px; /* chips, badges, inputs pequenos */ --radius: 10px; /* inputs, botões, dropdown */ --radius-md: 14px; /* cards */ --radius-lg: 20px; /* cards hero, painéis do stage */ --radius-xl: 28px; /* molduras grandes, topo de bottom-sheet */ --radius-pill: 9999px; /* ========================================================== 7. SOMBRAS — 2-3 camadas (contato curto + ambiente longo), tingidas pela família (--shadow-h), NUNCA preto puro. 1 camada só = barato (saas-premium §4). ========================================================== */ --shadow-xs: 0 1px 2px oklch(24% 0.06 var(--shadow-h) / 0.06); --shadow-sm: 0 1px 2px oklch(24% 0.06 var(--shadow-h) / 0.05), 0 2px 4px oklch(24% 0.06 var(--shadow-h) / 0.05); --shadow: 0 1px 2px oklch(24% 0.06 var(--shadow-h) / 0.04), 0 3px 6px -1px oklch(24% 0.06 var(--shadow-h) / 0.06), 0 6px 12px -2px oklch(24% 0.06 var(--shadow-h) / 0.05); --shadow-md: 0 1px 2px oklch(24% 0.06 var(--shadow-h) / 0.04), 0 6px 12px -2px oklch(24% 0.06 var(--shadow-h) / 0.07), 0 14px 28px -6px oklch(24% 0.06 var(--shadow-h) / 0.07); --shadow-lg: 0 2px 4px oklch(24% 0.06 var(--shadow-h) / 0.04), 0 12px 22px -6px oklch(24% 0.06 var(--shadow-h) / 0.10), 0 28px 48px -12px oklch(24% 0.06 var(--shadow-h) / 0.12); --shadow-raise: 0 2px 4px oklch(24% 0.06 var(--shadow-h) / 0.05), 0 8px 16px -4px oklch(24% 0.06 var(--shadow-h) / 0.10); /* hover de card/linha clicável */ --shadow-drawer: -12px 0 32px -12px oklch(24% 0.06 var(--shadow-h) / 0.16), -2px 0 8px -4px oklch(24% 0.06 var(--shadow-h) / 0.08); --shadow-sheet: 0 -12px 40px -8px oklch(0% 0 0 / 0.45); --shadow-stage-card: 0 24px 60px -12px oklch(0% 0 0 / 0.55), 0 0 0 1px oklch(100% 0 0 / 0.06); /* ========================================================== 8. MOTION — curvas próprias, nunca default do browser ========================================================== */ --motion-fast: 90ms; /* hover, toggle de estado */ --motion-base: 160ms; /* transições comuns */ --motion-slow: 240ms; /* entrada de drawer/painel */ --motion-sheet: 300ms; /* bottom-sheet, navegação */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* out-expo suave — entradas */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* deslocamentos */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* geral */ /* ========================================================== 9. TOQUE, CONTROLES E LAYOUT ========================================================== */ --tap-min: 44px; /* WCAG 2.5.5 / gotcha F27 — nav primária e ações */ --tap-cta: 56px; /* CTA primário mobile */ --control-h: 40px; /* altura padrão de input/botão desktop */ --control-h-sm: 34px; --control-h-lg: 44px; /* mobile / formulário público */ --header-height: 56px; --console-container: 1280px; --container-padding: var(--space-6); --row-height: 48px; /* linha de tabela/lista (≥44 touch) */ --sidebar-width: 240px; --sidebar-collapsed: 64px; --drawer-width: 460px; --stage-content-max: 560px; --stage-card-max: 440px; /* Breakpoints (referência — CSS var não entra em media query): xs 375 · sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1440 */ } /* ============================================================ RAMPA DE MARCA — re-declaração no escopo do STAGE (fix audit F3, achado F2a: "2º baking"). Custom property resolve var() no ELEMENTO QUE DECLARA e herda o valor assado — declarada só em :root, a rampa ficava presa ao --brand-h/-c do documento e o branding runtime por tenant (branding.ts seta --brand-h/-c no nó .stage) só aplicava nos tokens re-declarados no escopo. Mesmas fórmulas de cima (fonte única de verdade = manter em sincronia com o bloco 1); no tema default o computed é IDÊNTICO. De propósito NÃO re-declara neutros/stage-ink: a família neutra é do PRODUTO (ex.: navy do contrato), não do tenant — tenant colore acentos, não o palco inteiro. ============================================================ */ [data-surface="stage"], .stage { --brand-50: oklch(97% calc(var(--brand-c) * 0.12) var(--brand-h)); --brand-100: oklch(93% calc(var(--brand-c) * 0.30) var(--brand-h)); --brand-200: oklch(86% calc(var(--brand-c) * 0.55) var(--brand-h)); --brand-300: oklch(78% calc(var(--brand-c) * 0.85) var(--brand-h)); --brand-400: oklch(70% var(--brand-c) var(--brand-h)); --brand-500: oklch(58% var(--brand-c) var(--brand-h)); --brand-600: oklch(50% var(--brand-c) var(--brand-h)); --brand-650: oklch(46% calc(var(--brand-c) * 0.95) var(--brand-h)); --brand-700: oklch(42% calc(var(--brand-c) * 0.85) var(--brand-h)); --brand-800: oklch(32% calc(var(--brand-c) * 0.60) var(--brand-h)); --brand-900: oklch(24% calc(var(--brand-c) * 0.40) var(--brand-h)); --brand-neon: oklch(78% var(--brand-c) var(--brand-h)); --brand-neon-soft: oklch(78% calc(var(--brand-c) * 0.55) var(--brand-h)); --brand-on-stage: oklch(85% calc(var(--brand-c) * 0.40) var(--brand-h)); --brand-soft-bg: oklch(95% calc(var(--brand-c) * 0.30) var(--brand-h)); --brand-soft-fg: oklch(45% var(--brand-c) var(--brand-h)); --brand-soft-border: oklch(88% calc(var(--brand-c) * 0.45) var(--brand-h)); --brand-ring: oklch(50% var(--brand-c) var(--brand-h) / 0.30); --text-on-brand: oklch(99% 0.005 var(--brand-h)); } /* ============================================================ MOTION — prefers-reduced-motion (D6 / WCAG 2.3.3, obrigatório) Zera as DURAÇÕES na fonte; o kill-switch global de elementos está em 03-components.css. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0.01ms; --motion-base: 0.01ms; --motion-slow: 0.01ms; --motion-sheet: 0.01ms; } }