/** * Sistema de design "Calor editorial" — único arquivo de tokens consumido * por TUDO no plugin (os dois apps React, o widget JS puro da vaga, e a * tela de admin). Nada de framework CSS: só custom properties + algumas * classes de componente reutilizáveis (.md-*). * * Regra de ouro: nenhuma cor/tamanho/espaçamento é escrito solto em outro * arquivo CSS do plugin — sempre via var(--md-*). Mudar a identidade * visual inteira deveria significar mudar só este arquivo. */ :root { /* ===== Ação e marca ===== */ --md-terra: #b4552f; --md-terra-deep: #9c4526; --md-terra-tint: #f7e6da; --md-amber: #d9962e; --md-amber-tint: #f5efe6; --md-amber-text: #875912; --md-green: #4e8a5f; --md-green-tint: #e8f3eb; --md-green-text: #356442; --md-red: #bf4030; --md-red-tint: #f4e8e7; --md-red-text: #7f251a; /* ===== Neutros quentes ===== */ --md-bg: #f7f2ea; --md-card: #fffdf9; --md-sunken: #f2ead9; --md-ink: #362c24; /* Escurecido de #7a6d5f pra fechar 4.5:1 (WCAG AA) sobre --md-sunken — antes ficava ~4.3:1, no limite/abaixo do mínimo em textos pequenos (ex: "COBERTURA DE SKILLS", legendas em --md-text-xs). */ --md-muted: #64584b; --md-faint: #99897b; --md-line: #e8ddcf; --md-line-soft: #f0e8dc; /* ===== 9 categorias de anotação ===== Geradas em oklch — mesma luminância (62%) e croma (0.12), só o matiz gira. O hex vem primeiro como fallback (navegador sem suporte a oklch ignora a declaração seguinte e fica com o hex); quem suporta usa a oklch por cima. */ --md-cat-info: #c46761; --md-cat-info: oklch( 62% 0.12 25 ); --md-cat-objetivo: #bd7138; --md-cat-objetivo: oklch( 62% 0.12 55 ); --md-cat-resumo: #a77f19; --md-cat-resumo: oklch( 62% 0.12 85 ); --md-cat-formacao: #7d9034; --md-cat-formacao: oklch( 62% 0.12 120 ); --md-cat-experiencia: #339c6d; --md-cat-experiencia: oklch( 62% 0.12 160 ); --md-cat-habilidades: #009ba3; --md-cat-habilidades: oklch( 62% 0.12 200 ); --md-cat-idiomas: #3e8cc9; --md-cat-idiomas: oklch( 62% 0.12 245 ); --md-cat-certificacoes: #8c76c6; --md-cat-certificacoes: oklch( 62% 0.12 295 ); --md-cat-cursos: #b5689d; --md-cat-cursos: oklch( 62% 0.12 340 ); /* ===== Tipografia ===== */ --md-font-display: 'Lora', Georgia, serif; --md-font-ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --md-font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Escala: 11 / 12.5 / 13.5 / 16 / 21 / 26px (mobile: hero 27px, títulos de card 19px) */ --md-text-xs: 12px; --md-text-sm: 12.5px; --md-text-base: 13.5px; --md-text-md: 16px; --md-text-lg: 21px; --md-text-xl: 26px; --md-text-hero-mobile: 27px; --md-text-card-title-mobile: 19px; /* ===== Espaçamento e raio ===== */ --md-space-1: 4px; --md-space-2: 8px; --md-space-3: 12px; --md-space-4: 16px; --md-space-5: 20px; --md-space-6: 24px; --md-space-7: 28px; --md-radius-controle: 9px; --md-radius-card: 14px; --md-radius-pill: 99px; --md-shadow-card: 0 1px 2px rgba( 54, 44, 36, 0.06 ), 0 4px 14px rgba( 54, 44, 36, 0.05 ); } /* ============================================================ Componentes base — usados pelos dois apps React + widget + admin ============================================================ */ .md-btn-primary, .md-btn-secondary { font-family: var( --md-font-ui ); font-size: var( --md-text-base ); font-weight: 600; border-radius: var( --md-radius-controle ); padding: 10px 20px; min-height: 44px; cursor: pointer; border: 1px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease; /* Essas classes também são usadas em (ex: CTAs do widget de vaga) — sem isso, o link herda sublinhado nativo e vira inline (padding sem efeito de verdade), destoando visualmente de quando é um