/* ============================================================================ * 1MZ For Artists — Design System * 01-tokens.css — Design Tokens (variáveis CSS) * * SINGLE SOURCE OF TRUTH para cores, tipografia, espaçamento, animação. * Carregar SEMPRE antes de qualquer outro CSS do plugin. * * NUNCA hard-code valores nos componentes. Se um valor não existe aqui, * adiciona-o aqui primeiro, depois usa via var(--rmbz-...). * ============================================================================ */ :root { /* ───────────────────────────────────────────────────────────────────────── * COR — paleta única * ───────────────────────────────────────────────────────────────────────── */ /* Backgrounds em escala (do mais escuro ao mais elevado) */ --rmbz-bg-base: #08080a; /* fundo da página */ --rmbz-bg-surface: #131316; /* cartões, modais */ --rmbz-bg-elevated: #1c1c20; /* cartões dentro de cartões */ --rmbz-bg-input: #0e0e10; /* inputs, selects */ --rmbz-bg-hover: #1f1f23; /* hover em itens interactivos */ /* [DS 1.5.53] Background especial para o cartão de Património Total * (saldo principal). Navy clássico do design antigo (#2c3e50, "midnight * blue" do Flat UI) — recuperado por preferência do utilizador. * Acrescenta calor e dimensão ao cartão financeiro central. */ --rmbz-bg-saldo: #2c3e50; /* [DS 1.5.54] Background do cartão "Acesso Artista VIP Activo". * Gradiente diagonal verde-escuro vibrante → preto-esverdeado neutro. * Cor amostrada da referência visual do utilizador (#20392b → #1e2320), * recupera a estética "verde radial VIP" do design antigo. * Aplicado via linear-gradient no modificador --vip (não pode ser * uma variável CSS porque os browsers não aceitam gradiente em * background-color shorthand). Mantemos cores soltas como tokens * para reutilização em sub-elementos. */ --rmbz-bg-vip-from: #20392b; /* canto superior esquerdo */ --rmbz-bg-vip-to: #1e2320; /* canto inferior direito */ /* Bordas */ --rmbz-border-subtle: #26262b; --rmbz-border-strong: #3a3a40; --rmbz-border-brand: #f0b90b; /* Texto */ --rmbz-text-primary: #fafafa; --rmbz-text-secondary: #c4c4cc; --rmbz-text-muted: #8a8a92; /* WCAG AA em --rmbz-bg-base */ --rmbz-text-disabled: #4d4d52; --rmbz-text-on-brand: #0a0a0a; /* texto preto sobre dourado */ /* Marca — dourado 1MZ Records */ --rmbz-brand: #f0b90b; --rmbz-brand-soft: rgba(240, 185, 11, 0.12); --rmbz-brand-glow: rgba(240, 185, 11, 0.25); --rmbz-brand-strong: #d4a000; --rmbz-brand-gradient: linear-gradient(135deg, #f0b90b 0%, #d4a000 100%); /* Estados semânticos (com soft variants para backgrounds) */ --rmbz-success: #10b981; --rmbz-success-soft: rgba(16, 185, 129, 0.12); --rmbz-success-strong: #059669; --rmbz-danger: #ef4444; --rmbz-danger-soft: rgba(239, 68, 68, 0.12); --rmbz-danger-strong: #dc2626; --rmbz-warning: #f59e0b; --rmbz-warning-soft: rgba(245, 158, 11, 0.12); --rmbz-warning-strong: #d97706; --rmbz-info: #3b82f6; --rmbz-info-soft: rgba(59, 130, 246, 0.12); --rmbz-info-strong: #2563eb; /* Accent — azul moderno para CTAs secundárias premium (ex: Levantar). * Pareado com o dourado da marca: dourado=acção primária/entrada, * azul=acção secundária/saída. Mesma família cromática do --rmbz-info * mas semanticamente distinto (CTAs vs alerts informativos). */ --rmbz-accent: #3b82f6; --rmbz-accent-soft: rgba(59, 130, 246, 0.14); --rmbz-accent-glow: rgba(59, 130, 246, 0.3); --rmbz-accent-strong: #2563eb; /* ───────────────────────────────────────────────────────────────────────── * TIPOGRAFIA * * Usamos um pairing de carácter editorial: * - Display: Bricolage Grotesque (títulos — variável, com caráter) * - Body: Geist Sans (corpo — refinado, leitura óptima) * - Mono: JetBrains Mono (montantes, IDs, números tabulares) * * Carregadas via Google Fonts no enqueue (rmbz_enqueue_design_system). * Fallbacks system-ui garantem que tudo continua a funcionar offline. * ───────────────────────────────────────────────────────────────────────── */ --rmbz-font-display: 'Bricolage Grotesque', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --rmbz-font-body: 'Geist', 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --rmbz-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, monospace; /* Escala tipográfica (modular, base 16px) */ --rmbz-text-2xs: 0.6875rem; /* 11px — captions, badges */ --rmbz-text-xs: 0.75rem; /* 12px — meta info */ --rmbz-text-sm: 0.875rem; /* 14px — secondary text */ --rmbz-text-base: 1rem; /* 16px — body */ --rmbz-text-lg: 1.125rem; /* 18px — emphasized body */ --rmbz-text-xl: 1.375rem; /* 22px — section titles */ --rmbz-text-2xl: 1.75rem; /* 28px — page titles */ --rmbz-text-3xl: 2.25rem; /* 36px — hero numbers (saldos) */ --rmbz-text-4xl: 3rem; /* 48px — display */ /* Pesos */ --rmbz-weight-normal: 400; --rmbz-weight-medium: 500; --rmbz-weight-semibold: 600; --rmbz-weight-bold: 700; --rmbz-weight-black: 800; /* Line-heights */ --rmbz-leading-tight: 1.15; --rmbz-leading-snug: 1.35; --rmbz-leading-normal: 1.55; --rmbz-leading-relaxed: 1.7; /* Tracking (letter-spacing) */ --rmbz-tracking-tight: -0.02em; --rmbz-tracking-normal: 0; --rmbz-tracking-wide: 0.04em; --rmbz-tracking-wider: 0.08em; /* para "VIP", "ARTISTA", micro-labels */ /* ───────────────────────────────────────────────────────────────────────── * ESPAÇAMENTO — escala 4px * ───────────────────────────────────────────────────────────────────────── */ --rmbz-space-px: 1px; --rmbz-space-0: 0; --rmbz-space-1: 0.25rem; /* 4px */ --rmbz-space-2: 0.5rem; /* 8px */ --rmbz-space-3: 0.75rem; /* 12px */ --rmbz-space-4: 1rem; /* 16px */ --rmbz-space-5: 1.25rem; /* 20px */ --rmbz-space-6: 1.5rem; /* 24px */ --rmbz-space-8: 2rem; /* 32px */ --rmbz-space-10: 2.5rem; /* 40px */ --rmbz-space-12: 3rem; /* 48px */ --rmbz-space-16: 4rem; /* 64px */ --rmbz-space-20: 5rem; /* 80px */ /* ───────────────────────────────────────────────────────────────────────── * RAIO * ───────────────────────────────────────────────────────────────────────── */ --rmbz-radius-xs: 4px; --rmbz-radius-sm: 8px; --rmbz-radius-md: 12px; --rmbz-radius-lg: 16px; --rmbz-radius-xl: 24px; --rmbz-radius-pill: 9999px; --rmbz-radius-full: 50%; /* ───────────────────────────────────────────────────────────────────────── * SOMBRAS * * Filosofia: usar sombras com ligeiro tinte dourado nas peças "premium" * (modais, cartões VIP) para reforçar a identidade da marca. * ───────────────────────────────────────────────────────────────────────── */ --rmbz-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --rmbz-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --rmbz-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --rmbz-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); --rmbz-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.65); /* Sombras "premium" — com tinte dourado */ --rmbz-shadow-brand-sm: 0 4px 14px rgba(240, 185, 11, 0.18); --rmbz-shadow-brand-md: 0 8px 28px rgba(240, 185, 11, 0.25); --rmbz-shadow-brand-lg: 0 16px 48px rgba(240, 185, 11, 0.35); /* Sombras "premium" — com tinte accent (azul). Par directo das brand. */ --rmbz-shadow-accent-sm: 0 4px 14px rgba(59, 130, 246, 0.22); --rmbz-shadow-accent-md: 0 8px 28px rgba(59, 130, 246, 0.30); /* Anel de focus — substitui o outline horrível do browser */ --rmbz-ring-brand: 0 0 0 3px rgba(240, 185, 11, 0.4); --rmbz-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.4); /* ───────────────────────────────────────────────────────────────────────── * MOVIMENTO * ───────────────────────────────────────────────────────────────────────── */ --rmbz-ease-in: cubic-bezier(0.4, 0, 1, 1); --rmbz-ease-out: cubic-bezier(0, 0, 0.2, 1); --rmbz-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --rmbz-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --rmbz-ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1); --rmbz-duration-instant: 100ms; --rmbz-duration-fast: 180ms; --rmbz-duration-normal: 280ms; --rmbz-duration-slow: 420ms; --rmbz-duration-slower: 600ms; /* ───────────────────────────────────────────────────────────────────────── * Z-INDEX (organizado, sem números mágicos) * ───────────────────────────────────────────────────────────────────────── */ --rmbz-z-base: 1; --rmbz-z-dropdown: 100; --rmbz-z-sticky: 200; --rmbz-z-overlay: 900; --rmbz-z-modal: 1000; --rmbz-z-popover: 1050; --rmbz-z-toast: 1100; --rmbz-z-tooltip: 1200; /* ───────────────────────────────────────────────────────────────────────── * BREAKPOINTS (referência — usar via @media direto) * * sm: 640px md: 768px lg: 1024px xl: 1280px * * Mobile-first: estilos base = mobile, @media min-width = adições. * ───────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────────── * LAYOUT * ───────────────────────────────────────────────────────────────────────── */ --rmbz-container-sm: 640px; --rmbz-container-md: 768px; --rmbz-container-lg: 960px; /* default da área do artista */ --rmbz-container-xl: 1200px; /* default do dashboard de distribuição */ } /* ───────────────────────────────────────────────────────────────────────────── * ACESSIBILIDADE — respeita preferência de movimento reduzido * ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --rmbz-duration-instant: 0ms; --rmbz-duration-fast: 0ms; --rmbz-duration-normal: 0ms; --rmbz-duration-slow: 0ms; --rmbz-duration-slower: 0ms; } } /* ───────────────────────────────────────────────────────────────────────────── * THEME OVERRIDES (futuro — high contrast, light mode opcional) * * Para activar high contrast: adicionar data-rmbz-theme="hc" ao . * Os componentes herdam automaticamente — não precisam de saber do tema. * ───────────────────────────────────────────────────────────────────────── */ [data-rmbz-theme="hc"] { --rmbz-bg-base: #000000; --rmbz-bg-surface: #0a0a0a; --rmbz-bg-elevated: #141414; --rmbz-bg-saldo: #1f2c39; /* Navy mais escuro para HC mode */ --rmbz-bg-vip-from: #142a1c; /* Verde mais escuro para HC mode */ --rmbz-bg-vip-to: #0e1411; --rmbz-text-primary: #ffffff; --rmbz-text-secondary: #e5e5e5; --rmbz-text-muted: #b5b5b5; --rmbz-border-subtle: #4a4a4a; --rmbz-border-strong: #6a6a6a; }