/* ============================================================ Design tokens — Portal Modo Solutions Academy Uma só gramática. Cada marca troca apenas as variáveis de cor através de [data-brand] no . Os componentes (base.css) consomem var(--brand), var(--bg) etc. e se re-tematizam sozinhos. ============================================================ */ :root { /* Tipografia */ --font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Montserrat", system-ui, sans-serif; --font-serif: "Spectral", Georgia, "Times New Roman", serif; /* Escala modular (clamp p/ fluidez) */ --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem); --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem); --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); --step-2: clamp(1.45rem, 1.25rem + 1vw, 1.9rem); --step-3: clamp(1.9rem, 1.5rem + 2vw, 2.9rem); --step-4: clamp(2.5rem, 1.9rem + 3.2vw, 4.4rem); --step-5: clamp(3.2rem, 2.2rem + 5vw, 6.5rem); /* Ritmo / espaço */ --space-1: 0.35rem; --space-2: 0.6rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.25rem; --space-6: 3.5rem; --space-7: 5.5rem; /* Layout */ --container: 64rem; --container-wide: 78rem; --radius-s: 10px; --radius: 16px; --radius-l: 24px; --radius-pill: 999px; /* Movimento */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 0.18s var(--ease); --t: 0.34s var(--ease); --t-slow: 0.7s var(--ease); /* Sombras (ajustadas por marca abaixo) */ --shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.55); --shadow-lift: 0 30px 70px -28px rgba(0, 0, 0, 0.6); } /* ---------- Tema neutro / Hub ---------- */ :root, [data-brand="hub"] { --bg: #0c1430; --bg-grad: radial-gradient(120% 90% at 50% -10%, #16275e 0%, #0c1430 55%, #070b1c 100%); --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.07); --ink: #f4f7ff; --muted: #aab6d8; --line: rgba(255, 255, 255, 0.14); --brand: #1453c7; --brand-bright: #2e7be6; --accent: #f5a800; --accent-ink: #0c1430; --on-brand: #ffffff; } /* ---------- MODO SOLUTIONS ACADEMY — azul-royal profundo, glow de estúdio ---------- */ [data-brand="msa"] { --bg: #040D24; --bg-grad: radial-gradient(circle at 50% 40%, #1A4FAE 0%, #11377F 36%, #0A2150 70%, #040D24 100%); --surface: rgba(255, 255, 255, 0.06); --surface-2: rgba(255, 255, 255, 0.11); --surface-solid: #ffffff; --ink: #ffffff; --muted: #cfe0ff; /* azul-claro mais brilhante p/ legibilidade no fundo escuro */ --line: rgba(255, 255, 255, 0.16); --brand: #11377F; /* azul profundo p/ preenchimentos */ --brand-bright: #5E9BFF; /* azul-céu p/ ícones e links — alto contraste no escuro */ --accent: #f5a800; /* dourado de apoio, ponte com Wellington */ --accent-2: #2F6BFF; /* glow elétrico azul */ --accent-ink: #040D24; --on-brand: #ffffff; --shadow: 0 22px 60px -26px rgba(2, 10, 30, 0.8); --shadow-lift: 0 36px 80px -30px rgba(2, 10, 30, 0.85); } /* ---------- JOÃO — bordô + laranja ---------- */ [data-brand="joao"] { --bg: #6b1a2a; --bg-grad: radial-gradient(125% 100% at 78% -5%, #8a2438 0%, #6b1a2a 42%, #531320 72%, #3c0d18 100%); --surface: rgba(255, 255, 255, 0.06); --surface-2: rgba(255, 255, 255, 0.1); --surface-solid: #fbf3ef; --ink: #fdf6f3; --muted: #e7c2c9; --line: rgba(255, 224, 210, 0.18); --brand: #e87520; --brand-bright: #ff9242; --accent: #e87520; --accent-2: #ffb06a; --accent-ink: #3c0d18; --on-brand: #ffffff; --shadow: 0 22px 60px -26px rgba(40, 6, 14, 0.7); --shadow-lift: 0 36px 80px -30px rgba(40, 6, 14, 0.8); } /* ---------- WELLINGTON — navy + dourado, dossiê clínico ---------- */ [data-brand="wellington"] { --bg: #111e4a; --bg-grad: radial-gradient(120% 95% at 50% -8%, #233a86 0%, #1b2d6b 40%, #111e4a 70%, #0a1230 100%); --surface: rgba(255, 255, 255, 0.045); --surface-2: rgba(255, 255, 255, 0.08); --surface-solid: #f7f5ef; --ink: #f5f7ff; --muted: #aeb9dd; --line: rgba(245, 168, 0, 0.28); --brand: #f5a800; --brand-bright: #ffc23d; --accent: #f5a800; --accent-2: #ffd57a; --accent-ink: #111e4a; --on-brand: #111e4a; --shadow: 0 22px 60px -26px rgba(4, 9, 28, 0.72); --shadow-lift: 0 36px 80px -30px rgba(4, 9, 28, 0.82); }