/* ========================================================= THEME TOKENS (LIGHT) + COMPAT (seus --color-*) + TYPOGRAPHY TOKENS (NORMAL) ========================================================= */ :root { /* ---------- Brand (seu tema) ---------- */ --color-primary: #c4b5fd; --color-primary-dark: #a78bfa; --color-primary-light: #ddd6fe; --color-accent: #f5a76f; --color-accent-light: #fdd5b5; --color-bg: #fafaf9; --color-bg-light: #ffffff; --color-text: #292524; --color-text-secondary: #78716c; --color-border: #e7e5e4; --color-success: #86efac; --color-success-dark: #4ade80; /* ---------- Tokens semânticos (recomendado) ---------- */ --bg-page: var(--color-bg); --bg-surface: var(--color-bg-light); --bg-muted: #f5f5f4; --text-primary: var(--color-text); --text-secondary: var(--color-text-secondary); --text-inverse: #ffffff; --border-default: var(--color-border); --border-strong: #d6d3d1; /* ---------- Efeitos ---------- */ --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-fab: 0 4px 16px rgba(196, 181, 253, 0.4); --shadow-fab-hover: 0 8px 24px rgba(196, 181, 253, 0.5); /* ---------- Overlay ---------- */ --overlay: rgba(0, 0, 0, 0.5); /* ---------- Ring (focus) ---------- */ --ring: rgba(196, 181, 253, 0.1); /* ========================================================= TYPOGRAPHY TOKENS — NORMAL (DEFAULT) ========================================================= */ --fs-base: 16px; /* escala (semântica) */ --fs-xs: 12px; /* badges, hint */ --fs-sm: 14px; /* nav-item, inputs */ --fs-md: 16px; /* textos padrões */ --fs-lg: 18px; /* destaques */ --fs-xl: 20px; /* subtítulos */ --fs-2xl: 24px; /* títulos menores */ --fs-3xl: 30px; /* títulos grandes */ --fs-4xl: 36px; /* hero */ /* line-height */ --lh-tight: 1.15; --lh-normal: 1.5; --lh-relaxed: 1.65; } /* ========================================================= THEME TOKENS (DARK) + COMPAT Ativado quando ========================================================= */ html.dark { /* Base escura confortável */ --color-bg: #0c0a09; --color-bg-light: #1c1917; --color-text: #fafaf9; --color-text-secondary: #a8a29e; --color-border: #292524; /* Brand ajustado pro dark (mantém identidade) */ --color-primary: #a78bfa; --color-primary-dark: #c4b5fd; --color-primary-light: #312e81; --color-accent: #f5a76f; --color-accent-light: #7c2d12; --color-success: #4ade80; --color-success-dark: #22c55e; /* Semânticos (herdam) */ --bg-page: var(--color-bg); --bg-surface: var(--color-bg-light); --bg-muted: #292524; --text-primary: var(--color-text); --text-secondary: var(--color-text-secondary); --text-inverse: #0c0a09; --border-default: var(--color-border); --border-strong: #44403c; /* Sombras no dark (menos “cinza sujo”) */ --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35); --shadow-fab: 0 10px 28px rgba(167, 139, 250, 0.25); --shadow-fab-hover: 0 16px 40px rgba(167, 139, 250, 0.30); --overlay: rgba(0, 0, 0, 0.65); --ring: rgba(167, 139, 250, 0.18); } /* ========================================================= TYPOGRAPHY TOKENS — SMALL Ativado quando ========================================================= */ html.text-sm { --fs-base: 14px; --fs-xs: 11px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 26px; --fs-4xl: 32px; } /* ========================================================= TYPOGRAPHY TOKENS — LARGE Ativado quando ========================================================= */ html.text-lg { --fs-base: 18px; --fs-xs: 13px; --fs-sm: 15px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 22px; --fs-2xl: 26px; --fs-3xl: 34px; --fs-4xl: 40px; } /* ========================================================= Base tipográfica global ========================================================= */ html { font-size: var(--fs-base); } body { background-color: var(--bg-page); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--fs-md); line-height: var(--lh-normal); } /* Shadow padrão */ .card-shadow { box-shadow: var(--shadow-card); } .smooth-transition { transition: all 0.3s ease; } .sidebar { position: fixed; left: 0; top: 0; width: 260px; height: 100vh; background: var(--bg-surface); border-right: 1px solid var(--border-default); padding: 24px 16px; overflow-y: auto; z-index: 40; } .main-content { margin-left: 260px; padding: 24px; min-height: 100vh; } .nav-item { padding: 12px 16px; border-radius: 8px; margin-bottom: 8px; cursor: pointer; text-decoration: none; color: var(--text-secondary); display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); font-weight: 500; } .nav-item:hover { background-color: var(--color-primary-light); color: var(--color-primary-dark); } .nav-item.active { background-color: var(--color-primary); color: var(--text-inverse); } .fab { position: fixed; bottom: 32px; right: 32px; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient( 135deg, var(--color-primary) 0%, var(--color-primary-dark) 100% ); color: var(--text-inverse); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-fab); z-index: 50; transition: transform 0.2s ease, box-shadow 0.2s ease; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay); display: none; align-items: center; justify-content: center; z-index: 100; } .modal-overlay.active { display: flex; } .modal-content { background: var(--bg-surface); border-radius: 16px; padding: 32px; max-width: 400px; width: 90%; position: relative; box-shadow: var(--shadow-card); border: 1px solid var(--border-default); } .bars-animation { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin: 20px 0; height: 25px; } .bar { width: 6px; background-color: var(--color-primary); border-radius: 3px; animation: grow 0.8s ease-in-out infinite; } .bar:nth-child(2) { animation-delay: 0.1s; } .bar:nth-child(3) { animation-delay: 0.2s; } @keyframes grow { 0%, 100% { height: 12px; } 50% { height: 28px; } } button { border: none; cursor: pointer; font-size: var(--fs-sm); } /* Mobile */ @media (max-width: 768px) { .sidebar { width: 100%; height: auto; position: relative; border-right: none; border-bottom: 1px solid var(--border-default); padding: 12px; } .sidebar.mobile-hidden { display: none; } .main-content { margin-left: 0; padding: 16px; } .fab { bottom: 24px; right: 24px; width: 56px; height: 56px; } .nav-item { display: inline-block; width: auto; margin-right: 8px; margin-bottom: 0; padding: 8px 12px; font-size: var(--fs-sm); } } .progress-bar { height: 8px; background-color: var(--color-primary-light); border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background-color: var(--color-primary); border-radius: 4px; } /* Gradients */ .gradient-primary { background: linear-gradient( 135deg, var(--color-primary) 0%, var(--color-primary-dark) 100% ); } .gradient-lavender-soft { background: linear-gradient(180deg, var(--color-primary) 0%, var(--bg-surface) 100%); } /* Form Elements */ input, select { background-color: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: 8px; padding: 10px 12px; font-size: var(--fs-sm); width: 100%; } input::placeholder { color: var(--text-secondary); } input:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--ring); } /* Sidebar Mobile Hidden */ .sidebar.mobile-hidden { display: none; } /* FAB Hover */ .fab:hover { transform: scale(1.06); box-shadow: var(--shadow-fab-hover); } /* Badges */ .badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: var(--fs-xs); font-weight: 600; } /* badges adaptados pro tema */ .badge-income { background-color: rgba(59, 130, 246, 0.15); /* azul suave */ color: var(--text-primary); border: 1px solid var(--border-default); } .badge-expense { background-color: rgba(239, 68, 68, 0.15); /* vermelho suave */ color: var(--text-primary); border: 1px solid var(--border-default); } /* Tip Cards */ .tip-card { border-left: 4px solid var(--color-primary); background: linear-gradient(135deg, rgba(196, 181, 253, 0.20) 0%, var(--bg-surface) 100%); border: 1px solid var(--border-default); } .tip-card.alert { border-left-color: #ef4444; background: linear-gradient(135deg, rgba(239, 68, 68, 0.16) 0%, var(--bg-surface) 100%); } .tip-card.success { border-left-color: var(--color-success-dark); background: linear-gradient(135deg, rgba(34, 197, 94, 0.16) 0%, var(--bg-surface) 100%); } /* Toggle Switch */ .toggle-switch { width: 52px; height: 28px; border-radius: 14px; background-color: var(--border-default); position: relative; cursor: pointer; transition: all 0.3s ease; border: 1px solid var(--border-default); } .toggle-switch.active { background-color: var(--color-primary); } .toggle-switch::after { content: ""; position: absolute; width: 24px; height: 24px; border-radius: 50%; background-color: var(--bg-surface); top: 2px; left: 2px; transition: all 0.3s ease; } .toggle-switch.active::after { left: 26px; } /* Stat Card */ .stat-card { background: var(--bg-surface); border-radius: 12px; padding: 24px; box-shadow: var(--shadow-card); border: 1px solid var(--border-default); } /* Chart Bar */ .chart-bar { height: 120px; background-color: var(--color-primary-light); border-radius: 6px; margin-bottom: 8px; position: relative; overflow: hidden; } .chart-bar-fill { height: 100%; background-color: var(--color-primary); border-radius: 6px; } /* Tab Button */ .tab-button { padding: 12px 24px; border-radius: 8px; background-color: transparent; color: var(--text-secondary); font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease; font-size: var(--fs-sm); } .tab-button.active { background-color: var(--color-primary-light); color: var(--color-primary-dark); border-color: var(--color-primary); } /* Microphone Pulse Animation */ .microphone-pulse { animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Scrollbar Customizado */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); } /* ========================================================= (Opcional) Helpers tipográficos para fora do Tailwind (Se você quiser usar classes tipo .ui-h1 etc.) ========================================================= */ .ui-h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); } .ui-h2 { font-size: var(--fs-2xl); line-height: var(--lh-normal); } .ui-h3 { font-size: var(--fs-xl); line-height: var(--lh-normal); } .ui-text { font-size: var(--fs-md); line-height: var(--lh-relaxed); } .ui-small { font-size: var(--fs-sm); } .ui-micro { font-size: var(--fs-xs); }