/** * BlockTrends Design System v2 — tokens * * Variáveis CSS canônicas. Importar antes de qualquer estilo customizado. * Light mode é default. Dark mode via [data-bt-theme="dark"] no . * * @version 2.0 * @author BlockTrends */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ============ TYPOGRAPHY ============ */ --bt-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --bt-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bt-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Type scale */ --bt-fs-display-1: 64px; --bt-fs-display-2: 48px; --bt-fs-h1: 36px; --bt-fs-h2: 28px; --bt-fs-h3: 22px; --bt-fs-h4: 18px; --bt-fs-body-lg: 20px; --bt-fs-body: 17px; --bt-fs-body-sm: 15px; --bt-fs-caption: 13px; /* Line heights */ --bt-lh-tight: 1.10; --bt-lh-snug: 1.25; --bt-lh-normal: 1.45; --bt-lh-relaxed: 1.55; --bt-lh-loose: 1.65; /* ============ COLORS — LIGHT MODE (default) ============ */ --bt-bg: #FAFAF7; --bt-bg-elev: #FFFFFF; --bt-bg-muted: #F4F2EE; --bt-ink: #0F172A; --bt-ink-2: #475569; --bt-ink-3: #94A3B8; --bt-line: #E5E7EB; /* 1.4.18: --bt-accent migrado de âmbar (#F59E0B/#FBBF24 do design * antigo) pra lilás BT (#5A3FE6 light / #6F4EFF dark). theme.css * já tinha lilás mas tokens.css aplicava amarelo em dark com * especificidade maior, fazendo o menu mostrar hover amarelo * em dark. Agora ambos os arquivos batem com a doutrina lilás. */ --bt-accent: #5A3FE6; /* Pilares (mesmas cores em qualquer tema) */ --bt-fin: #1E40AF; /* azul finanças */ --bt-tech: #7C3AED; /* roxo tech */ --bt-crypto: #F59E0B; /* âmbar cripto */ /* Status (universais) */ --bt-up: #10B981; --bt-down: #EF4444; --bt-warn: #F59E0B; --bt-info: #2563EB; /* ============ SPACING ============ */ --bt-sp-1: 4px; --bt-sp-2: 8px; --bt-sp-3: 12px; --bt-sp-4: 16px; --bt-sp-5: 24px; --bt-sp-6: 32px; --bt-sp-7: 48px; --bt-sp-8: 64px; --bt-sp-9: 96px; /* ============ LAYOUT ============ */ --bt-w-edit: 720px; /* coluna editorial relatório/curso */ --bt-w-page: 1200px; /* portal padrão */ --bt-w-mail: 600px; /* email/newsletter */ --bt-w-side: 280px; /* sidebar dashboard */ /* ============ RADII ============ */ --bt-r-sm: 6px; --bt-r-md: 10px; --bt-r-lg: 14px; --bt-r-xl: 20px; --bt-r-pill: 999px; /* ============ SHADOWS ============ */ --bt-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --bt-shadow-md: 0 4px 12px rgba(15, 23, 42, .08); --bt-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12); --bt-shadow-xl: 0 24px 56px rgba(15, 23, 42, .16); /* ============ MOTION ============ */ --bt-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --bt-ease-in: cubic-bezier(0.55, 0, 1, 0.45); --bt-d-fast: 150ms; --bt-d-base: 250ms; --bt-d-slow: 400ms; } /* ============ DARK MODE ============ */ :root[data-bt-theme="dark"], .bt-dark { --bt-bg: #0B0E13; --bt-bg-elev: #141821; --bt-bg-muted: #1E2330; --bt-ink: #F1F5F9; --bt-ink-2: #94A3B8; --bt-ink-3: #64748B; --bt-line: #2A3142; --bt-accent: #6F4EFF; } /* ============ BASE RESET ============ */ .bt-system { font-family: var(--bt-font-ui); font-size: var(--bt-fs-body); line-height: var(--bt-lh-loose); color: var(--bt-ink); background: var(--bt-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .bt-system h1, .bt-system h2, .bt-system h3, .bt-system .bt-display { font-family: var(--bt-font-display); font-weight: 700; letter-spacing: -0.02em; line-height: var(--bt-lh-tight); color: var(--bt-ink); margin: 0 0 var(--bt-sp-4); } .bt-system h1 { font-size: var(--bt-fs-h1); line-height: var(--bt-lh-snug); } .bt-system h2 { font-size: var(--bt-fs-h2); line-height: var(--bt-lh-snug); } .bt-system h3 { font-size: var(--bt-fs-h3); font-family: var(--bt-font-ui); font-weight: 600; letter-spacing: -0.01em; line-height: var(--bt-lh-snug); } .bt-system h4 { font-size: var(--bt-fs-h4); font-family: var(--bt-font-ui); font-weight: 600; line-height: var(--bt-lh-snug); margin: 0 0 var(--bt-sp-3); } .bt-system .bt-display-1 { font-size: var(--bt-fs-display-1); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; } .bt-system .bt-display-2 { font-size: var(--bt-fs-display-2); font-weight: 700; line-height: 1.10; letter-spacing: -0.02em; } .bt-system p { margin: 0 0 var(--bt-sp-4); } .bt-system .bt-lead { font-size: var(--bt-fs-body-lg); line-height: var(--bt-lh-relaxed); color: var(--bt-ink-2); } .bt-system .bt-meta { font-size: var(--bt-fs-caption); color: var(--bt-ink-3); font-weight: 500; } .bt-system .bt-mono { font-family: var(--bt-font-mono); font-feature-settings: 'tnum' 1, 'zero' 1; } /* ============ PILAR BADGES ============ */ .bt-system .bt-pill { display: inline-block; padding: 4px 12px; border-radius: var(--bt-r-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; } .bt-system .bt-pill--fin { background: var(--bt-fin); } .bt-system .bt-pill--tech { background: var(--bt-tech); } .bt-system .bt-pill--crypto { background: var(--bt-crypto); color: #1F2937; } .bt-system .bt-pill--gradient { background: linear-gradient(90deg, var(--bt-fin) 0%, var(--bt-tech) 50%, var(--bt-crypto) 100%); } /* ============ CARDS ============ */ .bt-system .bt-card { background: var(--bt-bg-elev); border: 1px solid var(--bt-line); border-radius: var(--bt-r-md); padding: var(--bt-sp-5); transition: border-color var(--bt-d-fast) var(--bt-ease-out), box-shadow var(--bt-d-fast) var(--bt-ease-out), transform var(--bt-d-fast) var(--bt-ease-out); } .bt-system .bt-card:hover { border-color: color-mix(in srgb, var(--bt-fin) 60%, var(--bt-line)); box-shadow: var(--bt-shadow-md); transform: translateY(-2px); } .bt-system .bt-card--fin { border-top: 3px solid var(--bt-fin); } .bt-system .bt-card--tech { border-top: 3px solid var(--bt-tech); } .bt-system .bt-card--crypto { border-top: 3px solid var(--bt-crypto); } /* ============ CALLOUT ============ */ .bt-system .bt-callout { background: var(--bt-bg-muted); border-left: 4px solid var(--bt-fin); padding: var(--bt-sp-4) var(--bt-sp-5); border-radius: var(--bt-r-sm); margin: var(--bt-sp-5) 0; } .bt-system .bt-callout--tech { border-left-color: var(--bt-tech); } .bt-system .bt-callout--crypto { border-left-color: var(--bt-crypto); } .bt-system .bt-callout strong { color: var(--bt-ink); } /* ============ TICKER ============ */ .bt-system .bt-ticker { display: inline-flex; align-items: baseline; gap: var(--bt-sp-2); font-family: var(--bt-font-mono); font-feature-settings: 'tnum' 1; } .bt-system .bt-ticker__symbol { font-weight: 500; color: var(--bt-ink-2); font-size: var(--bt-fs-body-sm); } .bt-system .bt-ticker__price { font-weight: 700; color: var(--bt-ink); font-size: var(--bt-fs-body); } .bt-system .bt-ticker__delta--up { color: var(--bt-up); } .bt-system .bt-ticker__delta--down { color: var(--bt-down); } /* ============ BUTTONS ============ */ .bt-system .bt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bt-sp-2); padding: 12px 22px; font-family: var(--bt-font-ui); font-weight: 700; font-size: var(--bt-fs-body-sm); border: 0; border-radius: var(--bt-r-md); cursor: pointer; text-decoration: none; transition: all var(--bt-d-fast) var(--bt-ease-out); } .bt-system .bt-btn--primary { background: var(--bt-ink); color: var(--bt-bg-elev); } .bt-system .bt-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--bt-shadow-md); } .bt-system .bt-btn--accent { background: var(--bt-accent); color: #1F2937; } .bt-system .bt-btn--ghost { background: transparent; color: var(--bt-ink); border: 1px solid var(--bt-line); } .bt-system .bt-btn--ghost:hover { border-color: var(--bt-ink); } .bt-system .bt-btn--sm { padding: 8px 16px; font-size: var(--bt-fs-caption); } /* ============ DIVIDERS ============ */ .bt-system .bt-rule { border: 0; border-top: 1px solid var(--bt-line); margin: var(--bt-sp-6) 0; } .bt-system .bt-rule--thick { border-top-width: 3px; } /* ============ FOCUS RING ============ */ .bt-system *:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 2px; border-radius: var(--bt-r-sm); }