/* ========================================================================== tokens.css — NTWeb 2026 Deep Command Custom properties: neutros, feedback, escalas, data-product (9 variantes). Nenhum hex fora deste arquivo em qualquer outro CSS. ========================================================================== */ :root { /* ---------- Tipografia ---------- */ --font-display: "Rajdhani", ui-sans-serif, system-ui, sans-serif; --font-body: "Barlow", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.625rem; /* 26px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.5rem; /* 40px */ --text-display: 3rem; /* 48px */ --lh-tight: 1.15; --lh-body: 1.55; --lh-loose: 1.7; /* ---------- Espaçamentos ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* ---------- Raios ---------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px; /* ---------- Animação ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* ---------- Layout ---------- */ --nav-height: 52px; --services-menu-height: 38px; --sidebar-width: 280px; --container-max: 1280px; --container-pad: clamp(1rem, 4vw, 2rem); /* ---------- Neutros (light default) ---------- */ --void: #f5f5f5; --deep: #eeeeee; --surface: #ffffff; --card: #ffffff; --card-hover: #f8f8f8; /* Translucent surfaces — sobrepõem background-image global em body (alpha 0.65) */ --card-translucent: rgba(255, 255, 255, 0.65); --surface-translucent: rgba(255, 255, 255, 0.65); --deep-translucent: rgba(238, 238, 238, 0.65); --border: #e0e0e0; --border-bright: #cccccc; --text-1: #212529; --text-2: #495057; --text-3: #5f6870; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 20px var(--accent-glow); /* ---------- Feedback ---------- */ --green: #28a745; --amber: #ffc107; --red: #dc3545; --sky: #1a6fc4; --purple: #8b5cf6; /* ---------- Accent default: marca guarda-chuva (ntweb) ---------- */ --accent: #d93338; --accent-on-light: #8b1a1f; --accent-soft: rgba(217, 51, 56, 0.10); --accent-glow: rgba(217, 51, 56, 0.25); --accent-border: rgba(217, 51, 56, 0.40); --accent-contrast: #ffffff; --header-accent: #d93338; --header-accent-soft: rgba(217, 51, 56, 0.10); --header-accent-border: rgba(217, 51, 56, 0.40); --header-accent-contrast: #ffffff; } /* ========================================================================== Data-product accent overrides Apply on — all components using var(--accent) reflect automatically. ========================================================================== */ body[data-product="ntweb"] { --accent: #d93338; --accent-on-light: #8b1a1f; --accent-soft: rgba(217, 51, 56, 0.10); --accent-glow: rgba(217, 51, 56, 0.25); --accent-border: rgba(217, 51, 56, 0.40); --accent-contrast: #ffffff; } body[data-product="nt-fiber"] { --accent: #f48634; --accent-on-light: #8c4413; --accent-soft: rgba(244, 134, 52, 0.10); --accent-glow: rgba(244, 134, 52, 0.25); --accent-border: rgba(244, 134, 52, 0.40); --accent-contrast: #1a1a1a; } body[data-product="nt-host"] { --accent: #3E4095; --accent-on-light: #2a2c6e; --accent-soft: rgba(62, 64, 149, 0.10); --accent-glow: rgba(62, 64, 149, 0.25); --accent-border: rgba(62, 64, 149, 0.40); --accent-contrast: #ffffff; } body[data-product="nt-cloud"] { --accent: #0098DA; --accent-on-light: #006da3; --accent-soft: rgba(0, 152, 218, 0.10); --accent-glow: rgba(0, 152, 218, 0.25); --accent-border: rgba(0, 152, 218, 0.40); --accent-contrast: #ffffff; } body[data-product="nt-cloud-lxc"] { --accent: #4ea8ff; --accent-on-light: #1e6dc7; --accent-soft: rgba(78, 168, 255, 0.12); --accent-glow: rgba(78, 168, 255, 0.30); --accent-border: rgba(78, 168, 255, 0.45); --accent-contrast: #0a1628; /* azul claro → texto escuro */ } body[data-product="nt-fone"] { --accent: #51A8B1; --accent-on-light: #1e5d65; --accent-soft: rgba(81, 168, 177, 0.10); --accent-glow: rgba(81, 168, 177, 0.25); --accent-border: rgba(81, 168, 177, 0.40); --accent-contrast: #1a1a1a; } body[data-product="nt-movel"] { --accent: #7c3aed; --accent-on-light: #5b21b6; --accent-soft: rgba(124, 58, 237, 0.10); --accent-glow: rgba(124, 58, 237, 0.25); --accent-border: rgba(124, 58, 237, 0.40); --accent-contrast: #ffffff; } body[data-product="backupon"] { --accent: #006da3; --accent-on-light: #006da3; --accent-soft: rgba(0, 109, 163, 0.10); --accent-glow: rgba(0, 109, 163, 0.25); --accent-border: rgba(0, 109, 163, 0.40); --accent-contrast: #ffffff; } body[data-product="ip-dedicado"] { --accent: #17a2b8; --accent-on-light: #0d7585; --accent-soft: rgba(23, 162, 184, 0.10); --accent-glow: rgba(23, 162, 184, 0.25); --accent-border: rgba(23, 162, 184, 0.40); --accent-contrast: #ffffff; } body[data-product="aplicativos"] { --accent: #0098DA; --accent-on-light: #006da3; --accent-soft: rgba(0, 152, 218, 0.10); --accent-glow: rgba(0, 152, 218, 0.25); --accent-border: rgba(0, 152, 218, 0.40); --accent-contrast: #ffffff; } body[data-product="dedicada"] { --accent: #1A6FC4; --accent-on-light: #0e4a8a; --accent-soft: rgba(26, 111, 196, 0.10); --accent-glow: rgba(26, 111, 196, 0.25); --accent-border: rgba(26, 111, 196, 0.40); --accent-contrast: #ffffff; }