/* ============================================================================ ORGANIZASST · DESIGN TOKENS Sistema de design — Saúde e Segurança do Trabalho Fundamento único de cor, tipografia, espaço, forma e movimento. Direção estética: "Trust-tech" — atmosfera naval profunda, sinais verdes de conformidade/aprovação, profundidade glassmórfica, estrutura geométrica. ============================================================================ */ :root { /* --------------------------------------------------------------------------- 1 · COR — MARCA Núcleo: Azul Naval #12314D · Verde Aprovação #73B786 · Branco --------------------------------------------------------------------------- */ /* Azul naval (primária) — escala de tom */ --navy-50: #f3f7fa; --navy-100: #e6edf3; --navy-200: #c6d6e2; --navy-300: #9db5c9; --navy-400: #6688a8; --navy-500: #3a6185; --navy-600: #244c6c; --navy-700: #173d59; --navy-800: #12314d; /* ★ COR DE MARCA */ --navy-900: #0d2438; --navy-950: #081726; /* Verde aprovação (acento) — escala de tom */ --green-50: #f1faf4; --green-100: #e0f3e6; --green-200: #c3e6cd; --green-300: #9dd4ad; --green-400: #73b786; /* ★ COR DE MARCA */ --green-500: #54a36b; --green-600: #3d8a57; /* texto verde acessível sobre branco */ --green-700: #2f7048; --green-800: #27583b; --green-900: #1f4630; /* Neutros */ --white: #ffffff; --paper: #f6f9fb; --ink: #0d2438; --mist: #5a7184; /* Núcleo da marca (apelidos semânticos) */ --brand: var(--navy-800); --brand-deep: var(--navy-950); --accent: var(--green-400); --accent-strong:var(--green-600); /* --- Papéis semânticos: TEMA ESCURO (padrão do produto) --- */ --bg: var(--navy-950); --bg-elev: var(--navy-900); --surface: rgba(255, 255, 255, 0.045); --surface-2: rgba(255, 255, 255, 0.07); --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --text: #eaf1f7; --text-soft: #aebfce; --text-mute: #6f879b; --on-accent: var(--navy-950); /* texto sobre o verde */ --on-brand: #eaf1f7; /* texto sobre o naval */ /* --- Estados semânticos --- */ --success: var(--green-400); --success-ink: var(--green-600); --warning: #e6a23c; --danger: #e0655a; --info: var(--navy-400); /* --------------------------------------------------------------------------- 2 · GRADIENTES E ATMOSFERA --------------------------------------------------------------------------- */ --grad-hero: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-950) 55%, #050f1a 100%); --grad-brand: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-900) 100%); --grad-accent: linear-gradient(135deg, var(--green-400) 0%, var(--green-600) 100%); --grad-ink-to-accent: linear-gradient(120deg, #eaf1f7 0%, var(--green-300) 100%); --grad-sheen: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%); /* Malha radial — usar como background-image em seções de destaque */ --grad-mesh: radial-gradient(60% 80% at 80% -10%, rgba(115,183,134,0.22) 0%, transparent 60%), radial-gradient(50% 60% at -10% 20%, rgba(36,76,108,0.55) 0%, transparent 65%), radial-gradient(80% 90% at 50% 120%, rgba(115,183,134,0.10) 0%, transparent 60%); /* --------------------------------------------------------------------------- 3 · TIPOGRAFIA Display: Sora (geométrica, confiável, técnica) Texto: IBM Plex Sans (legível, profissional, com caráter) Mono: IBM Plex Mono (códigos eSocial: S-2210, S-2220, GHE…) --------------------------------------------------------------------------- */ --font-display: "Sora", "Segoe UI", sans-serif; --font-body: "IBM Plex Sans", "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* Escala tipográfica (fluida, clamp para responsivo) */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: clamp(1.4rem, 1.1rem + 1.2vw, 1.625rem); --text-3xl: clamp(1.7rem, 1.3rem + 1.8vw, 2.125rem); --text-4xl: clamp(2.1rem, 1.5rem + 2.6vw, 2.875rem); --text-5xl: clamp(2.6rem, 1.7rem + 4vw, 3.75rem); --text-6xl: clamp(3.1rem, 1.8rem + 6vw, 5rem); --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --weight-extra: 800; --leading-tight: 1.06; --leading-snug: 1.2; --leading-normal:1.5; --leading-relaxed:1.7; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-wide: 0.08em; /* eyebrows / labels caixa-alta */ /* --------------------------------------------------------------------------- 4 · ESPAÇAMENTO (base 4px) --------------------------------------------------------------------------- */ --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; --space-32: 8rem; --container: 1200px; --container-sm: 760px; --gutter: clamp(1.25rem, 5vw, 3rem); /* --------------------------------------------------------------------------- 5 · FORMA (raios) — o ícone da marca é um squircle --------------------------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-pill:999px; --radius-squircle: 30%; /* moldura de ícone estilo logo */ /* --------------------------------------------------------------------------- 6 · ELEVAÇÃO E BRILHO --------------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(5,15,26,0.4); --shadow-md: 0 6px 18px rgba(5,15,26,0.45); --shadow-lg: 0 18px 44px rgba(5,15,26,0.55); --shadow-xl: 0 32px 70px rgba(5,15,26,0.6); --glow-green: 0 0 0 1px rgba(115,183,134,0.35), 0 10px 40px rgba(115,183,134,0.30); --glow-soft: 0 0 60px rgba(115,183,134,0.18); --ring-focus: 0 0 0 3px rgba(115,183,134,0.45); --inset-top: inset 0 1px 0 rgba(255,255,255,0.08); /* --------------------------------------------------------------------------- 7 · MOVIMENTO (pareado com animations.css) --------------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 0.18s; --dur-base: 0.32s; --dur-slow: 0.6s; /* Camadas (z-index) */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 2000; } /* ---------------------------------------------------------------------------- TEMA CLARO — aplique data-theme="light" em uma seção ou no Mesmos tokens, papéis invertidos. Use para blocos "respiráveis" da LP. ---------------------------------------------------------------------------- */ [data-theme="light"] { --bg: var(--paper); --bg-elev: var(--white); --surface: var(--white); --surface-2: var(--navy-50); --border: var(--navy-100); --border-strong: var(--navy-200); --text: var(--navy-900); --text-soft: var(--navy-600); --text-mute: var(--mist); --on-brand: #eaf1f7; --shadow-sm: 0 1px 2px rgba(18,49,77,0.06); --shadow-md: 0 8px 24px rgba(18,49,77,0.10); --shadow-lg: 0 20px 50px rgba(18,49,77,0.12); --shadow-xl: 0 32px 70px rgba(18,49,77,0.16); --glow-soft: 0 0 60px rgba(115,183,134,0.20); --inset-top: inset 0 1px 0 rgba(255,255,255,0.9); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } }