:root { /* ── Accent palettes ──────────────────────────────────────────────────── Para trocar a cor do sistema: altere as 3 variáveis em "Active accent". Para adicionar uma nova paleta: copie o bloco abaixo e ajuste os valores. Futuramente, data-accent="purple|green|blue" no permite troca dinâmica. */ --palette-purple-base: #7F77DD; --palette-purple-hover: #534AB7; --palette-purple-subtle: rgba(127, 119, 221, 0.12); --palette-green-base: #10b981; --palette-green-hover: #059669; --palette-green-subtle: rgba(16, 185, 129, 0.10); --palette-blue-base: #3b82f6; --palette-blue-hover: #2563eb; --palette-blue-subtle: rgba(59, 130, 246, 0.10); --palette-pink-base: #D4537E; --palette-pink-hover: #993556; --palette-pink-subtle: rgba(212, 83, 126, 0.12); /* ── Active accent (edite aqui para trocar a cor global) ─────────────── */ --color-accent: var(--palette-purple-base); --color-accent-hover: var(--palette-purple-hover); --color-accent-subtle: var(--palette-purple-subtle); /* Light mode (default) */ --bg-primary: #ffffff; --bg-secondary: #f9fafb; --bg-tertiary: #f3f4f6; --bg-card: #ffffff; --bg-overlay: rgba(0, 0, 0, 0.04); --border-color: #e5e7eb; --border-subtle: #f0f0f0; --text-primary: #111827; --text-secondary: #6b7280; --text-tertiary: #9ca3af; --text-inverse: #ffffff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08); /* Semantic colors */ --color-income: #10b981; --color-income-subtle: rgba(16, 185, 129, 0.1); --color-expense: #f43f5e; --color-expense-subtle: rgba(244, 63, 94, 0.1); --color-pending: #f59e0b; --color-pending-subtle: rgba(245, 158, 11, 0.1); /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 22px; --font-size-2xl: 28px; --font-size-3xl: 36px; /* Transitions */ --transition: 150ms ease; --transition-slow: 250ms ease; } [data-theme="dark"] { --bg-primary: #0a0a0a; --bg-secondary: #111111; --bg-tertiary: #1a1a1a; --bg-card: #141414; --bg-overlay: rgba(255, 255, 255, 0.04); --border-color: #222222; --border-subtle: #1a1a1a; --text-primary: #f5f5f5; --text-secondary: #a1a1aa; --text-tertiary: #52525b; --text-inverse: #0a0a0a; --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 8px 24px rgba(0, 0, 0, 0.6); } /* ── Accent overrides — futura tela de configurações ─────────────────────── Basta setar data-accent="green" (ou "blue") no para trocar o tema. O valor padrão (sem atributo) é purple, definido acima em :root. */ [data-accent="green"] { --color-accent: var(--palette-green-base); --color-accent-hover: var(--palette-green-hover); --color-accent-subtle: var(--palette-green-subtle); } [data-accent="blue"] { --color-accent: var(--palette-blue-base); --color-accent-hover: var(--palette-blue-hover); --color-accent-subtle: var(--palette-blue-subtle); } [data-accent="purple"] { --color-accent: var(--palette-purple-base); --color-accent-hover: var(--palette-purple-hover); --color-accent-subtle: var(--palette-purple-subtle); } [data-accent="pink"] { --color-accent: var(--palette-pink-base); --color-accent-hover: var(--palette-pink-hover); --color-accent-subtle: var(--palette-pink-subtle); }