*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ── Sidebar / shell chrome (stays dark) ── */ --navy: #1a1a2e; --navy-dark: #0f0f20; --gold: #c9a84c; --gold-light: #e8c96d; --surface: rgba(255,255,255,0.07); --surface-2: rgba(255,255,255,0.08); --text: rgba(255,255,255,0.88); --text-muted: rgba(255,255,255,0.48); /* ── Content area (light) ── */ --body-bg: #f4f5f7; --card-bg: #ffffff; --card-border: #e4e8ee; --text-dark: #1e293b; --text-mid: #64748b; --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); /* ── Shared ── */ --danger: #dc2626; --sidebar-w: 220px; --radius: 10px; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } html, body, #root { height: 100%; } body { background: var(--body-bg); color: var(--text-dark); font-family: var(--font); } button { cursor: pointer; font-family: inherit; } a { color: inherit; text-decoration: none; } /* Sidebar scrollbar */ .nav-scroll::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .sidebar-nav::-webkit-scrollbar { width: 4px; } .nav-scroll::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track, .sidebar-nav::-webkit-scrollbar-track { background: transparent; } .nav-scroll::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb, .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.35); border-radius: 2px; } .nav-scroll::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover, .sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.65); } .nav-scroll, .sidebar, .sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.35) transparent; }