/* * SalesDever Design Tokens * Fonte da verdade para tipografia, cores, espaçamento e bordas. * Importar no de TODA página: * NUNCA hardcodar hex, rem ou peso de fonte diretamente — sempre usar um token daqui. */ /* ── Google Fonts: Inter Variable ── */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); :root { /* ── TIPOGRAFIA ─────────────────────────────────────── */ --font-base: 'Inter', sans-serif; /* Tamanhos */ --text-2xs: 0.625rem; /* 10px — badges minúsculos */ --text-xs: 0.75rem; /* 12px — labels, timestamps */ --text-sm: 0.8125rem; /* 13px — corpo secundário */ --text-md: 0.9375rem; /* 15px — corpo principal */ --text-lg: 1.0625rem; /* 17px — subtítulos */ --text-xl: 1.25rem; /* 20px — títulos de card */ --text-2xl: 1.5rem; /* 24px — título de página */ --text-kpi: 3rem; /* 48px — números grandes de dashboard */ --text-kpi-lg: 3.5rem; /* 56px — números de destaque máximo */ /* Pesos */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Line-height */ --leading-none: 1; /* números KPI */ --leading-tight: 1.2; /* títulos */ --leading-snug: 1.4; /* subtítulos */ --leading-normal: 1.6; /* corpo de texto */ /* Letter-spacing */ --tracking-tight: -0.02em; /* números grandes KPI */ --tracking-normal: 0; /* corpo */ --tracking-wide: 0.06em; /* labels uppercase (ex: "LEADS NOVOS") */ --tracking-wider: 0.1em; /* badges, chips em caixa alta */ /* Numeric features — aplicar em TODO elemento que exibe número */ --numeric: tabular-nums lining-nums; /* ── CORES ──────────────────────────────────────────── */ /* Background */ --color-bg: #0a0014; --color-bg-alt: #0a0420; /* Surface (cards, modais, dropdowns) */ --color-surface: rgba(30, 30, 45, 0.6); --color-surface-hover: rgba(40, 40, 60, 0.7); /* Bordas */ --color-border: rgba(255, 255, 255, 0.1); --color-border-focus: rgba(165, 148, 255, 0.5); /* Marca */ --color-primary: #A594FF; /* roxo claro — destaque, seleção */ --color-secondary: #667eea; /* azul-roxo — gradientes, hover */ --color-lavender: #C4B5FD; /* lavanda — texto de apoio suave */ --color-cyan: #4ECDC4; /* cyan — acento alternativo */ /* Texto */ --color-text: #ffffff; --color-text-muted: rgba(255, 255, 255, 0.5); --color-text-faint: rgba(255, 255, 255, 0.3); /* Semânticas */ --color-positive: #4ADE80; /* verde — delta positivo, sucesso */ --color-negative: #F87171; /* vermelho — delta negativo, erro */ --color-warning: #FBBF24; /* amarelo — atenção */ --color-info: #60A5FA; /* azul — informação */ /* Gradientes de marca */ --gradient-brand: linear-gradient(135deg, #667eea 0%, #A594FF 100%); --gradient-brand-h: linear-gradient(90deg, #667eea 0%, #A594FF 100%); --gradient-glow-1: radial-gradient(circle at 15% 30%, rgba(165, 148, 255, 0.07) 0%, transparent 50%); --gradient-glow-2: radial-gradient(circle at 85% 70%, rgba(102, 126, 234, 0.05) 0%, transparent 50%); /* ── ESPAÇAMENTO (grid de 4px) ───────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ── BORDAS & SOMBRAS ────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 9999px; /* pílulas */ --blur-glass: blur(12px); --blur-strong: blur(24px); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 24px rgba(165, 148, 255, 0.15); /* ── TRANSITIONS ─────────────────────────────────────── */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* ── Z-INDEX ─────────────────────────────────────────── */ --z-base: 1; --z-dropdown: 100; --z-modal: 200; --z-toast: 300; --z-overlay: 400; } /* ── Reset mínimo + aplicação global da fonte ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-base); } body { background-color: var(--color-bg); color: var(--color-text); font-size: var(--text-md); font-weight: var(--weight-regular); line-height: var(--leading-normal); font-variant-numeric: var(--numeric); font-feature-settings: 'tnum', 'cv02', 'cv03', 'cv04', 'cv11'; /* cv02-cv04, cv11: alternate digit forms do Inter que ficam mais limpos em dashboards */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }