/* ===================================================================== Plataforma de Gestão Profissional — Design Tokens Tema base herdado da identidade Evelyn Braga (rosa + dourado). Cada conta pode sobrescrever --color-primary / --color-secondary via custom properties inline no (personalização white-label). ===================================================================== */ :root { /* Marca (base Evelyn) */ --color-primary: #FF4081; --color-primary-dark: #E0218A; --color-primary-soft: #FCE4EC; --color-secondary: #111827; --color-gold: #D4AF37; --gradient-gold: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C); --gradient-primary: linear-gradient(135deg, #FF4081 0%, #E0218A 100%); --gradient-hero: linear-gradient(135deg, #FF6FA5 0%, #E0218A 55%, #B0186C 100%); /* Superfícies */ --color-bg: #F7F5F9; --color-bg-alt: #F1EEF5; --color-card: #FFFFFF; --color-border: #ECE7F0; --color-border-strong: #DAD3E2; /* Texto */ --color-text: #241B2E; --color-text-soft: #5B5468; --color-muted: #8B8496; --color-on-primary: #FFFFFF; /* Barra lateral (personalizável pela cor secundária da conta) */ --sidebar-bg: linear-gradient(180deg, #1B1023 0%, #2A1330 100%); --color-on-sidebar: #EFE9F2; --sidebar-hover: rgba(255,255,255,.07); --sidebar-muted: #9A7BA8; /* Status */ --color-success: #16A34A; --color-success-soft: #DCFCE7; --color-warning: #D97706; --color-warning-soft: #FEF3C7; --color-danger: #DC2626; --color-danger-soft: #FEE2E2; --color-info: #2563EB; --color-info-soft: #DBEAFE; --color-partial: #7C3AED; --color-partial-soft: #EDE9FE; --color-neutral: #6B7280; --color-neutral-soft: #F1F1F4; /* Tipografia */ --font-heading: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; /* Raios */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; /* Sombras */ --shadow-xs: 0 1px 2px rgba(36, 27, 46, 0.06); --shadow-sm: 0 4px 12px rgba(36, 27, 46, 0.06); --shadow-card: 0 12px 32px rgba(36, 27, 46, 0.08); --shadow-float:0 24px 60px rgba(36, 27, 46, 0.14); --shadow-primary: 0 12px 28px rgba(224, 33, 138, 0.28); /* Espaçamentos */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; /* Layout */ --sidebar-w: 264px; --topbar-h: 68px; --container-max: 1280px; /* Transições */ --t-fast: 120ms ease; --t-base: 200ms cubic-bezier(.4,0,.2,1); --t-slow: 360ms cubic-bezier(.4,0,.2,1); --ring: 0 0 0 3px rgba(255, 64, 129, 0.30); } /* Reset enxuto */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.55; font-size: 15px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } h1, h2, h3, h4, h5 { font-family: var(--font-heading); color: var(--color-secondary); line-height: 1.2; font-weight: 700; } a { color: var(--color-primary-dark); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } ul { list-style: none; padding: 0; } /* Acessibilidade: foco visível (WCAG 2.2) */ :focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--ring); } ::selection { background: var(--color-primary-soft); color: var(--color-primary-dark); } /* Scrollbar discreta */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-pill); border: 2px solid var(--color-bg); } *::-webkit-scrollbar-thumb:hover { background: var(--color-muted); } /* Utilitários */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .text-muted { color: var(--color-muted); } .text-soft { color: var(--color-text-soft); } .text-success { color: var(--color-success); } .text-danger { color: var(--color-danger); } .text-warning { color: var(--color-warning); } .text-right { text-align: right; } .text-center { text-align: center; } .mono { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; }