/* ========================================================= TOLZE · Design Tokens Sistema de design completo. Dark mode via [data-theme="dark"]. ========================================================= */ :root { /* ---- Marca ---- */ --tolze-primary: #470085; --tolze-primary-hover: #5a00a8; --tolze-gold: #f09d01; --tolze-gold-2: #f0c226; /* ---- Superfícies (light) ---- */ --tolze-bg: #f7f4fc; --tolze-surface: #ffffff; --tolze-surface-2: #f1ecf9; --tolze-surface-3: #e7dff4; /* ---- Bordas (light) ---- */ --tolze-border: rgba(71, 0, 133, 0.08); --tolze-border-2: rgba(71, 0, 133, 0.16); /* ---- Texto (light) ---- */ --tolze-text: #13002a; --tolze-text-2: rgba(19, 0, 42, 0.60); --tolze-text-3: rgba(19, 0, 42, 0.38); /* ---- Acentos ---- */ --tolze-on-primary: #ffffff; --tolze-primary-soft: rgba(71, 0, 133, 0.08); --tolze-on-soft: #470085; --tolze-nav-idle: rgba(19, 0, 42, 0.50); --tolze-success: #16a34a; /* ---- Tipografia ---- */ --tolze-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --tolze-font-body: 'Inter', system-ui, -apple-system, sans-serif; --tolze-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* ---- Raios ---- */ --tolze-r-xs: 8px; --tolze-r-sm: 12px; --tolze-r-md: 16px; --tolze-r-lg: 22px; --tolze-r-xl: 28px; --tolze-r-pill: 999px; /* ---- Sombras ---- */ --tolze-shadow-1: 0 2px 10px rgba(71, 0, 133, 0.06); --tolze-shadow-2: 0 12px 30px rgba(71, 0, 133, 0.12); --tolze-shadow-primary: 0 6px 16px rgba(71, 0, 133, 0.20); /* ---- Espaçamento ---- */ --tolze-space-1: 4px; --tolze-space-2: 8px; --tolze-space-3: 12px; --tolze-space-4: 16px; --tolze-space-5: 20px; --tolze-space-6: 24px; --tolze-space-8: 32px; } /* Dark mode manual — adicione data-theme="dark" no */ [data-theme="dark"] { --tolze-bg: #060208; --tolze-surface: #120820; --tolze-surface-2: #1c0f2e; --tolze-surface-3: #251540; --tolze-border: rgba(199, 155, 255, 0.12); --tolze-border-2: rgba(199, 155, 255, 0.22); --tolze-text: #f5f0ff; --tolze-text-2: rgba(245, 240, 255, 0.65); --tolze-text-3: rgba(245, 240, 255, 0.40); --tolze-primary-soft: rgba(199, 155, 255, 0.18); --tolze-on-soft: #d9bcff; --tolze-nav-idle: rgba(245, 240, 255, 0.62); --tolze-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.40); --tolze-shadow-2: 0 12px 40px rgba(0, 0, 0, 0.55); --tolze-shadow-primary: 0 6px 16px rgba(71, 0, 133, 0.40); } /* Utilitários opcionais */ .tolze-eyebrow { font-family: var(--tolze-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2px; text-transform: uppercase; color: var(--tolze-text-3); } .tolze-no-scrollbar::-webkit-scrollbar { display: none; } .tolze-no-scrollbar { scrollbar-width: none; }