/* ===================================================================== MR START — tokens.css IDENTIDADE OFICIAL Modelo Recorrente. Única fonte de verdade visual. Paleta da marca 01 INSTITUCIONAL #043035 petrol (base) 02 INSTITUCIONAL #18616D teal 03 INSTITUCIONAL #76A8B3 steel 04 APOIO #000000 05 APOIO #FFFFFF 06 APOIO #939393 07 APOIO #FFE97B amarelo (destaque) 08 APOIO #A81B36 crimson (erro) 09 APOIO #FF6417 laranja (atenção) Regra da marca: fundo = gradiente escuro azul-petrol · texto branco · destaque amarelo. Contraste verificado (WCAG, sobre o gradiente #04262B): branco 15.9 · amarelo 13.1 · verde 7.4 · steel 6.1 · laranja 5.4 crimson puro 2.2 ✗ → como TEXTO usa-se o tint --danger (5.1); o crimson fica só em preenchimento sólido (branco sobre ele: 7.3) petrol sobre amarelo (botão primário): 11.6 ===================================================================== */ :root{ /* ---------- Marca ---------- */ --mr-petrol: #043035; --mr-teal: #18616D; --mr-steel: #76A8B3; --mr-yellow: #FFE97B; --mr-crimson: #A81B36; --mr-orange: #FF6417; --mr-gray: #939393; /* ---------- Superfícies ---------- O fundo é a foto da marca (css/gradient.css) — QUASE PRETA, com o brilho teal num canto só. Os cards flutuam em vidro; superfícies "solid" são para modais/sidebar. */ --bg: #030E10; /* base sob a foto (preto-petróleo) */ --bg-deep: #000607; --surface: rgba(6, 38, 43, 0.52); --surface-solid: #04191D; --surface-2: rgba(118, 168, 179, 0.08); --surface-hover: rgba(255, 255, 255, 0.05); --surface-active:rgba(255, 255, 255, 0.09); /* ---------- Texto ---------- */ --text: #FFFFFF; --text-dim: rgba(255, 255, 255, 0.62); --text-faint: rgba(255, 255, 255, 0.38); /* ---------- Bordas ---------- */ --border: rgba(118, 168, 179, 0.16); --border-strong: rgba(118, 168, 179, 0.34); /* ---------- Destaque (amarelo da marca) ---------- */ --accent: #FFE97B; --accent-2: #FFF3AC; --accent-text: #043035; /* texto sobre amarelo */ --accent-soft: rgba(255, 233, 123, 0.13); --accent-glow: rgba(255, 233, 123, 0.38); /* ---------- Semânticos ---------- success verde da casa (única cor fora da paleta; escolhido na mesma família fria do petrol/teal para não brigar com o amarelo — contraste 7.4 sobre o gradiente) danger crimson da marca: tint para texto, sólido para fill warning laranja da marca info steel institucional */ --success: #35C79A; --success-solid: #1E9E78; --success-soft: rgba(53, 199, 154, 0.14); --success-border: rgba(53, 199, 154, 0.36); --danger: #F0607A; /* texto/ícone sobre escuro */ --danger-solid: #A81B36; /* fill (texto branco) */ --danger-soft: rgba(168, 27, 54, 0.24); --danger-border: rgba(240, 96, 122, 0.38); --warning: #FF6417; --warning-solid: #FF6417; --warning-soft: rgba(255, 100, 23, 0.15); --warning-border: rgba(255, 100, 23, 0.38); --info: #76A8B3; --info-solid: #18616D; --info-soft: rgba(118, 168, 179, 0.14); --info-border: rgba(118, 168, 179, 0.36); /* "pontual" no financeiro — laranja da marca (não há roxo na ID) */ --violet: #FF6417; --violet-soft: rgba(255, 100, 23, 0.14); --violet-border: rgba(255, 100, 23, 0.36); /* ---------- Tipografia ---------- */ --font-sans: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; /* ---------- Escala tipográfica ---------- Bricolage é variável (opsz 12–96): o corpo pede peso 400–500 e o display pede 800 com tracking negativo. É esse contraste de peso que cria hierarquia — não tamanho sozinho. */ --fs-display: clamp(34px, 5vw, 56px); --fs-h1: clamp(28px, 4.5vw, 46px); --fs-h2: 20px; --fs-h3: 16px; --fs-body: 14px; --fs-small: 12.5px; --fs-micro: 11px; --fs-eyebrow: 10px; --tracking-display: -0.035em; --tracking-title: -0.02em; --tracking-eyebrow: 0.3em; /* ---------- Espaçamento (base 4) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; --sp-18: 72px; /* ---------- Densidade ---------- Padrão = confortável (conteúdo: aulas, refs, materiais). [data-density="compact"] = ferramenta (Financeiro, Admin): mais linhas na tela, menos respiro. */ --pad-card: 22px; --gap-grid: 16px; --row-h: 44px; --pad-cell: 12px 14px; --gap-stack: 12px; /* ---------- Raios ---------- */ --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-pill: 999px; /* ---------- Chanfro (assinatura da marca) ---------- A placa amarela do logo tem os cantos NW e SE cortados a 45° (~20% da altura). Todo preenchimento amarelo de destaque usa o mesmo corte via clip-path: */ --notch: 9px; --notch-lg: 13px; --notch-clip: polygon( var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch)); --notch-clip-lg: polygon( var(--notch-lg) 0, 100% 0, 100% calc(100% - var(--notch-lg)), calc(100% - var(--notch-lg)) 100%, 0 100%, 0 var(--notch-lg)); /* ---------- Sombras ---------- */ --shadow-card: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 44px rgba(0,0,0,0.5); --shadow-modal: 0 30px 90px rgba(0,0,0,0.7); --shadow-glow: 0 8px 26px var(--accent-glow); /* ---------- Vidro (3 níveis, por elevação) ---------- O blur cresce com a distância do fundo: quanto mais "alto" o elemento flutua, mais ele desfoca o que está atrás. */ --glass-1: blur(14px) saturate(130%); /* card, tabela */ --glass-1-bg: rgba(6, 38, 43, 0.52); --glass-2: blur(18px) saturate(135%); /* sidebar, topbar */ --glass-2-bg: rgba(1, 14, 17, 0.68); --glass-3: blur(26px) saturate(140%); /* modal, toast, mini player */ --glass-3-bg: rgba(3, 24, 28, 0.9); --glass-blur: var(--glass-1); /* alias legado */ /* ---------- Ícones ---------- Decorativos entram com opacidade reduzida; funcionais em cheio. */ --icon-sm: 13px; --icon-md: 16px; --icon-lg: 20px; --icon-xl: 26px; --icon-decor-opacity: 0.72; /* ---------- Layout ---------- */ --sidebar-w: 252px; --page-max: 1240px; } /* Modo compacto — telas-ferramenta */ [data-density="compact"]{ --pad-card: 15px; --gap-grid: 10px; --row-h: 34px; --pad-cell: 8px 12px; --gap-stack: 8px; }