/* ═══════════════════════════════════════════════════════════ RENOVO DESIGN TOKENS v2.0 — DUAL THEME SYSTEM Loaded BEFORE app.css. Forces ALL surfaces to use tokens. Light = default. Dark = data-theme="dark" on . ═══════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ─── SHARED TOKENS ─── */ :root { --accent: #e94560; --accent-hover: #ff5a75; --accent-glow: rgba(233,69,96,0.15); --gradient-hero: linear-gradient(135deg, #e94560 0%, #7c3aed 100%); --success: #10b981; --success-bg: rgba(16,185,129,0.1); --warning: #f59e0b; --warning-bg: rgba(245,158,11,0.1); --danger: #ef4444; --danger-bg: rgba(239,68,68,0.1); --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --radius-sm:6px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --text-display:2.5rem; --text-h1:1.75rem; --text-h2:1.25rem; --text-h3:1rem; --text-body:0.875rem; --text-caption:0.75rem; --transition-fast:0.15s ease; --transition-base:0.3s ease; } /* ─── LIGHT THEME (default) ─── */ :root, [data-theme="light"] { --bg: #faf8f5; --bg-soft: #f3f0ec; --bg-card: #ffffff; --ink: #1a1a2e; --ink-2: #4a4a68; --ink-soft: #8a8aa8; --ink-line: rgba(0,0,0,0.06); --glass-bg: rgba(255,255,255,0.7); --glass-border: rgba(0,0,0,0.06); --glass-hover: rgba(0,0,0,0.03); --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --shadow-glow: 0 0 20px rgba(233,69,96,0.1); --input-bg: #ffffff; --overlay: rgba(0,0,0,0.5); } /* ─── DARK THEME ─── */ [data-theme="dark"] { color-scheme: dark; --bg: #0f0f14; --bg-soft: #1a1a24; --bg-card: #1a1a24; --ink: #f0f0f5; --ink-2: #a0a0b8; --ink-soft: #5a5a72; --ink-line: rgba(255,255,255,0.06); --glass-bg: rgba(255,255,255,0.03); --glass-border: rgba(255,255,255,0.06); --glass-hover: rgba(255,255,255,0.08); --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 32px rgba(0,0,0,0.6); --shadow-glow: 0 0 20px rgba(233,69,96,0.2); --input-bg: #1a1a24; --overlay: rgba(0,0,0,0.8); } /* ═══════════════════════════════════════════════════════════ FORCED OVERRIDES — Makes the ENTIRE app use tokens regardless of what app.css hardcodes. ═══════════════════════════════════════════════════════════ */ /* Global transition for smooth theme switching */ *, *::before, *::after { transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } /* Body */ body { font-family: var(--font) !important; background: var(--bg) !important; color: var(--ink) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Main content area */ main, .main, .content, .page, [class*="content"], [class*="panel"], [class*="container"]:not(.sidebar):not(nav) { background: var(--bg) !important; color: var(--ink) !important; } /* Cards & sections */ .card, .stat, .report-sheet, .dl-card, [class*="card"], [class*="section"]:not(.sidebar-section), .rv-confirm, .cmdk-panel { background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--radius-lg) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-sm) !important; color: var(--ink) !important; } .card:hover, [class*="card"]:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-1px); } /* Sidebar — ALWAYS dark in both themes */ .sidebar, nav.sidebar, [class*="sidebar"] { background: #1a1a2e !important; color: #e0e0f0 !important; border-right: 1px solid rgba(255,255,255,0.06) !important; } .sidebar a, .sidebar button, [class*="sidebar"] a { color: #8a8ab0 !important; border-radius: var(--radius-sm); transition: all var(--transition-fast); } .sidebar a:hover, .sidebar button:hover, [class*="sidebar"] a:hover { color: #e0e0f0 !important; background: rgba(255,255,255,0.05) !important; } .sidebar a.active, .sidebar a[aria-current="page"], [class*="sidebar"] a.active { color: var(--accent) !important; background: rgba(233,69,96,0.12) !important; border-left: 3px solid var(--accent); font-weight: 600; } /* Inputs, textareas, selects */ input, textarea, select { background: var(--input-bg) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--radius-md) !important; color: var(--ink) !important; font-family: var(--font) !important; font-size: var(--text-body); padding: 10px 14px; } input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow) !important; outline: none !important; } input::placeholder, textarea::placeholder { color: var(--ink-soft) !important; } /* Buttons — primary with gradient */ .btn-primary, button.accent, button[style*="background"]:not(.btn-ghost) { background: var(--gradient-hero) !important; color: white !important; border: none !important; border-radius: var(--radius-md) !important; font-weight: 600; box-shadow: var(--shadow-glow); padding: 10px 20px; } .btn-primary:hover, button.accent:hover { transform: translateY(-1px); box-shadow: 0 0 30px var(--accent-glow) !important; } /* Buttons — secondary/ghost */ .btn-ghost, button:not(.accent):not(.btn-primary):not(#themeToggle):not(#renoFab) { background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; color: var(--ink) !important; border-radius: var(--radius-md) !important; } .btn-ghost:hover, button:not(.accent):not(.btn-primary):not(#themeToggle):not(#renoFab):hover { background: var(--glass-hover) !important; transform: translateY(-1px); } /* Typography */ h1, h2, h3, h4, h5, h6 { color: var(--ink) !important; font-family: var(--font) !important; } h1 { font-size: var(--text-h1) !important; font-weight: 700 !important; } h2 { font-size: var(--text-h2) !important; font-weight: 600 !important; } h3 { font-size: var(--text-h3) !important; font-weight: 600 !important; } p, span, label, li { color: var(--ink-2); font-family: var(--font); } small, .caption { color: var(--ink-soft); font-size: var(--text-caption); } /* Tables */ table { border-collapse: collapse; width: 100%; } th { background: var(--bg-soft) !important; color: var(--ink-soft) !important; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--glass-border) !important; } td { padding: 12px 16px; border-bottom: 1px solid var(--glass-border) !important; color: var(--ink) !important; } tr:hover td { background: var(--glass-hover) !important; } /* Modals & overlays */ .rv-confirm-overlay, [class*="overlay"] { background: var(--overlay) !important; } .rv-confirm-box, .rv-confirm, [class*="modal"] { background: var(--bg-card) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg) !important; color: var(--ink) !important; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); } /* Dividers */ hr { border-color: var(--glass-border) !important; } /* Toasts */ .toast { background: var(--bg-card) !important; color: var(--ink) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg) !important; } /* Theme toggle button */ #themeToggle { position: fixed; top: 14px; right: 16px; z-index: 9999; width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card) !important; color: var(--ink) !important; border: 1px solid var(--glass-border) !important; box-shadow: var(--shadow-sm); font-size: 16px; cursor: pointer; } #themeToggle:hover { transform: translateY(-1px); box-shadow: var(--shadow-md) !important; } /* RENO FAB */ #renoFab { background: var(--gradient-hero) !important; color: white !important; border: none !important; box-shadow: var(--shadow-glow) !important; } /* Animations */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .section-enter { animation: fadeSlideUp 0.3s ease; } .generating, .loading { background: linear-gradient(90deg, var(--bg-soft) 25%, var(--bg-card) 50%, var(--bg-soft) 75%) !important; background-size: 200% 100% !important; animation: shimmer 1.5s infinite; } /* Responsive */ @media (max-width: 880px) { #themeToggle { top: 9px; right: 60px; width: 34px; height: 34px; } }