/* ══════════════════════════════════════════════════════════════════════ NexiaLabs — TOKENS Fonte única de verdade visual do ecossistema. Carregar SEMPRE antes de site.css. Cinco camadas, nesta ordem: 1. Marca — identidade das três verticais, independente de tema 2. Semântica — muda com [data-theme="light"] / [data-theme="dark"] 3. Tipografia — escala fluida com clamp() 4. Espaço/raio — escala de 4px 5. Elevação — sombra em camadas, desfoque e movimento Regra: componente consome token. Valor cru em arquivo de página é falha de QA. ══════════════════════════════════════════════════════════════════════ */ /* ══ 1. MARCA ═══════════════════════════════════════════════════════════ Cor de identidade não muda com o tema: o azul da NexiaLabs é o mesmo no site claro e no painel escuro. Cada vertical tem três tons e não dois. O terceiro, sufixo -ink, existe porque o tom claro da marca não alcança contraste AA quando vira texto ou fundo de botão com letra branca. #38bdf8 sobre branco dá 2,1:1, reprova até para título grande. Então: -1 e -2 pintam, -ink carrega texto. */ :root{ --brand-labs-1: #38bdf8; --brand-labs-2: #7c3aed; --brand-labs-ink: #0284c7; --brand-labs-rgb: 56,189,248; --brand-law-1: #e8c97e; --brand-law-2: #c9a96e; --brand-law-ink: #8a6f36; --brand-law-rgb: 201,169,110; --brand-health-1: #5eead4; --brand-health-2: #2dd4bf; --brand-health-ink: #0b7365; /* 5,1:1 sobre branco. #0f8f7e reprovava em texto de 13px */ --brand-health-rgb: 45,212,191; /* Hotelaria não é marca própria: reaproveita o violeta da NexiaLabs */ --brand-hotel-1: #a78bfa; --brand-hotel-2: #7c3aed; --brand-hotel-ink: #6b3fc9; --brand-hotel-rgb: 124,58,237; /* Gradientes prontos. O sufixo -ink é o par acessível: use quando houver texto em cima (botão preenchido) ou dentro (texto com clip de fundo). */ --grad-labs: linear-gradient(135deg, var(--brand-labs-1), var(--brand-labs-2)); --grad-labs-ink: linear-gradient(135deg, var(--brand-labs-ink), var(--brand-labs-2)); --grad-law: linear-gradient(135deg, var(--brand-law-1), var(--brand-law-2)); --grad-law-ink: linear-gradient(135deg, var(--brand-law-ink), #6f5620); --grad-health: linear-gradient(135deg, var(--brand-health-1), var(--brand-health-2)); --grad-health-ink: linear-gradient(135deg, var(--brand-health-ink), #0b6f62); /* Texto sobre superfície de acento (botão preenchido, chip ativo, selo). Branco puro nos dois temas: o par é sempre um fundo escuro o bastante. */ --on-accent: #ffffff; /* Sinais de estado, comuns aos dois temas */ --success: #3abf6a; --success-ink: #16a34a; --warning: #d4a035; --warning-ink: #b45309; --danger: #d05050; --danger-ink: #dc2626; } /* ══ 2. SEMÂNTICA POR TEMA ══════════════════════════════════════════════ Site público abre com . Dashboard interno abre com . Nenhum dos dois herda o outro por acidente: o padrão do :root é o claro, e o escuro só entra quando declarado. */ :root, [data-theme="light"]{ --bg: #ffffff; --bg-soft: #fafafb; --surface: #ffffff; --surface-2: #f4f4f7; --ink: #0e0e12; --ink-muted: #3a3a44; --ink-dim: #686874; /* cinza de apoio no limite do AA: não clarear mais */ --line: rgba(0,0,0,.06); --card-border: rgba(0,0,0,.06); --card-border-h: rgba(0,0,0,.12); --card-glass: rgba(255,255,255,.7); --focus-ring: var(--brand-labs-ink); --overlay: rgba(14,14,18,.45); } [data-theme="dark"]{ --bg: #07070a; --bg-soft: #0d0d12; --surface: #111118; --surface-2: #16161f; --ink: #f5f5f7; --ink-muted: rgba(255,255,255,.74); --ink-dim: rgba(255,255,255,.52); --line: rgba(255,255,255,.07); --card-border: rgba(255,255,255,.07); --card-border-h: rgba(255,255,255,.16); --card-glass: rgba(255,255,255,.04); --focus-ring: var(--brand-labs-1); --overlay: rgba(0,0,0,.6); /* No escuro a lógica do -ink se inverte: sobre fundo #07070a quem precisa de contraste é o tom claro. Os gradientes de texto e de botão trocam de par, e nenhum componente muda uma linha por causa disso. */ --grad-labs-ink: var(--grad-labs); --grad-law-ink: var(--grad-law); --grad-health-ink: var(--grad-health); } /* Acento da página. Cada página escolhe a vertical pela classe no ; sem classe, vale NexiaLabs. */ :root{ --accent-1: var(--brand-labs-1); --accent-2: var(--brand-labs-2); --accent-ink: var(--brand-labs-ink); --accent-rgb: var(--brand-labs-rgb); --grad-accent: var(--grad-labs); --grad-accent-ink: var(--grad-labs-ink); } body.theme-labs{ --accent-1:var(--brand-labs-1);--accent-2:var(--brand-labs-2); --accent-ink:var(--brand-labs-ink);--accent-rgb:var(--brand-labs-rgb); --grad-accent:var(--grad-labs);--grad-accent-ink:var(--grad-labs-ink); } body.theme-law{ --accent-1:var(--brand-law-1);--accent-2:var(--brand-law-2); --accent-ink:var(--brand-law-ink);--accent-rgb:var(--brand-law-rgb); --grad-accent:var(--grad-law);--grad-accent-ink:var(--grad-law-ink); } body.theme-health{ --accent-1:var(--brand-health-1);--accent-2:var(--brand-health-2); --accent-ink:var(--brand-health-ink);--accent-rgb:var(--brand-health-rgb); --grad-accent:var(--grad-health);--grad-accent-ink:var(--grad-health-ink); } /* ══ 3. TIPOGRAFIA ══════════════════════════════════════════════════════ Space Grotesk nos títulos, Inter no corpo, as duas self hosted. Escala fluida: o tamanho responde à largura sem escadinha de media query. */ :root{ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --fs-display: clamp(2rem, 1.15rem + 4.2vw, 3.625rem); /* 32 → 58 */ --fs-h1: clamp(1.75rem, 1.15rem + 3vw, 2.75rem); /* 28 → 44 */ --fs-h2: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); /* 24 → 36 */ --fs-h3: clamp(1.125rem,1.02rem + .5vw, 1.375rem); /* 18 → 22 */ --fs-body: clamp(.9375rem,.9rem + .18vw, 1.0625rem); /* 15 → 17 */ --fs-sm: .875rem; /* 14 */ --fs-xs: .75rem; /* 12 */ --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --lh-tight: 1.1; --lh-snug: 1.35; --lh-base: 1.72; --ls-tight: -.03em; --ls-wide: .08em; } /* ══ 4. ESPAÇO E RAIO ═══════════════════════════════════════════════════ Escala de 4px. Valor de espaçamento vem daqui ou não existe. */ :root{ --space-1: .25rem; /* 4 */ --space-2: .5rem; /* 8 */ --space-3: .75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 1.75rem; /* 28 */ --space-8: 2rem; /* 32 */ --space-9: 2.25rem; /* 36 */ --space-10: 2.5rem; /* 40 */ --space-11: 2.75rem; /* 44 */ --space-12: 3rem; /* 48 */ --space-13: 3.25rem; /* 52 */ --space-14: 3.5rem; /* 56 */ --space-15: 3.75rem; /* 60 */ --space-16: 4rem; /* 64 */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; --tap-min: 44px; /* alvo de toque mínimo, WCAG 2.5.5 */ --container-max: 1200px; } /* ══ 5. ELEVAÇÃO E MOVIMENTO ════════════════════════════════════════════ Sombra em camadas, nunca um borrão único: uma sombra curta que assenta o elemento e uma longa que dá a distância. */ :root{ --shadow-1: 0 1px 2px rgba(14,14,18,.04), 0 2px 8px rgba(14,14,18,.05); --shadow-2: 0 2px 4px rgba(14,14,18,.05), 0 12px 28px rgba(14,14,18,.08); --shadow-3: 0 4px 8px rgba(14,14,18,.06), 0 24px 56px rgba(14,14,18,.12); --shadow-accent: 0 8px 28px rgba(var(--accent-rgb),.35); --blur-card: 14px; --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast: .2s; --dur-base: .35s; --dur-slow: .65s; } /* Aliases de compatibilidade: nomes antigos ainda usados em estilo inline das páginas. Apontam para a camada semântica, então continuam corretos nos dois temas. Ao reescrever um trecho, prefira o nome novo. */ :root{ --ink-soft: var(--ink-muted); --ink-3: var(--ink-dim); --card: var(--card-glass); --card-solid: var(--surface); --radius: var(--radius-md); --labs-1: var(--brand-labs-1); --labs-2: var(--brand-labs-2); --labs-rgb: var(--brand-labs-rgb); --law-1: var(--brand-law-1); --law-2: var(--brand-law-2); --law-rgb: var(--brand-law-rgb); --health-1:var(--brand-health-1); --health-2:var(--brand-health-2); --health-rgb:var(--brand-health-rgb); --hotel-rgb: var(--brand-hotel-rgb); } /* Sombra no escuro precisa de mais preto: vem depois da camada 5 de propósito, porque :root e [data-theme] têm a mesma especificidade e quem vem por último vence. */ [data-theme="dark"]{ --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.32); --shadow-2: 0 2px 4px rgba(0,0,0,.42), 0 12px 28px rgba(0,0,0,.46); --shadow-3: 0 4px 8px rgba(0,0,0,.46), 0 24px 56px rgba(0,0,0,.56); } @media (prefers-reduced-motion: reduce){ :root{ --dur-fast: .01ms; --dur-base: .01ms; --dur-slow: .01ms; } }