/* ════════════════════════════════════════════════════════════════ MEKATRONIK · DESIGN TOKENS · v4 ---------------------------------------------------------------- Variáveis CSS semânticas para uso em projetos Mekatronik (slides, propostas, sites, apps). Cobre LIGHT MODE (default) e DARK MODE. Sem cores fora desta paleta. Sem fontes além de Syne. Sem sombras / glow / gradientes (brand é flat). Fonte da verdade: meka-brand/IDENTIDADE-VISUAL.md site-v4/_briefing/02-KIT-MARCA-CONTEUDO.md §1 Atualizado: 2026-08 · v4 (herdado da v3 + tokens novos no §V4) ═══════════════════════════════════════════════════════════════════ */ :root { /* ─── BRAND COLORS (paleta oficial — 9 PANTONE, valores exatos) ─── */ --mk-blue: #026AEF; /* PANTONE 285 C · única cor saturada usada com frequência */ --mk-navy: #023659; /* PANTONE 302 C · par escuro do azul */ --mk-black: #000000; /* Black 6 C */ --mk-cool-gray: #838382; /* COOL GRAY 8 C */ --mk-white: #FFFFFF; /* Acentos pontuais (uso parcimonioso — uma cor acentual por peça, no máximo) */ --mk-orange: #EF8E5E; /* PANTONE 1635 C · números positivos / categoria operação */ --mk-red: #DB311B; /* PANTONE 485 C · atenção / risco (raro, dessaturadamente) */ --mk-lime: #D8E16D; /* PANTONE 379 C · sustentabilidade / natureza */ --mk-lavender: #C1BAFD; /* PANTONE 2635 C · categoria AI / digital */ --mk-yellow: #EFCB1D; /* PANTONE 7405 C · energia / informativo */ /* ─── SEMANTIC TOKENS · LIGHT MODE (default) ─── */ --mk-bg: #FFFFFF; /* fundo principal */ --mk-bg-elevated: #F9FAFB; /* fundo de cards/superfícies elevadas */ --mk-bg-emphasis: #F3F4F6; /* fundo de headers neutros (tier t1, etc) */ --mk-text: #1F2937; /* texto principal */ --mk-text-muted: #6B7280; /* texto secundário (descrição, body soft) */ --mk-text-mute: #9CA3AF; /* texto muito muted (counter, metadata) */ --mk-rule: #E5E7EB; /* borda padrão entre elementos */ --mk-surface: rgba(31,41,55,0.025); /* superfície translúcida sutil */ --mk-on-accent: #FFFFFF; /* texto sobre acento mk-blue */ /* ─── TYPOGRAPHY ─── */ --mk-font: 'Syne', system-ui, -apple-system, sans-serif; /* Pesos · default em títulos é 700 (NÃO 800) */ --mk-fw-regular: 400; --mk-fw-medium: 500; --mk-fw-semibold: 600; --mk-fw-bold: 700; /* default em headings */ /* Tracking — sempre negativo em títulos */ --mk-track-hero: -0.040em; /* hero ≥36pt */ --mk-track-h2: -0.030em; /* seção 22-44pt */ --mk-track-h3: -0.020em; /* subtítulos 18-32pt */ --mk-track-bignum: -0.050em; /* números grandes em destaque 60pt+ */ --mk-track-card: -0.020em; /* nomes de card */ --mk-track-eyebrow: +0.060em; /* eyebrow uppercase */ --mk-track-body: 0; /* corpo de texto */ /* Escala tipográfica responsiva */ --mk-fs-hero: clamp(36pt, 4.8vw, 72pt); --mk-fs-h2: clamp(22pt, 3.2vw, 44pt); --mk-fs-h3: clamp(18pt, 2.1vw, 30pt); --mk-fs-bignum: clamp(60pt, 13vw, 200pt); --mk-fs-body: clamp(13pt, 1.35vw, 18pt); --mk-fs-small: clamp(10pt, 1vw, 13pt); --mk-fs-eyebrow: clamp(11pt, 1.05vw, 14pt); --mk-fs-footer: 9.5pt; /* Line height */ --mk-lh-hero: 1.05; --mk-lh-heading: 1.15; --mk-lh-body: 1.55; /* ─── SPACING (8px base scale) ─── */ --mk-sp-1: 4px; --mk-sp-2: 8px; --mk-sp-3: 12px; --mk-sp-4: 16px; --mk-sp-5: 24px; --mk-sp-6: 32px; --mk-sp-7: 48px; --mk-sp-8: 64px; --mk-sp-9: 96px; /* ─── RADIUS ─── */ --mk-radius-sm: 4px; --mk-radius-md: 8px; --mk-radius-pill: 999px; /* botões, chips, pills */ /* NUNCA usar radius >8px exceto em pills — mantém feel flat geométrico */ /* ─── BORDER WIDTHS ─── */ --mk-border: 1px; --mk-border-accent: 3px; /* topo de card destaque, header H2 underline */ --mk-border-callout: 4px; /* barra lateral em blockquote/callout/transition-strip */ /* ─── Z-INDEX ─── */ --mk-z-content: 1; --mk-z-chrome: 200; --mk-z-overlay: 1000; } /* ─── DARK MODE ─── Aplicar via classe .dark-mode em , ou via prefers-color-scheme. Dark é o default em digital. */ @media (prefers-color-scheme: dark) { :root:not(.light-mode) { --mk-bg: #030712; --mk-bg-elevated: #111827; --mk-bg-emphasis: #1F2937; --mk-text: #FFFFFF; --mk-text-muted: rgba(255,255,255,0.78); --mk-text-mute: rgba(255,255,255,0.55); --mk-rule: rgba(255,255,255,0.18); --mk-surface: rgba(255,255,255,0.04); } } .dark-mode { --mk-bg: #030712; --mk-bg-elevated: #111827; --mk-bg-emphasis: #1F2937; --mk-text: #FFFFFF; --mk-text-muted: rgba(255,255,255,0.78); --mk-text-mute: rgba(255,255,255,0.55); --mk-rule: rgba(255,255,255,0.18); --mk-surface: rgba(255,255,255,0.04); } /* ════════════════════════════════════════════════════════════════ §V4 · TOKENS NOVOS ---------------------------------------------------------------- Acrescentados na v4. NENHUMA cor de marca nova foi criada: tudo aqui é (a) um alfa/tint derivado das 9 cores oficiais ou (b) uma medida de layout. A paleta PANTONE permanece intacta acima. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Variante funcional de acessibilidade ──────────────────────── #026AEF sobre #030712 tem contraste 4,13:1 — passa AA em texto GRANDE (≥24px, ou ≥18,66px bold), mas REPROVA em texto pequeno. --mk-blue-lift é um tint web do mesmo azul, 6,6:1 sobre o fundo escuro, de uso EXCLUSIVO em texto pequeno sobre fundo escuro. Não substitui a cor de marca: fundos, bordas, preenchimentos e títulos grandes continuam usando --mk-blue puro. ------------------------------------------------------------------ */ --mk-blue-lift: #4E93F7; /* Camadas translúcidas do azul de marca (fundos e bordas de card) */ --mk-blue-a04: rgba(2,106,239,0.04); --mk-blue-a08: rgba(2,106,239,0.08); --mk-blue-a14: rgba(2,106,239,0.14); --mk-blue-a25: rgba(2,106,239,0.25); --mk-blue-a45: rgba(2,106,239,0.45); /* Camadas translúcidas do lavender (camada digital / IA) */ --mk-lav-a06: rgba(193,186,253,0.06); --mk-lav-a14: rgba(193,186,253,0.14); --mk-lav-a30: rgba(193,186,253,0.30); /* Hairlines e superfícies (dark) */ --mk-hair: rgba(255,255,255,0.10); --mk-hair-strong: rgba(255,255,255,0.18); --mk-fill: rgba(255,255,255,0.03); --mk-fill-hover: rgba(255,255,255,0.06); /* ── TAG (EX) · conteúdo de exemplo a substituir ───────────────── Âmbar translúcido derivado de --mk-yellow #EFCB1D (PANTONE 7405 C). --ex-ink tem 12,9:1 sobre #030712 (AA/AAA). ------------------------------------------------------------------ */ --ex-bg: rgba(239,203,29,0.10); --ex-bg-strong: rgba(239,203,29,0.16); --ex-border: rgba(239,203,29,0.38); --ex-border-strong: rgba(239,203,29,0.55); --ex-ink: #EFCB1D; --ex-seal-ink: #1A1400; /* texto do selo "EX" sobre âmbar sólido */ /* Banner de versão de trabalho */ --wip-bg: rgba(239,203,29,0.09); --wip-border: rgba(239,203,29,0.30); --wip-ink: rgba(255,255,255,0.82); /* ── STAT TILE (números de resultado) ──────────────────────────── Valor em --mk-orange (regra de marca: laranja = número positivo). Figuras proporcionais no valor; tabulares só em colunas de tabela. ------------------------------------------------------------------ */ --stat-value-ink: var(--mk-orange); --stat-value-fs: clamp(38px, 4.4vw, 60px); --stat-value-fw: 700; --stat-value-track: -0.050em; --stat-label-fs: 13px; --stat-label-ink: rgba(255,255,255,0.62); --stat-source-fs: 12px; --stat-pad: 24px; --stat-gap: 10px; /* ── RÉGUA DE INSTRUMENTAÇÃO (assinatura visual v4) ────────────── Marcação de escala: traços de 1px a cada 8px sobre uma linha-base. Referência ao 1º princípio do método: "instrumentar antes de otimizar". Usada como divisor de seção e sublinha de stat tile. ------------------------------------------------------------------ */ --tick-step: 8px; --tick-h: 5px; --tick-ink: rgba(255,255,255,0.22); --tick-ink-accent: rgba(2,106,239,0.55); --tick-base: rgba(255,255,255,0.10); /* ── MATRIZ soluções × indústrias ────────────────────────────────*/ --matrix-head-bg: rgba(255,255,255,0.05); --matrix-head-solid: #10131E; /* opaco: celula-canto fixa do cabecalho */ --matrix-stub-bg: rgba(255,255,255,0.03); --matrix-line: rgba(255,255,255,0.12); --matrix-cell-pad: 14px 16px; --matrix-col-min: 132px; --matrix-stub-min: 200px; --matrix-mark: var(--mk-blue-lift); /* ● cobertura */ --matrix-mark-soft: rgba(255,255,255,0.58); /* ○ cobertura parcial — 3:1 minimo (WCAG 1.4.11) */ --matrix-mark-none: rgba(255,255,255,0.42); /* — sem cobertura */ /* ── BADGES ──────────────────────────────────────────────────────*/ --badge-fs: 11px; --badge-pad: 5px 11px; --badge-track: 0.10em; --badge-patent-bg: rgba(2,106,239,0.08); --badge-patent-border: rgba(2,106,239,0.45); --badge-patent-ink: var(--mk-blue-lift); --badge-partner-bg: rgba(255,255,255,0.05); --badge-partner-border: rgba(255,255,255,0.28); --badge-partner-ink: rgba(255,255,255,0.88); --badge-product-bg: rgba(193,186,253,0.08); --badge-product-border: rgba(193,186,253,0.35); --badge-product-ink: var(--mk-lavender); /* ── LAYOUT v4 ───────────────────────────────────────────────────*/ --nav-h: 72px; /* altura da barra sticky */ --shell-max: 1280px; --measure: 68ch; /* largura máxima de parágrafo */ }