/* ATMOS Design Tokens — single source of truth * Gerado por: bin/design-builder.mjs (a cada 15min) * Fonte: .aios-core/design/packages/{atm,atmos,enterprise,dashboards,pops}.design.md * * USO: * * ou import "atmos-tokens" em build pipelines * * NÃO EDITAR ESTE ARQUIVO MANUALMENTE — é regenerado a partir dos .design.md. * * Princípio: cada page declara `data-design-package="atm|atmos|enterprise|dashboards|pops"` * no , e os tokens corretos são resolvidos via CSS scope abaixo. */ /* ─── BASE: ATM corporativo ─────────────────────────────────────────────── */ :root { /* Brand */ --atm-primary: #00a8e8; --atm-primary-dark: #0077b6; --atm-primary-light: #90e0ef; --atm-accent: #d4a520; --atm-accent-dark: #b8901a; /* Semantic (compartilhado por todos os pacotes) */ --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #3b82f6; /* Neutros — 13 níveis */ --neutral-950: #0a0e13; --neutral-900: #111827; --neutral-800: #1f2937; --neutral-700: #374151; --neutral-600: #4b5563; --neutral-500: #6b7280; --neutral-400: #9ca3af; --neutral-300: #d1d5db; --neutral-200: #e5e7eb; --neutral-100: #f3f4f6; --neutral-50: #f9fafb; --neutral-0: #ffffff; /* Typography */ --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-display: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --font-serif: 'Playfair Display', 'Georgia', serif; --font-cyber: 'Orbitron', sans-serif; --font-bold-display: 'Manrope', 'Inter', sans-serif; --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px; --fs-4xl: 48px; /* Spacing — 4px scale */ --sp-0: 0; --sp-px: 1px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Radius */ --r-none: 0; --r-sm: 4px; --r-base: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-2xl: 14px; --r-full: 9999px; /* Shadow */ --sh-sm: 0 1px 2px rgba(0,0,0,0.05); --sh-base: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06); --sh-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06); --sh-lg: 0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05); /* Motion */ --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --ease-std: cubic-bezier(0.4, 0, 0.2, 1); /* Defaults — ATM corporativo light mode */ --bg: var(--neutral-0); --bg-surface: var(--neutral-50); --bg-elevated: var(--neutral-100); --text: var(--neutral-900); --text-secondary: var(--neutral-600); --text-muted: var(--neutral-500); --text-dim: var(--neutral-400); --border: var(--neutral-200); --accent: var(--atm-primary); } /* ─── ATMOS: dark cyber (jarvis-web, atlas) ────────────────────────────── */ [data-design-package="atmos"] { --bg: #0a0e13; --bg-surface: #1a1f2e; --bg-elevated:#222938; --bg-glass: rgba(15, 23, 42, 0.65); --text: #e5e7eb; --text-secondary: #9ca3af; --text-muted: #6b7280; --text-dim: rgba(255,255,255,0.40); --text-accent: #00e5ff; --accent: #00e5ff; --accent-dark:#06b6d4; --accent-light:#7dd3fc; --border: rgba(255,255,255,0.08); --border-hover: rgba(0,168,232,0.30); --border-glass: rgba(255,255,255,0.12); --status-online: #22c55e; --status-busy: #f59e0b; --status-error: #ef4444; --status-thinking: #a855f7; --glow-accent: 0 0 20px rgba(0,229,255,0.30); --glow-primary: 0 0 16px rgba(0,168,232,0.25); --backdrop-blur: blur(12px) saturate(1.4); } /* ─── ENTERPRISE: gold luxo (cd-enterprise) ────────────────────────────── */ [data-design-package="enterprise"] { --bg: #0d0f14; --bg-surface: #1a1d24; --bg-elevated:#252a33; --bg-overlay: rgba(0,0,0,0.70); --text: #e5e7eb; --text-secondary: #9ca3af; --accent: var(--atm-accent); /* gold #d4a520 */ --accent-light:#fbbf24; --accent-secondary: var(--atm-primary); --border: rgba(255,255,255,0.08); --glow-accent: 0 0 24px rgba(212,165,32,0.20); --font-display: var(--font-bold-display); /* Manrope */ } /* ─── DASHBOARDS: KPIs densos ──────────────────────────────────────────── */ [data-design-package="dashboards"] { --bg: #0a0e13; --bg-surface: #1a1f2e; --bg-elevated:#222938; --text: #e5e7eb; --text-secondary: #9ca3af; --accent: var(--atm-primary); /* Status process — universal em todos dashboards */ --status-pending: #9ca3af; --status-in-progress: #3b82f6; --status-review: #f59e0b; --status-success: #22c55e; --status-blocked: #ef4444; --status-cancelled: #6b7280; /* Temperature — para tabs Yokogawa */ --temp-cold: #7dd3fc; --temp-warm: #fbbf24; --temp-hot: #f97316; --temp-burning: #ef4444; /* Charts categóricos — 8 cores acessíveis distinguíveis */ --chart-cat1: #00a8e8; --chart-cat2: #22c55e; --chart-cat3: #a855f7; --chart-cat4: #f59e0b; --chart-cat5: #06b6d4; --chart-cat6: #ef4444; --chart-cat7: #84cc16; --chart-cat8: #ec4899; /* Pipeline 5 etapas */ --stage-0: #6b7280; --stage-25: #3b82f6; --stage-50: #a855f7; --stage-75: #f59e0b; --stage-100: #22c55e; /* Tabular nums em métricas */ font-feature-settings: 'tnum' 1; } /* ─── POPs: light mode ABNT ────────────────────────────────────────────── */ [data-design-package="pops"] { --bg: #ffffff; --bg-surface: #f9fafb; --bg-elevated:#f3f4f6; --text: #111827; --text-secondary: #6b7280; --accent: var(--atm-primary); /* Azul ATM */ --accent-secondary: var(--atm-accent); /* Gold ATM */ --header-bg: var(--atm-primary); --header-text:#ffffff; --capa-gradient-top: #0a4d72; --capa-gradient-bottom: #001f3d; --table-header-bg: var(--atm-primary); --table-header-text: #ffffff; --table-row-bg: #ffffff; --table-row-zebra: #f9fafb; --font-heading: var(--font-serif); /* Playfair Display */ --font-body: 'Inter', sans-serif; /* ABNT margins (em mm para impressão) */ --abnt-margin-top: 25mm; --abnt-margin-right: 20mm; --abnt-margin-bottom: 20mm; --abnt-margin-left: 30mm; }