/* ============================================
MIRASUITE · DESIGN TOKENS
Versão: 1.1 · atualizado 2026-08-10
Sistema: Cinza neutro + Fúcsia (com roxo e rosa como família)
Fontes: DM Sans + DM Mono (Google Fonts)
MUDANÇA 1.0 → 1.1 (decisão do Igor, 2026-08-10):
- O inegociável da marca é o FÚCSIA #D2007A. A base deixou de ser
preto absoluto e passou a ser tons de cinza (--ms-carbon como
superfície escura padrão, no lugar de --ms-black).
- Roxo (--ms-purple) e tons de rosa liberados como família de acento,
desde que legíveis. O acento principal continua sendo o fúcsia.
- Novo --ms-gradient-block (roxo → fúcsia) para dobras de conversão.
- Isso torna coerente o Gestão na Mira, que virou claro em 08/08 e
até então figurava como exceção à regra "dark + fúcsia".
============================================ */
/* --------------------------------------------
IMPORT DE FONTES
Cole no do HTML:
-------------------------------------------- */
:root {
/* ==========================================
CORES · BASE (neutros dark)
========================================== */
--ms-black: #0D0D0F; /* fundo principal dark */
--ms-carbon: #1A1A1C; /* superfície elevada */
--ms-graphite: #2A2A2C; /* bordas, divisores */
--ms-stone: #7A7A74; /* texto terciário, placeholders */
--ms-sand: #C8C6BC; /* texto secundário */
--ms-mist: #F2F0EC; /* texto principal no dark / fundo light */
/* ==========================================
CORES · FÚCSIA (identidade MiraSuite)
========================================== */
--ms-fuchsia: #D2007A; /* primário · CTA, destaques */
--ms-fuchsia-mid: #E060A8; /* secundário · hover, ícones */
--ms-fuchsia-light: #F090C0; /* terciário · elementos suaves */
--ms-fuchsia-fill: rgba(210, 0, 122, 0.10); /* fill · backgrounds sutis */
--ms-fuchsia-border: rgba(210, 0, 122, 0.25); /* borda · pills, cards accent */
--ms-fuchsia-glow: rgba(210, 0, 122, 0.18); /* glow · efeito radial */
/* Roxo · ponta fria da família (adicionado 2026-08-10, aprovado pelo Igor)
Nasceu no Site MiraSuite 3.0. Uso: ponta fria do degradê de bloco.
Não é acento autônomo — o acento principal continua sendo o fúcsia. */
--ms-purple: #7A1FA2;
--ms-purple-fill: rgba(122, 31, 162, 0.10);
--ms-purple-border: rgba(122, 31, 162, 0.25);
/* Gradiente de identidade */
--ms-gradient: linear-gradient(90deg, #D2007A 0%, #E060A8 50%, #F090C0 100%);
--ms-gradient-135: linear-gradient(135deg, #D2007A 0%, #E060A8 100%);
/* Gradiente de bloco · roxo → fúcsia (2026-08-10)
Para dobras de promessa e conversão: hero, plano em destaque, CTA final.
Texto branco por cima. NUNCA atrás de parágrafo longo — legibilidade cai. */
--ms-gradient-block: linear-gradient(135deg, #7A1FA2 0%, #D2007A 100%);
/* ==========================================
TIPOGRAFIA
========================================== */
--ms-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--ms-font-mono: 'DM Mono', 'Fira Code', monospace;
/* Pesos */
--ms-weight-light: 300;
--ms-weight-regular: 400;
--ms-weight-medium: 500;
/* Tamanhos */
--ms-text-xs: 11px;
--ms-text-sm: 13px;
--ms-text-base: 15px;
--ms-text-md: 18px;
--ms-text-lg: 24px;
--ms-text-xl: 32px;
--ms-text-2xl: 40px;
--ms-text-3xl: 56px;
/* Line heights */
--ms-leading-tight: 1.1;
--ms-leading-snug: 1.3;
--ms-leading-normal: 1.5;
--ms-leading-relaxed: 1.65;
--ms-leading-loose: 1.8;
/* Letter spacing */
--ms-tracking-tight: -0.02em;
--ms-tracking-normal: 0em;
--ms-tracking-wide: 0.06em;
--ms-tracking-wider: 0.12em;
/* ==========================================
ESPAÇAMENTO
========================================== */
--ms-space-1: 4px;
--ms-space-2: 8px;
--ms-space-3: 12px;
--ms-space-4: 16px;
--ms-space-5: 20px;
--ms-space-6: 24px;
--ms-space-8: 32px;
--ms-space-10: 40px;
--ms-space-12: 48px;
--ms-space-16: 64px;
--ms-space-20: 80px;
--ms-space-24: 96px;
/* ==========================================
BORDAS E RAIOS
========================================== */
--ms-radius-sm: 4px;
--ms-radius-md: 8px;
--ms-radius-lg: 12px;
--ms-radius-xl: 16px;
--ms-radius-2xl: 24px;
--ms-radius-full: 9999px; /* pills e botões arredondados */
--ms-border-subtle: 0.5px solid var(--ms-graphite);
--ms-border-fuchsia: 0.5px solid var(--ms-fuchsia-border);
--ms-border-mist: 0.5px solid rgba(242, 240, 236, 0.08);
/* ==========================================
SOMBRAS E BRILHOS
========================================== */
--ms-glow-sm: 0 0 20px var(--ms-fuchsia-glow);
--ms-glow-md: 0 0 60px var(--ms-fuchsia-glow);
--ms-glow-lg: 0 0 120px rgba(210, 0, 122, 0.12);
/* ==========================================
MOVIMENTO E TRANSIÇÕES
========================================== */
--ms-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ms-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
--ms-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ms-duration-fast: 120ms;
--ms-duration-base: 200ms;
--ms-duration-slow: 400ms;
--ms-duration-slower: 600ms;
/* Transições prontas */
--ms-transition-base: all var(--ms-duration-base) var(--ms-ease-out);
--ms-transition-slow: all var(--ms-duration-slow) var(--ms-ease-out);
--ms-transition-color: color var(--ms-duration-fast) var(--ms-ease-out),
background-color var(--ms-duration-fast) var(--ms-ease-out),
border-color var(--ms-duration-fast) var(--ms-ease-out);
/* ==========================================
Z-INDEX
========================================== */
--ms-z-base: 0;
--ms-z-raised: 10;
--ms-z-overlay: 100;
--ms-z-modal: 1000;
--ms-z-toast: 9999;
/* ==========================================
BREAKPOINTS (use em media queries)
========================================== */
/* --ms-bp-sm: 640px */
/* --ms-bp-md: 768px */
/* --ms-bp-lg: 1024px */
/* --ms-bp-xl: 1280px */
/* --ms-bp-2xl: 1536px */
}
/* ============================================
UTILITÁRIOS DE BASE
Cole no CSS global do projeto
============================================ */
/* Reset box-model */
*, *::before, *::after { box-sizing: border-box; }
/* Base */
body {
font-family: var(--ms-font-sans);
font-weight: var(--ms-weight-light);
font-size: var(--ms-text-base);
line-height: var(--ms-leading-relaxed);
background-color: var(--ms-carbon); /* 1.1: cinza, não preto absoluto */
color: var(--ms-mist);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================
COMPONENTES PRONTOS
============================================ */
/* --- Botões --- */
.ms-btn {
display: inline-flex;
align-items: center;
gap: var(--ms-space-2);
font-family: var(--ms-font-sans);
font-size: var(--ms-text-sm);
font-weight: var(--ms-weight-regular);
padding: 10px 24px;
border-radius: var(--ms-radius-full);
border: none;
cursor: pointer;
transition: var(--ms-transition-base);
letter-spacing: 0.01em;
text-decoration: none;
line-height: 1;
}
.ms-btn-primary {
background: var(--ms-fuchsia);
color: #ffffff;
}
.ms-btn-primary:hover {
background: var(--ms-fuchsia-mid);
box-shadow: var(--ms-glow-sm);
transform: translateY(-1px);
}
.ms-btn-primary:active {
transform: scale(0.97);
}
.ms-btn-ghost {
background: transparent;
color: var(--ms-stone);
border: var(--ms-border-subtle);
}
.ms-btn-ghost:hover {
color: var(--ms-mist);
border-color: var(--ms-graphite);
background: rgba(255,255,255,0.03);
}
.ms-btn-fuchsia-outline {
background: transparent;
color: var(--ms-fuchsia);
border: var(--ms-border-fuchsia);
}
.ms-btn-fuchsia-outline:hover {
background: var(--ms-fuchsia-fill);
box-shadow: var(--ms-glow-sm);
}
/* --- Pills / Tags --- */
.ms-pill {
display: inline-block;
font-family: var(--ms-font-mono);
font-size: var(--ms-text-xs);
font-weight: var(--ms-weight-light);
padding: 3px 10px;
border-radius: var(--ms-radius-sm);
letter-spacing: 0.04em;
transition: var(--ms-transition-color);
}
.ms-pill-fuchsia {
color: var(--ms-fuchsia-mid);
border: var(--ms-border-fuchsia);
background: var(--ms-fuchsia-fill);
}
.ms-pill-muted {
color: var(--ms-stone);
border: var(--ms-border-subtle);
background: transparent;
}
.ms-pill-round {
border-radius: var(--ms-radius-full);
padding: 4px 14px;
}
/* --- Cards --- */
.ms-card {
background: var(--ms-carbon);
border: var(--ms-border-subtle);
border-radius: var(--ms-radius-xl);
padding: var(--ms-space-6);
transition: var(--ms-transition-slow);
position: relative;
overflow: hidden;
}
.ms-card:hover {
border-color: var(--ms-fuchsia-border);
transform: translateY(-2px);
}
.ms-card-light {
background: #ffffff;
border: 0.5px solid rgba(0,0,0,0.06);
border-radius: var(--ms-radius-xl);
padding: var(--ms-space-6);
color: #1A1A1C;
}
/* Card com glow fúcsia */
.ms-card-accent::after {
content: '';
position: absolute;
bottom: -40px; right: -40px;
width: 140px; height: 140px;
border-radius: 50%;
background: radial-gradient(circle, var(--ms-fuchsia-glow) 0%, transparent 70%);
pointer-events: none;
}
/* --- Ícone container --- */
.ms-icon-box {
width: 36px; height: 36px;
border-radius: var(--ms-radius-md);
background: var(--ms-fuchsia-fill);
border: var(--ms-border-fuchsia);
display: flex;
align-items: center;
justify-content: center;
color: var(--ms-fuchsia);
font-size: 18px;
}
/* --- Tipografia --- */
.ms-headline {
font-family: var(--ms-font-sans);
font-size: var(--ms-text-2xl);
font-weight: var(--ms-weight-light);
line-height: var(--ms-leading-tight);
letter-spacing: var(--ms-tracking-tight);
color: var(--ms-mist);
}
.ms-headline em {
font-style: italic;
color: var(--ms-fuchsia);
}
.ms-subheadline {
font-size: var(--ms-text-md);
font-weight: var(--ms-weight-regular);
line-height: var(--ms-leading-snug);
color: var(--ms-sand);
}
.ms-body {
font-size: var(--ms-text-base);
font-weight: var(--ms-weight-light);
line-height: var(--ms-leading-relaxed);
color: var(--ms-stone);
}
.ms-label {
font-family: var(--ms-font-mono);
font-size: var(--ms-text-xs);
font-weight: var(--ms-weight-light);
letter-spacing: var(--ms-tracking-wider);
text-transform: uppercase;
color: var(--ms-stone);
}
/* --- Divisor com gradiente --- */
.ms-divider-gradient {
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--ms-graphite) 20%, var(--ms-graphite) 80%, transparent 100%);
border: none;
margin: var(--ms-space-8) 0;
}
.ms-divider-fuchsia {
height: 2px;
background: var(--ms-gradient);
border: none;
border-radius: var(--ms-radius-full);
}
/* --- Stat / número de destaque --- */
.ms-stat-number {
font-size: var(--ms-text-2xl);
font-weight: var(--ms-weight-light);
letter-spacing: var(--ms-tracking-tight);
color: var(--ms-mist);
line-height: 1;
}
.ms-stat-label {
font-size: var(--ms-text-xs);
color: var(--ms-stone);
margin-top: var(--ms-space-1);
}
/* --- Seção hero --- */
.ms-hero {
background: var(--ms-black);
position: relative;
overflow: hidden;
padding: var(--ms-space-24) var(--ms-space-10);
}
.ms-hero-glow {
position: absolute;
top: -100px; right: -100px;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, var(--ms-fuchsia-glow) 0%, transparent 65%);
pointer-events: none;
}
/* ============================================
ANIMAÇÕES
============================================ */
@keyframes ms-fade-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ms-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ms-glow-pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
.ms-animate-fade-up {
animation: ms-fade-up var(--ms-duration-slow) var(--ms-ease-out) both;
}
.ms-animate-fade-in {
animation: ms-fade-in var(--ms-duration-slow) var(--ms-ease-out) both;
}
/* Delays para stagger */
.ms-delay-1 { animation-delay: 100ms; }
.ms-delay-2 { animation-delay: 200ms; }
.ms-delay-3 { animation-delay: 300ms; }
.ms-delay-4 { animation-delay: 400ms; }
.ms-delay-5 { animation-delay: 500ms; }
/* ============================================
FIM DO ARQUIVO
mirasuite-tokens.css · v1.0
============================================ */