/* ============================================================ DESIGN SYSTEM — SaaS Purple / Tech Fonte da verdade dos tokens. Importe este arquivo no topo do seu CSS global (ex: globals.css / app.css). ============================================================ */ :root { /* ---------- CORES PRIMÁRIAS (Brand) ---------- */ --brand-purple: #6B3FE7; /* CTA, botões primários, links de ação */ --brand-purple-hover: #5A31CC; /* hover / estado ativo */ --brand-purple-deep: #3C3489; /* texto roxo sobre fundo claro */ --brand-purple-tint: #EEEDFE; /* badges, fundos suaves, hover sutil */ /* ---------- SUPERFÍCIES (Light mode default) ---------- */ --bg-page: #F7F6FF; /* fundo da página */ --bg-surface: #FFFFFF; /* cards, modais, inputs */ --bg-surface-alt: #F1EFE8; /* superfície secundária / hover de linha */ /* ---------- TEXTO ---------- */ --text-primary: #1C1530; /* títulos e texto principal */ --text-secondary: #5F5E5A; /* corpo de texto, descrições */ --text-tertiary: #888780; /* hints, captions, labels */ --text-on-brand: #FFFFFF; /* texto sobre roxo */ /* ---------- BORDAS ---------- */ --border-subtle: rgba(28, 21, 48, 0.10); --border-default: rgba(28, 21, 48, 0.18); --border-strong: rgba(28, 21, 48, 0.30); --border-focus: var(--brand-purple); /* ---------- SEMÂNTICAS ---------- */ --success: #3B6D11; --success-bg: #EAF3DE; --warning: #BA7517; --warning-bg: #FAEEDA; --danger: #E24B4A; --danger-bg: #FCEBEB; --info: #378ADD; --info-bg: #E6F1FB; /* ---------- TIPOGRAFIA ---------- */ --font-display: "Plus Jakarta Sans", "Satoshi", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* escala (clamp para responsividade) */ --fs-h1: clamp(1.75rem, 1.4rem + 1.6vw, 2rem); /* ~28–32px Bold 700 */ --fs-h2: 1.5rem; /* 24px Bold 700 */ --fs-h3: 1.125rem; /* 18px SemiBold 600 */ --fs-h4: 0.9375rem; /* 15px SemiBold 600 */ --fs-body: 0.875rem; /* 14px Regular 400 */ --fs-caption: 0.75rem; /* 12px */ --fs-label: 0.6875rem; /* 11px uppercase Medium */ --lh-tight: 1.15; --lh-heading: 1.3; --lh-body: 1.6; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- ESPAÇAMENTO (escala 4px) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* ---------- BORDER RADIUS ---------- */ --radius-sm: 4px; /* tags, inputs pequenos */ --radius-md: 8px; /* botões, campos */ --radius-lg: 12px; /* cards */ --radius-xl: 16px; /* modais, drawers */ --radius-pill: 999px;/* pills, badges */ /* ---------- SOMBRAS (sutis, sem exagero) ---------- */ --shadow-sm: 0 1px 2px rgba(28, 21, 48, 0.06); --shadow-md: 0 4px 12px rgba(28, 21, 48, 0.08); --shadow-lg: 0 12px 32px rgba(28, 21, 48, 0.12); --shadow-focus: 0 0 0 3px rgba(107, 63, 231, 0.15); } /* ============================================================ DARK MODE — ative com [data-theme="dark"] no ou troque para @media (prefers-color-scheme: dark) se preferir ============================================================ */ [data-theme="dark"] { --bg-page: #0F0A1E; --bg-surface: #1C1530; --bg-surface-alt: #261D40; --text-primary: #F7F6FF; --text-secondary: #B4B2A9; --text-tertiary: #888780; --border-subtle: rgba(255, 255, 255, 0.10); --border-default: rgba(255, 255, 255, 0.18); --border-strong: rgba(255, 255, 255, 0.30); --brand-purple-tint: #261D40; /* fundo de badge no escuro */ --success-bg: rgba(59, 109, 17, 0.18); --warning-bg: rgba(186, 117, 23, 0.18); --danger-bg: rgba(226, 75, 74, 0.18); --info-bg: rgba(55, 138, 221, 0.18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } /* ============================================================ CLASSES UTILITÁRIAS BASE (opcional) ============================================================ */ .h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--text-primary); } .h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.2; color: var(--text-primary); } .h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: var(--text-primary); } .body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--text-secondary); } .label { font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); } .btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-medium); border: none; cursor: pointer; transition: background .15s, transform .1s; } .btn:active { transform: scale(0.97); } .btn--primary { background: var(--brand-purple); color: var(--text-on-brand); } .btn--primary:hover { background: var(--brand-purple-hover); } .btn--secondary { background: transparent; color: var(--brand-purple); border: 1.5px solid var(--brand-purple); } .btn--ghost { background: transparent; color: var(--text-secondary); border: 0.5px solid var(--border-default); } .input { height: 36px; padding: 0 var(--space-3); border: 0.5px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-primary); outline: none; transition: border-color .15s, box-shadow .15s; } .input:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); } .input--error { border-color: var(--danger); } .card { background: var(--bg-surface); border: 0.5px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); } .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-label); font-weight: var(--fw-medium); background: var(--brand-purple-tint); color: var(--brand-purple-deep); }