@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800,700&f[]=satoshi@400,500,700&display=swap'); :root { --color-bg: #0d0d0f; --color-surface: #13131a; --color-surface-2: #1a1a24; --color-surface-offset: #1f1f2e; --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.16); --color-text: #e8e8f0; --color-text-muted: #8888a0; --color-text-faint: #44445a; --color-primary: #e07a1a; --color-primary-hover: #f08c2a; --color-primary-dim: rgba(224, 122, 26, 0.15); --color-danger: #e53e3e; --color-danger-dim: rgba(229, 62, 62, 0.15); --color-success: #38a169; --color-success-dim: rgba(56, 161, 105, 0.15); --color-warning: #d69e2e; --color-warning-dim: rgba(214, 158, 46, 0.15); --color-info: #4299e1; --color-info-dim: rgba(66, 153, 225, 0.15); --font-display: 'Cabinet Grotesk', 'Segoe UI', sans-serif; --font-body: 'Satoshi', 'Segoe UI', sans-serif; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 24px rgba(224, 122, 26, 0.2); --sidebar-width: 240px; --header-height: 60px; --transition: 0.18s ease; } /* classe .light-theme no ativa o tema claro */ html.light-theme { --color-bg: #f0f2f5; --color-surface: #ffffff; --color-surface-2: #e8eaed; --color-surface-offset: #dde0e6; --color-border: rgba(0, 0, 0, 0.1); --color-border-strong: rgba(0, 0, 0, 0.2); --color-text: #111827; --color-text-muted: #4b5563; --color-text-faint: #9ca3af; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15); --shadow-glow: 0 0 24px rgba(224, 122, 26, 0.15); }