/* =============================================================
DOMMUS SMART HOME — Colors & Type
"Automação que transforma ambientes"
Brand system by Fenice Lab · 2026
-------------------------------------------------------------
A identidade da Dommus nasce da automação residencial de alto
padrão: um roxo premium (a inteligência que governa o ambiente)
acionado por um magenta vibrante (o gesto, o toque, a "voz" da
marca), tudo sobre um preto profundo — o ambiente em repouso,
o cinema, a noite controlada por um toque.
"Tecnologia que some na parede e aparece no conforto."
-------------------------------------------------------------
PALETA DARK PREMIUM-TECH — roxo + magenta sobre preto.
Atribuída aos mesmos tokens do molde Fenice (Quality): os nomes
das custom properties são preservados; só os VALORES mudam, para
que index.html e formulario.html continuem funcionando repintados.
-------------------------------------------------------------
FONTS: Google Fonts gratuitas (padrão Fenice). Carregar uma
vez em qualquer documento:
============================================================= */
:root {
/* ---- PRIMARY ----------------------------------------------- */
--marinho: #A855F7; /* Roxo Primário — inteligência, base/símbolo da marca */
--azul-quality: #7C3AED; /* Roxo Escuro — hover, assinatura do logotipo */
--branco: #FFFFFF; /* Branco Puro — texto sobre escuro / superfícies */
/* ---- SECONDARY --------------------------------------------- */
--ciano: #E11D8F; /* Magenta — a voz da marca, acento, o toque/gesto */
--ciano-dk: #C2156F; /* Magenta Profundo — hover, bordas ativas */
--marinho-md: #1F1F2A; /* Superfície Elevada — camadas, cards */
--marinho-dk: #0B0B0F; /* Preto Base — fundos escuros, rodapés */
/* ---- SUPPORT / NOITE (gradiente de fundo da marca) --------- */
--menta: #4C1D95; /* Violeta Profundo — início do gradiente escuro */
--aqua-pastel: #6D28D9; /* Violeta Médio — meio-tom */
--ceu: #2A1A4A; /* Ametista Noturna — leveza dentro do escuro */
--ceu-soft: #0B0B0F; /* Preto Suave — fim do gradiente / fundo escuro */
--cinza-agua: #A1A1B5; /* Cinza Tech — texto secundário sobre escuro */
/* ---- GRADIENTES (assinatura da marca) ---------------------- */
--grad-agua: linear-gradient(135deg, #4C1D95 0%, #0B0B0F 100%); /* hero escuro */
--grad-marca: linear-gradient(135deg, #A855F7 0%, #E11D8F 100%); /* CTA roxo→magenta */
--grad-profundo: linear-gradient(180deg, #16161D 0%, #0B0B0F 100%);
/* ---- SEMANTIC TOKENS --------------------------------------- */
--bg: #0B0B0F; /* fundo base (noite) */
--bg-alt: #16161D; /* fundo escuro alternativo (grafite) */
--surface: #16161D;
--surface-2: #1F1F2A;
--border: #2A2A38;
--border-strong: #A855F7;
--fg: #FFFFFF; /* texto principal sobre escuro */
--fg-1: #E6E6F0; /* corpo de texto */
--fg-2: #A1A1B5; /* legendas / mutado */
--fg-on-dark: #FFFFFF; /* texto sobre fundo escuro */
--accent: #A855F7; /* roxo — base da marca */
--accent-deep: #7C3AED;
--link: #E11D8F; /* magenta — a voz da marca */
/* ---- TYPE FAMILIES ----------------------------------------- */
--font-display: 'Space Grotesk', system-ui, sans-serif; /* logotipo / headlines (tech) */
--font-body: 'Inter', system-ui, sans-serif; /* UI + corpo + tagline */
/* ---- TYPE SCALE (digital, px) ------------------------------ */
--fs-hero: 80px; /* hero de campanha */
--fs-h1: 48px; /* títulos de página */
--fs-h2: 32px; /* subtítulos de seção */
--fs-h3: 22px; /* destaques menores */
--fs-body: 16px; /* texto corrido */
--fs-sm: 14px; /* secundário */
--fs-caption:12px; /* horários, endereço */
--lh-tight: 1.0;
--lh-snug: 1.18;
--lh-body: 1.7;
--tracking-display: 0.005em;
--tracking-label: 0.22em; /* tagline "AUTOMAÇÃO QUE TRANSFORMA AMBIENTES" */
/* ---- RADII (formas precisas, tech) ------------------------- */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--r-pill: 999px;
/* ---- SPACING (8pt base) ------------------------------------ */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
/* ---- ELEVATION (sombras com tom roxo, não cinzas) ---------- */
--shadow-sm: 0 1px 3px rgba(168,85,247,.18);
--shadow-md: 0 8px 24px rgba(168,85,247,.20);
--shadow-lg: 0 18px 50px rgba(168,85,247,.28);
--glow-ciano: 0 0 24px rgba(225,29,143,.45); /* glow magenta — o acento */
}
/* =============================================================
ELEMENTOS SEMÂNTICOS
Use por elemento ou via classe utilitária (prefixo .q-).
============================================================= */
.q-hero, h1.q {
font-family: var(--font-display);
font-weight: 900;
font-size: var(--fs-hero);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-display);
color: var(--accent-deep);
}
.q-h1, h1 {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--fs-h1);
line-height: var(--lh-snug);
color: var(--accent-deep);
}
.q-h2, h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-h2);
line-height: var(--lh-snug);
color: var(--accent-deep);
}
.q-h3, h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-h3);
color: var(--accent-deep);
}
.q-body, p {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--fg-1);
}
/* Eyebrow / tagline em caixa alta com tracking largo — como no logotipo */
.q-label {
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-caption);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--accent);
}
/* Botão primário com gradiente da marca */
.q-btn {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--fs-sm);
color: var(--branco);
background: var(--grad-marca);
border: none;
border-radius: var(--r-pill);
padding: var(--sp-3) var(--sp-6);
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.q-btn:hover { transform: translateY(-2px); box-shadow: var(--glow-ciano); }