/* ========================================================================== GRS — Material Design 3 Design Tokens -------------------------------------------------------------------------- Projeto : Grupo Rocha Saude (GRS) — Intranet / ERP Autor : Design System Agent (Claude) Criado : 2026-04-11 Versao : 1.0.0 OBJETIVO -------- Sistema de design tokens Material Design 3 customizado para o GRS. Paleta construida a partir de uma seed verde natural (saude/ervas/chas), com cor secundaria salvia e acentuacao tertiary em ambar dourado (mel / produto natural premium). COMO USAR --------- 1. Injetar via no do intranet.html, DEPOIS do Font Awesome. 2. Usar as variaveis CSS (var(--md-primary), etc.) em estilos novos. 3. Opcional: aplicar classes utilitarias .md3-card, .md3-btn-filled, etc. IMPORTANTE ---------- Este arquivo e NAO-INVASIVO por design: ele APENAS troca a font-family global do body e dos headings — nao mexe em font-size, color, background, margin ou padding de nada existente. Qualquer classe .md3-* so tem efeito se for explicitamente aplicada no markup. ========================================================================== */ /* ========================================================================== 1. ROOT TOKENS — Variaveis globais MD3 (LIGHT THEME vibrant) ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1.1 COLOR — Paleta Material Design 3 LIGHT ------------------------------------------------------------------------ Seed color : #2E7D4F (verde natural / chimarrao / erva mate) Light mode — fundos claros off-white, texto escuro, cores vibrantes em verde Rocha principal + ambar mel tertiary pra destaques. ------------------------------------------------------------------------ */ /* Primary — Verde Rocha (acoes principais, CTAs, links importantes) */ --md-primary: #2E7D4F; --md-on-primary: #FFFFFF; --md-primary-container: #B4F0C4; --md-on-primary-container: #00210E; /* Secondary — Salvia (acoes secundarias, chips, filtros) */ --md-secondary: #52634F; --md-on-secondary: #FFFFFF; --md-secondary-container: #D5E8CF; --md-on-secondary-container: #101F10; /* Tertiary — Ambar mel (destaques, badges premium, highlights) */ --md-tertiary: #8B5E0F; --md-on-tertiary: #FFFFFF; --md-tertiary-container: #FFDDAE; --md-on-tertiary-container: #2C1700; /* Error — Vermelho MD3 padrao (erros, deletes, alertas criticos) */ --md-error: #BA1A1A; --md-on-error: #FFFFFF; --md-error-container: #FFDAD6; --md-on-error-container: #410002; /* Surface — Background e texto base (light theme) */ --md-surface: #FCFDF6; --md-on-surface: #1A1C18; --md-surface-variant: #DEE5D8; --md-on-surface-variant: #424940; /* Surface containers — Niveis de elevacao visual (cards, headers) */ --md-surface-container-lowest: #FFFFFF; --md-surface-container-low: #F3F5EE; --md-surface-container: #EDEFE8; --md-surface-container-high: #E7E9E2; --md-surface-container-highest:#E1E4DD; /* Outline — Bordas e divisores */ --md-outline: #72796F; --md-outline-variant: #C2C9BD; /* Inverse / misc */ --md-inverse-surface: #2F312D; --md-inverse-on-surface: #F0F1EB; --md-inverse-primary: #98D4A9; --md-scrim: #000000; --md-shadow: #000000; /* Extras NAO oficiais do MD3 mas uteis no dia a dia do ERP */ --md-success: #2E7D4F; --md-on-success: #FFFFFF; --md-success-container: #B4F0C4; --md-on-success-container: #00210E; --md-warning: #B8860B; --md-on-warning: #FFFFFF; --md-warning-container: #FFE8B5; --md-on-warning-container: #2B1F00; --md-info: #1A6FB3; --md-on-info: #FFFFFF; --md-info-container: #D3E4FF; --md-on-info-container: #001C38; /* ------------------------------------------------------------------------ 1.2 TYPOGRAPHY — Familias e escala tipografica MD3 ------------------------------------------------------------------------ Display : DM Sans — geometrica, moderna, premium (headings) Body : Roboto Flex — variable font, otima legibilidade (texto) Mono : JetBrains Mono — codigos, SKUs, numeros tecnicos ------------------------------------------------------------------------ */ --md-font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --md-font-body: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --md-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; /* Escala tipografica MD3 (apenas referencia — nao aplicada globalmente) */ --md-type-display-lg: 57px; --md-type-display-md: 45px; --md-type-display-sm: 36px; --md-type-headline-lg: 32px; --md-type-headline-md: 28px; --md-type-headline-sm: 24px; --md-type-title-lg: 22px; --md-type-title-md: 16px; --md-type-title-sm: 14px; --md-type-body-lg: 16px; --md-type-body-md: 14px; --md-type-body-sm: 12px; --md-type-label-lg: 14px; --md-type-label-md: 12px; --md-type-label-sm: 11px; /* Pesos recomendados */ --md-weight-regular: 400; --md-weight-medium: 500; --md-weight-semibold: 600; --md-weight-bold: 700; /* Line-heights recomendados */ --md-leading-tight: 1.2; --md-leading-normal: 1.5; --md-leading-relaxed: 1.7; /* ------------------------------------------------------------------------ 1.3 SHAPE — Raios de borda MD3 ------------------------------------------------------------------------ */ --md-shape-none: 0; --md-shape-xs: 4px; --md-shape-sm: 8px; --md-shape-md: 12px; --md-shape-lg: 16px; --md-shape-xl: 28px; --md-shape-full: 9999px; /* ------------------------------------------------------------------------ 1.4 ELEVATION — Niveis de sombra MD3 (6 niveis: 0-5) ------------------------------------------------------------------------ Baseado em https://m3.material.io/styles/elevation/tokens ------------------------------------------------------------------------ */ --md-elev-0: none; --md-elev-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); --md-elev-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15); --md-elev-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.30), 0px 4px 8px 3px rgba(0, 0, 0, 0.15); --md-elev-4: 0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15); --md-elev-5: 0px 4px 4px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px 6px rgba(0, 0, 0, 0.15); /* ------------------------------------------------------------------------ 1.5 SPACING — Escala de espacamento (base 4) ------------------------------------------------------------------------ */ --md-space-0: 0; --md-space-1: 4px; --md-space-2: 8px; --md-space-3: 12px; --md-space-4: 16px; --md-space-5: 24px; --md-space-6: 32px; --md-space-7: 48px; --md-space-8: 64px; /* ------------------------------------------------------------------------ 1.6 MOTION — Duracoes e easing MD3 (referencia) ------------------------------------------------------------------------ */ --md-motion-short: 150ms; --md-motion-medium: 250ms; --md-motion-long: 400ms; --md-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0); --md-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0); --md-easing-emphasized-in: cubic-bezier(0.05, 0.7, 0.1, 1.0); --md-easing-emphasized-out: cubic-bezier(0.3, 0.0, 0.8, 0.15); } /* ========================================================================== 2. GLOBAL BASE — Aplicacao MINIMA e NAO-INVASIVA -------------------------------------------------------------------------- Apenas font-family. NAO mexer em size, color, background, margin, padding. ========================================================================== */ body { font-family: var(--md-font-body); /* NAO alterar: font-size, color, background, line-height */ } h1, h2, h3, h4, h5, h6 { font-family: var(--md-font-display); /* NAO alterar: font-size, color, margin, font-weight */ } code, kbd, pre, samp { font-family: var(--md-font-mono); } /* ========================================================================== 3. CLASSES UTILITARIAS OPCIONAIS — prefix .md3-* -------------------------------------------------------------------------- Aplicadas APENAS quando o markup usar explicitamente essas classes. Nao ha risco de afetar estilos existentes. ========================================================================== */ /* -------------------------------------------------------------------------- 3.1 CARDS — Superficie elevada com radius MD3 -------------------------------------------------------------------------- */ .md3-card { background-color: var(--md-surface-container-low); color: var(--md-on-surface); border-radius: var(--md-shape-lg); box-shadow: var(--md-elev-1); padding: var(--md-space-5); border: 1px solid var(--md-outline-variant); } .md3-card-elevated { background-color: var(--md-surface-container); color: var(--md-on-surface); border-radius: var(--md-shape-lg); box-shadow: var(--md-elev-2); padding: var(--md-space-5); } .md3-card-filled { background-color: var(--md-surface-container-high); color: var(--md-on-surface); border-radius: var(--md-shape-lg); box-shadow: var(--md-elev-0); padding: var(--md-space-5); } /* -------------------------------------------------------------------------- 3.2 BOTOES — 3 variantes MD3 (Filled, Outlined, Text) -------------------------------------------------------------------------- */ .md3-btn-filled, .md3-btn-outlined, .md3-btn-text { display: inline-flex; align-items: center; justify-content: center; gap: var(--md-space-2); height: 40px; padding: 0 var(--md-space-5); border-radius: var(--md-shape-full); font-family: var(--md-font-body); font-size: var(--md-type-label-lg); font-weight: var(--md-weight-medium); letter-spacing: 0.1px; cursor: pointer; border: none; transition: background-color var(--md-motion-short) var(--md-easing-standard), box-shadow var(--md-motion-short) var(--md-easing-standard); text-decoration: none; white-space: nowrap; } .md3-btn-filled { background-color: var(--md-primary); color: var(--md-on-primary); box-shadow: var(--md-elev-0); } .md3-btn-filled:hover { box-shadow: var(--md-elev-1); filter: brightness(1.05); } .md3-btn-filled:active { filter: brightness(0.95); } .md3-btn-outlined { background-color: transparent; color: var(--md-primary); border: 1px solid var(--md-outline); } .md3-btn-outlined:hover { background-color: rgba(46, 125, 79, 0.08); } .md3-btn-text { background-color: transparent; color: var(--md-primary); padding: 0 var(--md-space-3); } .md3-btn-text:hover { background-color: rgba(46, 125, 79, 0.08); } /* -------------------------------------------------------------------------- 3.3 PILLS / CHIPS — Radius full, padding discreto -------------------------------------------------------------------------- */ .md3-pill { display: inline-flex; align-items: center; gap: var(--md-space-2); height: 32px; padding: 0 var(--md-space-4); border-radius: var(--md-shape-full); background-color: var(--md-secondary-container); color: var(--md-on-secondary-container); font-family: var(--md-font-body); font-size: var(--md-type-label-lg); font-weight: var(--md-weight-medium); border: 1px solid var(--md-outline-variant); } .md3-pill-primary { background-color: var(--md-primary-container); color: var(--md-on-primary-container); border-color: transparent; } .md3-pill-tertiary { background-color: var(--md-tertiary-container); color: var(--md-on-tertiary-container); border-color: transparent; } .md3-pill-error { background-color: var(--md-error-container); color: var(--md-on-error-container); border-color: transparent; } /* -------------------------------------------------------------------------- 3.4 SURFACE HELPERS — Atalhos para backgrounds MD3 -------------------------------------------------------------------------- */ .md3-surface { background-color: var(--md-surface); color: var(--md-on-surface); } .md3-surface-variant { background-color: var(--md-surface-variant); color: var(--md-on-surface-variant); } .md3-surface-low { background-color: var(--md-surface-container-low); color: var(--md-on-surface); } .md3-surface-high { background-color: var(--md-surface-container-high); color: var(--md-on-surface); } /* -------------------------------------------------------------------------- 3.5 TEXT HELPERS — Classes tipograficas MD3 -------------------------------------------------------------------------- */ .md3-display-lg { font-family: var(--md-font-display); font-size: var(--md-type-display-lg); line-height: var(--md-leading-tight); font-weight: var(--md-weight-regular); } .md3-display-md { font-family: var(--md-font-display); font-size: var(--md-type-display-md); line-height: var(--md-leading-tight); font-weight: var(--md-weight-regular); } .md3-headline-lg { font-family: var(--md-font-display); font-size: var(--md-type-headline-lg); line-height: var(--md-leading-tight); font-weight: var(--md-weight-semibold); } .md3-headline-md { font-family: var(--md-font-display); font-size: var(--md-type-headline-md); line-height: var(--md-leading-tight); font-weight: var(--md-weight-semibold); } .md3-title-lg { font-family: var(--md-font-display); font-size: var(--md-type-title-lg); line-height: var(--md-leading-normal); font-weight: var(--md-weight-medium); } .md3-body-lg { font-family: var(--md-font-body); font-size: var(--md-type-body-lg); line-height: var(--md-leading-normal); font-weight: var(--md-weight-regular); } .md3-body-md { font-family: var(--md-font-body); font-size: var(--md-type-body-md); line-height: var(--md-leading-normal); font-weight: var(--md-weight-regular); } .md3-label-lg { font-family: var(--md-font-body); font-size: var(--md-type-label-lg); line-height: var(--md-leading-normal); font-weight: var(--md-weight-medium); letter-spacing: 0.1px; } /* ========================================================================== FIM — GRS MD3 Tokens v1.0.0 ========================================================================== */ /* === MD3 module-card BEGIN === */ /* Aplicado em 2026-04-11 — Opcao A (override CSS) */ /* Escopo: cards de "Explorar Modulos" na home do intranet.html */ /* Rollback: remover tudo entre BEGIN e END, ou restaurar .bak.* */ .module-cards { display: grid; gap: 16px; } .module-card { background: var(--md-surface-container-low, #F3F5EE) !important; border: none !important; border-radius: var(--md-shape-lg, 16px) !important; padding: 20px !important; box-shadow: var(--md-elev-1, 0 1px 2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06)) !important; color: var(--md-on-surface, #1A1C18) !important; font-family: var(--md-font-body, 'Roboto Flex', system-ui, sans-serif) !important; transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease !important; cursor: pointer; position: relative; overflow: hidden; } .module-card:hover { background: var(--md-surface-container, #EDEFE8) !important; box-shadow: var(--md-elev-2, 0 2px 6px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.08)) !important; transform: translateY(-2px) !important; } .module-card:active { box-shadow: var(--md-elev-1, 0 1px 2px rgba(0,0,0,.08)) !important; transform: translateY(0) !important; } .module-card:focus-visible { outline: 2px solid var(--md-primary, #2E7D4F); outline-offset: 2px; } /* Titulo do card (h3/h4 dentro) */ .module-card h3, .module-card h4 { font-family: var(--md-font-display, 'DM Sans', system-ui, sans-serif) !important; color: var(--md-on-surface, #1A1C18) !important; margin: 0 0 6px 0; font-weight: 600; } /* Texto secundario */ .module-card p, .module-card small, .module-card .muted { color: var(--md-outline, #72796F) !important; } /* Icones/emojis maiores dentro do card */ .module-card .icon, .module-card i[class*="fa-"] { color: var(--md-primary, #2E7D4F); } /* === MD3 module-card END === */