/* ========================================================================== Armata Parceiros — Painel Cloud White-Label tokens.css — Design tokens (CSS custom properties) -------------------------------------------------------------------------- Ordem de cascata (do genérico ao específico): 1. :root → escalas primitivas + tema DARK (padrão) 2. [data-theme="light"] → inversão para tema claro 3. [data-tenant="…"] → paleta da marca do parceiro (white-label) Regra de ouro: telas e componentes NUNCA usam hex direto. Sempre var(--…). Trocar de tenant = trocar um atributo no , nada mais. ========================================================================== */ /* ========================================================================== 1. PRIMITIVAS — escalas cruas, independentes de tema ========================================================================== */ :root { /* ---- Neutros (slate levemente azulado, casa com a paleta do tenant) ---- */ --gray-0: #ffffff; --gray-25: #fbfcfe; --gray-50: #f6f8fb; --gray-100: #eef1f6; --gray-200: #dfe4ec; --gray-300: #c3cbd9; --gray-400: #939eb2; --gray-500: #6b7689; --gray-600: #4d5768; --gray-700: #363e4d; --gray-800: #232a36; --gray-850: #1a202a; --gray-900: #141922; --gray-925: #0f141c; --gray-950: #0a0e15; --gray-975: #070a10; /* ---- Marca padrão: Armata (teal). Sobrescrita por [data-tenant] ------- */ --brand-50: #e8f6f9; --brand-100: #cbecf2; --brand-200: #a3dde8; --brand-300: #6ec8da; --brand-400: #37aec6; --brand-500: #1995ad; --brand-600: #157e92; --brand-700: #11697a; --brand-800: #0e5461; --brand-900: #0b414b; /* ---- Cores funcionais (status) ---------------------------------------- */ --green-300: #6ee7b7; --green-400: #34d399; --green-500: #10b981; --green-600: #059669; --green-900: #052e22; --amber-300: #fcd34d; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --amber-900: #3a2408; --red-300: #fca5a5; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; --red-900: #3b0d0d; --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-900: #251a4a; --cyan-300: #67e8f9; --cyan-400: #22d3ee; --cyan-500: #06b6d4; /* ========================================================================== TIPOGRAFIA — system stack de alta qualidade, zero webfont, zero CDN ======================================================================== */ --font-sans: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Escala tipográfica — compacta, densidade de painel de controle */ --text-2xs: 0.6875rem; /* 11px — micro labels, uppercase */ --text-xs: 0.75rem; /* 12px — metadados, captions */ --text-sm: 0.8125rem; /* 13px — tabelas, labels */ --text-base: 0.875rem; /* 14px — corpo padrão do painel */ --text-md: 0.9375rem; /* 15px — corpo confortável */ --text-lg: 1.0625rem; /* 17px — título de card */ --text-xl: 1.25rem; /* 20px — título de seção */ --text-2xl: 1.5rem; /* 24px — título de página */ --text-3xl: 1.875rem; /* 30px — números de destaque */ --text-4xl: 2.375rem; /* 38px — hero / métrica principal */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Tracking: quanto maior o texto, mais negativo (recurso da marca WG&T) */ --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0em; --tracking-wide: 0.02em; --tracking-caps: 0.08em; /* labels em caixa alta */ /* ========================================================================== ESPAÇAMENTO — base 4px ======================================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ========================================================================== RAIOS — base 8px (herdado da linguagem visual do tenant) ======================================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 18px; --radius-full: 999px; /* ========================================================================== Z-INDEX — escala única, sem números mágicos espalhados ======================================================================== */ --z-base: 0; --z-sticky: 100; --z-sidebar: 200; --z-topbar: 250; --z-dropdown: 400; --z-backdrop: 600; --z-modal: 650; --z-toast: 800; --z-tooltip: 900; /* ========================================================================== MOVIMENTO — microinterações curtas, curvas com personalidade ======================================================================== */ --dur-instant: 60ms; --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --dur-slower: 450ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* saída suave */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* leve overshoot */ --transition-colors: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); --transition-transform: transform var(--dur-base) var(--ease-out); /* ========================================================================== LAYOUT — medidas do shell ======================================================================== */ --sidebar-w: 264px; --sidebar-w-collapsed: 72px; --topbar-h: 60px; --content-max: 1440px; --content-pad-x: var(--space-8); --content-pad-y: var(--space-7); } /* ========================================================================== 2. TEMA DARK — padrão do painel (premium, quase-preto azulado) -------------------------------------------------------------------------- Aplicado em :root sem seletor de tema para que o dark seja o default real, inclusive antes do JS rodar (zero flash de tema claro). ========================================================================== */ :root, [data-theme="dark"] { color-scheme: dark; /* ---- Superfícies: 5 níveis de elevação -------------------------------- */ --bg-body: var(--gray-975); /* fundo da janela */ --bg-canvas: var(--gray-950); /* área de conteúdo */ --bg-surface: var(--gray-925); /* cards, painéis */ --bg-surface-2: var(--gray-900); /* cards aninhados, thead */ --bg-elevated: var(--gray-850); /* dropdowns, modais, popovers */ --bg-inset: #05070c; /* code blocks, poços, terminal */ --bg-sidebar: #080b11; --bg-topbar: color-mix(in srgb, var(--gray-975) 78%, transparent); /* Estados de fundo interativos (sempre translúcidos: funcionam sobre qualquer superfície sem precisar saber a cor de baixo) */ --bg-hover: rgba(255, 255, 255, 0.045); --bg-active: rgba(255, 255, 255, 0.075); --bg-selected: color-mix(in srgb, var(--brand-500) 14%, transparent); --bg-overlay: rgba(4, 6, 11, 0.72); /* ---- Texto ------------------------------------------------------------ */ --text-strong: #f4f7fb; /* títulos, números */ --text-primary: #dfe5ee; /* corpo */ --text-secondary: #a3aec0; /* apoio */ --text-muted: #77839a; /* metadados */ --text-faint: #5a6478; /* placeholders, desabilitado */ --text-on-brand: #ffffff; --text-link: var(--brand-300); /* ---- Bordas ----------------------------------------------------------- */ --border-subtle: rgba(255, 255, 255, 0.055); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.15); --border-input: rgba(255, 255, 255, 0.12); --border-brand: color-mix(in srgb, var(--brand-400) 55%, transparent); /* ---- Marca aplicada --------------------------------------------------- */ --accent: var(--brand-500); --accent-hover: var(--brand-400); --accent-active: var(--brand-600); --accent-text: var(--brand-300); /* marca legível como texto no dark */ --accent-soft: color-mix(in srgb, var(--brand-500) 18%, transparent); --accent-tint: color-mix(in srgb, var(--brand-500) 10%, transparent); --accent-border: color-mix(in srgb, var(--brand-400) 40%, transparent); --accent-contrast: #ffffff; /* ---- Status: cada um com texto / fundo / borda ------------------------ */ --success-text: var(--green-300); --success-bg: color-mix(in srgb, var(--green-500) 15%, transparent); --success-border: color-mix(in srgb, var(--green-400) 34%, transparent); --success-solid: var(--green-500); --warning-text: var(--amber-300); --warning-bg: color-mix(in srgb, var(--amber-500) 16%, transparent); --warning-border: color-mix(in srgb, var(--amber-400) 34%, transparent); --warning-solid: var(--amber-500); --danger-text: var(--red-300); --danger-bg: color-mix(in srgb, var(--red-500) 15%, transparent); --danger-border: color-mix(in srgb, var(--red-400) 34%, transparent); --danger-solid: var(--red-500); --info-text: var(--cyan-300); --info-bg: color-mix(in srgb, var(--cyan-500) 15%, transparent); --info-border: color-mix(in srgb, var(--cyan-400) 32%, transparent); --info-solid: var(--cyan-500); --neutral-text: var(--text-muted); --neutral-bg: rgba(255, 255, 255, 0.06); --neutral-border: rgba(255, 255, 255, 0.12); --neutral-solid: var(--gray-500); --pending-text: var(--violet-300); --pending-bg: color-mix(in srgb, var(--violet-500) 17%, transparent); --pending-border: color-mix(in srgb, var(--violet-400) 34%, transparent); --pending-solid: var(--violet-500); /* ---- Sombras: dark precisa de sombra densa + luz de topo -------------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.35); /* Realce interno de 1px no topo — dá o aspecto "vidro polido" do Linear */ --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-glow: 0 0 0 1px var(--accent-border), 0 6px 24px color-mix(in srgb, var(--brand-500) 22%, transparent); /* ---- Foco: anel duplo (halo colorido + contorno sólido) --------------- */ --focus-ring: 0 0 0 2px var(--bg-body), 0 0 0 4px color-mix(in srgb, var(--brand-400) 62%, transparent); --focus-ring-inset: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--brand-400) 26%, transparent); /* ---- Gráficos: série categórica acessível ----------------------------- */ --chart-1: var(--brand-400); --chart-2: var(--violet-400); --chart-3: var(--green-400); --chart-4: var(--amber-400); --chart-5: var(--cyan-400); --chart-6: #f472b6; --chart-grid: rgba(255, 255, 255, 0.07); --chart-axis: var(--text-faint); /* ---- Skeleton --------------------------------------------------------- */ --skeleton-base: rgba(255, 255, 255, 0.055); --skeleton-shine: rgba(255, 255, 255, 0.11); /* ---- Scrollbar -------------------------------------------------------- */ --scrollbar-thumb: rgba(255, 255, 255, 0.13); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.22); } /* ========================================================================== 3. TEMA LIGHT — opcional, mesma API de tokens ========================================================================== */ [data-theme="light"] { color-scheme: light; --bg-body: var(--gray-50); --bg-canvas: var(--gray-50); --bg-surface: var(--gray-0); --bg-surface-2: var(--gray-25); --bg-elevated: var(--gray-0); --bg-inset: var(--gray-100); --bg-sidebar: var(--gray-0); --bg-topbar: color-mix(in srgb, var(--gray-0) 80%, transparent); --bg-hover: rgba(15, 23, 43, 0.04); --bg-active: rgba(15, 23, 43, 0.07); --bg-selected: color-mix(in srgb, var(--brand-500) 10%, transparent); --bg-overlay: rgba(15, 23, 43, 0.42); --text-strong: #0f172b; --text-primary: #1d293d; --text-secondary: #45556c; --text-muted: #62748e; --text-faint: #90a1b9; --text-on-brand: #ffffff; --text-link: var(--brand-600); --border-subtle: rgba(15, 23, 43, 0.06); --border: #e2e8f0; --border-strong: #cad5e2; --border-input: #cad5e2; --border-brand: color-mix(in srgb, var(--brand-500) 45%, transparent); --accent: var(--brand-500); --accent-hover: var(--brand-600); --accent-active: var(--brand-700); --accent-text: var(--brand-600); --accent-soft: color-mix(in srgb, var(--brand-500) 12%, transparent); --accent-tint: color-mix(in srgb, var(--brand-500) 6%, transparent); --accent-border: color-mix(in srgb, var(--brand-500) 32%, transparent); --success-text: var(--green-600); --success-bg: color-mix(in srgb, var(--green-500) 12%, transparent); --success-border: color-mix(in srgb, var(--green-500) 30%, transparent); --warning-text: var(--amber-600); --warning-bg: color-mix(in srgb, var(--amber-500) 15%, transparent); --warning-border: color-mix(in srgb, var(--amber-500) 32%, transparent); --danger-text: var(--red-600); --danger-bg: color-mix(in srgb, var(--red-500) 10%, transparent); --danger-border: color-mix(in srgb, var(--red-500) 28%, transparent); --info-text: #0e7490; --info-bg: color-mix(in srgb, var(--cyan-500) 12%, transparent); --info-border: color-mix(in srgb, var(--cyan-500) 30%, transparent); --neutral-text: var(--text-muted); --neutral-bg: rgba(15, 23, 43, 0.05); --neutral-border: rgba(15, 23, 43, 0.1); --pending-text: #6d28d9; --pending-bg: color-mix(in srgb, var(--violet-500) 12%, transparent); --pending-border: color-mix(in srgb, var(--violet-500) 28%, transparent); --shadow-xs: 0 1px 2px rgba(15, 23, 43, 0.06); --shadow-sm: 0 1px 3px rgba(15, 23, 43, 0.08), 0 1px 2px rgba(15, 23, 43, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 43, 0.08), 0 2px 4px rgba(15, 23, 43, 0.04); --shadow-lg: 0 12px 32px rgba(15, 23, 43, 0.1), 0 4px 8px rgba(15, 23, 43, 0.05); --shadow-xl: 0 24px 64px rgba(15, 23, 43, 0.14), 0 8px 16px rgba(15, 23, 43, 0.06); --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.7); --chart-1: var(--brand-500); --chart-2: var(--violet-500); --chart-3: var(--green-500); --chart-4: var(--amber-500); --chart-5: var(--cyan-500); --chart-6: #db2777; --chart-grid: rgba(15, 23, 43, 0.08); --skeleton-base: rgba(15, 23, 43, 0.06); --skeleton-shine: rgba(15, 23, 43, 0.02); --scrollbar-thumb: rgba(15, 23, 43, 0.18); --scrollbar-thumb-hover: rgba(15, 23, 43, 0.3); } /* ========================================================================== 4. TENANTS (white-label) -------------------------------------------------------------------------- Cada tenant redefine APENAS a rampa --brand-* (e, se quiser, tipografia e raio). Todos os tokens semânticos acima derivam dela automaticamente. Para adicionar um parceiro novo: copiar o bloco, trocar o atributo e os 10 valores da rampa. Nada mais no CSS precisa mudar. ========================================================================== */ /* ---- WGTECH — "WG&T Cloud" (wgnt.cloud) --------------------------------- Fonte: reconstrução do CSS do console do tenant. Azul primário #155dfc, hover #1447e6, light #3080ff, soft #bedbff, tint #eff6ff. Acentos secundários: rosa #fccee8 e esmeralda #a4f4cf. -------------------------------------------------------------------------- */ [data-tenant="wgtech"] { --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-200: #bedbff; --brand-300: #93bbff; --brand-400: #3080ff; --brand-500: #155dfc; --brand-600: #1447e6; --brand-700: #1039b8; --brand-800: #0e2f93; --brand-900: #0c2872; /* Acentos secundários da marca — usados em gráficos e ilustrações */ --tenant-accent-pink: #fccee8; --tenant-accent-emerald: #a4f4cf; --tenant-emerald-500: #00bb7f; --tenant-emerald-700: #007956; /* Identidade tipográfica: contraste bold/light no wordmark */ --tenant-wordmark-strong: var(--weight-bold); --tenant-wordmark-soft: var(--weight-light); /* Raio de 8px é a assinatura visual do tenant */ --radius-md: 8px; --radius-lg: 10px; } /* No dark, a esmeralda do tenant substitui o verde genérico de "running" — mantém o painel com cara de marca mesmo nos estados de status. */ [data-tenant="wgtech"]:not([data-theme="light"]) { --success-text: var(--tenant-accent-emerald); --success-solid: var(--tenant-emerald-500); --success-bg: color-mix(in srgb, var(--tenant-emerald-500) 16%, transparent); --success-border: color-mix(in srgb, var(--tenant-emerald-500) 38%, transparent); --chart-3: var(--tenant-emerald-500); --chart-6: var(--tenant-accent-pink); } [data-tenant="wgtech"][data-theme="light"] { --success-text: var(--tenant-emerald-700); --success-solid: var(--tenant-emerald-500); --success-bg: color-mix(in srgb, var(--tenant-emerald-500) 12%, transparent); --success-border: color-mix(in srgb, var(--tenant-emerald-500) 30%, transparent); } /* ---- Armata (marca própria, tenant interno) ------------------------------ */ [data-tenant="armata"] { --brand-50: #e8f6f9; --brand-100: #cbecf2; --brand-200: #a3dde8; --brand-300: #6ec8da; --brand-400: #37aec6; --brand-500: #1995ad; --brand-600: #157e92; --brand-700: #11697a; --brand-800: #0e5461; --brand-900: #0b414b; } /* ========================================================================== 5. DENSIDADE — opcional, para operadores que gerenciam centenas de VMs ========================================================================== */ [data-density="compact"] { --content-pad-x: var(--space-5); --content-pad-y: var(--space-4); --topbar-h: 52px; } /* ========================================================================== 6. PREFERÊNCIAS DO SISTEMA ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; } }