/** * NinjaPay — Design Tokens * Tema claro/escuro funcional via atributo data-theme no . * Paleta: branco, preto, azul. Visual premium, minimalista, mobile-first. */ :root { /* Azul de marca */ --np-blue-50: #EFF4FF; --np-blue-100: #DCE7FF; --np-blue-300: #7DA3FF; --np-blue-500: #0B5FFF; --np-blue-600: #094FD6; --np-blue-700: #073EAB; /* Neutros */ --np-white: #FFFFFF; --np-black: #0A0A0F; --np-radius-sm: 8px; --np-radius-md: 12px; --np-radius-lg: 18px; --np-radius-xl: 24px; --np-shadow-sm: 0 1px 2px rgba(10,10,15,0.06); --np-shadow-md: 0 4px 16px rgba(10,10,15,0.08); --np-shadow-lg: 0 12px 32px rgba(10,10,15,0.14); --np-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); --np-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, Arial, sans-serif; } /* ── TEMA CLARO (padrão) ────────────────────────────────────────────────── */ :root, [data-theme="light"] { --bg-base: #F6F8FC; --bg-surface: #FFFFFF; --bg-surface-raised: #FFFFFF; --bg-muted: #F0F3F9; --bg-hover: #EEF2FA; --text-primary: #0A0A0F; --text-secondary: #4B5567; --text-tertiary: #8C95A6; --text-on-blue: #FFFFFF; --border-subtle: #E6EAF2; --border-default: #D8DEEA; --accent: var(--np-blue-500); --accent-hover: var(--np-blue-600); --accent-soft: var(--np-blue-50); --success: #0E9F6E; --success-soft: #DEFCEE; --danger: #E02424; --danger-soft: #FDE8E8; --warning: #C27803; --warning-soft: #FDF6B2; --shadow: var(--np-shadow-md); } /* ── TEMA ESCURO ────────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg-base: #0A0A0F; --bg-surface: #131318; --bg-surface-raised: #1A1A22; --bg-muted: #1A1A22; --bg-hover: #21212B; --text-primary: #F5F6FA; --text-secondary: #A6ADBB; --text-tertiary: #6E7585; --text-on-blue: #FFFFFF; --border-subtle: #232330; --border-default: #2C2C3A; --accent: var(--np-blue-500); --accent-hover: var(--np-blue-300); --accent-soft: rgba(11, 95, 255, 0.14); --success: #31C48D; --success-soft: rgba(49, 196, 141, 0.14); --danger: #F87171; --danger-soft: rgba(248, 113, 113, 0.14); --warning: #FACA15; --warning-soft: rgba(250, 202, 21, 0.12); --shadow: 0 8px 24px rgba(0,0,0,0.4); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--np-font); background: var(--bg-base); color: var(--text-primary); -webkit-font-smoothing: antialiased; transition: background-color var(--np-transition), color var(--np-transition); overflow-x: hidden; width: 100%; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } ::selection { background: var(--accent-soft); color: var(--accent); } /* Scrollbar discreta */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 8px; }