/* ============================================================ base.css — reset e tokens de design do Orbe Paleta oficial Gramcell (roxo corporativo + neutros). ============================================================ */ :root { /* ---- Roxos (cor de marca) ---- */ --purple-900: #3F2E6B; /* roxo profundo */ --purple-800: #543B8D; /* roxo escuro */ --purple-700: #6C51A1; /* roxo medio */ --purple-600: #7C67D1; /* roxo vibrante — so em gradientes */ --purple-400: #957FFF; /* roxo claro — destaques */ --purple-100: #ECE8F7; /* lavanda (brand-soft do DS) */ /* ---- Neutros ---- */ --ink-900: #1F1933; /* ink do DS (roxo-escuro) */ --ink-800: #2C2640; /* ink-2 do DS */ --ink-600: #6B6580; /* cinza medio do DS (labels, texto secundario) */ --ink-400: #9089A6; /* placeholder do DS */ --ink-200: #D8D2EA; /* linha/borda do DS (lavanda) */ --white: #FFFFFF; /* ---- Tokens semanticos ---- */ --color-bg: #F3F2F7; /* fundo geral (page-bg do DS) */ --color-surface: var(--white); /* cards */ --color-surface-muted: var(--color-bg); /* paineis/sidebar/hover sutil */ --color-text: var(--ink-900); --color-text-primary: var(--ink-900); /* alias de --color-text */ /* ink-400 (#A29FAA) reprova no AA como texto (2,5:1); ink-600 passa (10:1). Mantemos ink-400 apenas para uso decorativo/desabilitado. */ --color-text-muted: var(--ink-600); --color-text-secondary: var(--ink-600); --color-border: var(--ink-200); /* Primaria = roxo de marca #543B8D (DS do Figma). O hover CLAREIA (brand-accent), ja que a primaria agora e escura. `primary-active` segue apontando pro mesmo #543B8D: os consumidores dele (governanca, historico) o usam como "o roxo da marca", nao como estado :active. */ --color-primary: var(--purple-800); /* #543B8D */ --color-primary-hover: #6B53B8; /* brand-accent */ --color-primary-active: var(--purple-800); /* #543B8D */ --color-primary-text: var(--white); --color-primary-soft: var(--purple-100); --color-error-bg: #FEF2F2; --color-error-border: #FCA5A5; --color-error-text: #B91C1C; --color-success: #059669; --color-success-bg: #ECFDF5; --color-success-border: #A7F3D0; --color-success-text: #065F46; --color-warning-bg: #FFF7ED; --color-warning-border: #FED7AA; --color-warning-text: #9A3412; /* ---- Tipografia ---- */ --font-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ---- Espacamento ---- */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* ---- Bordas e sombras ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --shadow-sm: 0 1px 3px rgba(18, 18, 22, 0.06); --shadow-md: 0 4px 20px rgba(18, 18, 22, 0.08); --shadow-lg: 0 12px 40px rgba(63, 46, 107, 0.12); /* ---- Transicoes ---- */ --transition: 160ms ease; } /* Fonte Inter: carregada via no de cada HTML (preconnect + stylesheet). Um @import aqui seria invalido por vir depois destas regras. */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-base); font-size: 16px; line-height: 1.5; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; } button, input, select, textarea { font-family: inherit; font-size: inherit; } button { cursor: pointer; } a { color: var(--color-primary); } /* ---- Foco visivel consistente (teclado) ---- */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Inputs/selects ja tem anel proprio (box-shadow); evita outline duplo */ .input:focus-visible, .select:focus-visible, .field input:focus-visible { outline: none; } /* ---- Respeita usuarios que pedem menos movimento ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }