/** * SisOS v1.0 — Design System (Custom Properties) * * Define todas as variáveis visuais do sistema. * O tema é propagado via custom properties no :root. * A classe .dark no ativa o dark mode. * * Referência: P002.SP11 */ /* ================================================================ TEMA CLARO (padrão) ================================================================ */ :root { /* ── Cores primárias ── */ --bs-primary: #4361ee; --bs-primary-rgb: 67, 97, 238; --bs-primary-hover: #3a56d4; /* ── Cores semânticas ── */ --bs-success: #198754; --bs-success-rgb: 25, 135, 84; --bs-danger: #dc3545; --bs-danger-rgb: 220, 53, 69; --bs-warning: #ffc107; --bs-warning-rgb: 255, 193, 7; --bs-info: #0dcaf0; --bs-info-rgb: 13, 202, 240; /* ── Superfícies ── */ --sisos-bg-body: #f3f4f6; --sisos-bg-surface: #ffffff; --sisos-bg-surface-alt: #f8f9fa; --sisos-bg-hover: #e9ecef; /* ── Texto ── */ --sisos-text-primary: #1e293b; --sisos-text-secondary: #64748b; --sisos-text-muted: #94a3b8; --sisos-text-inverse: #ffffff; /* ── Bordas ── */ --sisos-border-color: #dee2e6; --sisos-border-light: #e2e8f0; /* ── Sidebar ── */ --sisos-sidebar-bg: #1e293b; --sisos-sidebar-text: #cbd5e1; --sisos-sidebar-active: #ffffff; --sisos-sidebar-icon: #94a3b8; --sisos-sidebar-hover: rgba(255, 255, 255, 0.06); --sisos-sidebar-width: 260px; --sisos-sidebar-collapsed-width: 64px; /* ── Navbar ── */ --sisos-navbar-bg: #ffffff; --sisos-navbar-height: 60px; --sisos-navbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* ── Tipografia ── */ --sisos-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sisos-font-size-xs: 0.75rem; --sisos-font-size-sm: 0.8125rem; --sisos-font-size-md: 0.875rem; --sisos-font-size-base: 0.9375rem; --sisos-font-size-lg: 1.125rem; --sisos-font-size-xl: 1.5rem; /* ── Espaçamento ── */ --sisos-spacing-xs: 0.25rem; --sisos-spacing-sm: 0.5rem; --sisos-spacing-md: 1rem; --sisos-spacing-lg: 1.5rem; --sisos-spacing-xl: 2rem; --sisos-spacing-xxl: 3rem; /* ── Raios ── */ --sisos-radius-sm: 4px; --sisos-radius-md: 8px; --sisos-radius-lg: 12px; --sisos-radius-pill: 50rem; /* ── Sombras ── */ --sisos-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --sisos-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08); --sisos-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* ── Transições ── */ --sisos-transition: 0.2s ease; /* ── Z-Index ── */ --sisos-z-sidebar: 1040; --sisos-z-navbar: 1030; --sisos-z-modal: 1050; --sisos-z-toast: 1060; } /* ================================================================ TEMA ESCURO ================================================================ */ html.dark { --sisos-bg-body: #0f172a; --sisos-bg-surface: #1e293b; --sisos-bg-surface-alt: #283548; --sisos-bg-hover: #334155; --sisos-text-primary: #e2e8f0; --sisos-text-secondary: #94a3b8; --sisos-text-muted: #64748b; --sisos-text-inverse: #0f172a; --sisos-border-color: #334155; --sisos-border-light: #475569; --sisos-sidebar-bg: #0f172a; --sisos-navbar-bg: #1e293b; --sisos-navbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --sisos-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --sisos-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --sisos-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); } /* ================================================================ BASE RESET / GLOBAL ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--sisos-font-family); font-size: var(--sisos-font-size-base); color: var(--sisos-text-primary); background-color: var(--sisos-bg-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--bs-primary); text-decoration: none; transition: color var(--sisos-transition); } a:hover { color: var(--bs-primary-hover); } /* ================================================================ SCROLLBAR CUSTOM ================================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--sisos-text-muted); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--sisos-text-secondary); }