/* Light / dark theme — site-wide overrides (pairs with theme-apple.css + data-theme on ) */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* ── Home page tokens ── */ [data-theme="dark"] .home-page { --home-surface: var(--card); --home-border: var(--border); --home-muted: var(--text-muted); --home-blue-lt: rgba(10, 132, 255, 0.14); } [data-theme="dark"] .home-page .tool-card { background: var(--card); border-color: var(--border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .home-page .tool-card:hover { border-color: rgba(10, 132, 255, 0.35); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .consulting-cta { background: linear-gradient(180deg, rgba(10, 132, 255, 0.12) 0%, var(--card) 100%); border-color: rgba(10, 132, 255, 0.2); } [data-theme="dark"] .consulting-btn.secondary { background: var(--card-secondary); border-color: var(--border); color: var(--text-primary); } [data-theme="dark"] .consulting-btn.secondary:hover { background: var(--brand-lt); border-color: var(--brand-border); } [data-theme="dark"] .consulting-project { background: var(--card); border-color: var(--border); } [data-theme="dark"] .consulting-project:hover { border-color: var(--brand); } [data-theme="dark"] .data-disclaimer { background: var(--card-secondary); color: var(--text-secondary); } [data-theme="dark"] .home-trust strong { color: var(--text-primary); } /* Hero stays gradient in both themes */ [data-theme="dark"] .home-hero { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); } /* ── Dashboard / tool cards ── */ [data-theme="dark"] .tool-card { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .tool-card:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .tool-card.fuel .tool-icon { background: rgba(255, 149, 0, 0.15); } [data-theme="dark"] .tool-card.calendar .tool-icon { background: rgba(10, 132, 255, 0.15); } [data-theme="dark"] .tool-card.forex .tool-icon { background: rgba(48, 209, 88, 0.12); } [data-theme="dark"] .tool-card.map .tool-icon { background: rgba(191, 90, 242, 0.12); } [data-theme="dark"] .tool-card.gold .tool-icon { background: rgba(255, 214, 10, 0.12); } [data-theme="dark"] .tool-card.weather .tool-icon { background: rgba(10, 132, 255, 0.15); } [data-theme="dark"] .tool-card.nea .tool-icon { background: rgba(255, 214, 10, 0.1); } [data-theme="dark"] .tool-card.remit .tool-icon { background: rgba(10, 132, 255, 0.12); } [data-theme="dark"] .tool-card.vtax .tool-icon { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .tool-card.insure .tool-icon { background: rgba(191, 90, 242, 0.12); } [data-theme="dark"] .tool-card.nepse .tool-icon { background: rgba(236, 72, 153, 0.12); } [data-theme="dark"] .dash-hero-pill-live, [data-theme="dark"] .tool-live-badge { color: #30d158; background: rgba(48, 209, 88, 0.12); border-color: rgba(48, 209, 88, 0.35); } [data-theme="dark"] .tool-info-badge { color: #5ac8fa; background: rgba(10, 132, 255, 0.12); border-color: rgba(10, 132, 255, 0.28); } [data-theme="dark"] .dash-next-hol { background: rgba(255, 69, 58, 0.12); border-color: rgba(255, 69, 58, 0.28); } [data-theme="dark"] .dash-next-hol-name { color: #ff6961; } [data-theme="dark"] .dash-next-hol-sub { color: rgba(255, 105, 97, 0.75); } [data-theme="dark"] .profile-mini, [data-theme="dark"] .skills-card, [data-theme="dark"] .contact-card-mini { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .skill-pill { background: var(--card-secondary); border-color: var(--border); } [data-theme="dark"] .skill-pill:hover { background: rgba(10, 132, 255, 0.12); border-color: rgba(10, 132, 255, 0.3); } /* ── Nav accents ── */ [data-theme="dark"] .drawer-live-badge { color: #30d158; background: rgba(48, 209, 88, 0.12); border-color: rgba(48, 209, 88, 0.3); } [data-theme="dark"] .nav-map-btn, [data-theme="dark"] .nav-map-active { color: #30d158; background: rgba(48, 209, 88, 0.12); border-color: rgba(48, 209, 88, 0.28); } [data-theme="dark"] .nav-map-btn .icon, [data-theme="dark"] .nav-map-active .icon { color: #30d158; } [data-theme="dark"] .nav-forex-btn { color: #ff9f0a; background: rgba(255, 159, 10, 0.12); border-color: rgba(255, 159, 10, 0.28); } [data-theme="dark"] .nav-forex-btn .icon { color: #ff9f0a; } [data-theme="dark"] .overlay { background: rgba(0, 0, 0, 0.55); } /* ── Page hero (tool pages) ── */ [data-theme="dark"] .page-hero::before { background: radial-gradient(circle, rgba(10, 132, 255, 0.14) 0%, transparent 65%); } [data-theme="dark"] .page-hero::after { background: radial-gradient(circle, rgba(10, 132, 255, 0.08) 0%, transparent 65%); } /* ── Legacy tool pages (inline card classes) ── */ [data-theme="dark"] .tool-hero, [data-theme="dark"] .data-card, [data-theme="dark"] .notice-card, [data-theme="dark"] .result-card { background: var(--card); border-color: var(--border); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .result-card { background: var(--brand-lt); border-color: var(--brand-border); } [data-theme="dark"] .corridor-tab-bar { background: var(--bg-secondary); } [data-theme="dark"] .corridor-tab-btn.active { background: var(--card); color: var(--text-primary); } [data-theme="dark"] .rate-pill, [data-theme="dark"] .calc-input { background: var(--bg-secondary); border-color: var(--border); color: var(--text-primary); } [data-theme="dark"] .data-table th { color: var(--text-muted); border-bottom-color: var(--border); } [data-theme="dark"] .data-table td { color: var(--text-primary); border-bottom-color: var(--border); } [data-theme="dark"] .data-table tr:hover td { background: var(--bg-secondary); } [data-theme="dark"] .tool-page .tool-btn-secondary, [data-theme="dark"] .tool-page .home-btn-ghost { background: var(--card-secondary); color: var(--text-primary); border-color: var(--border); } [data-theme="dark"] .tool-page .tool-btn-secondary:hover, [data-theme="dark"] .tool-page .home-btn-ghost:hover { background: var(--brand-lt); color: var(--brand); border-color: var(--brand-border); } /* ── Footer (navy block works in both; soften legal text in dark) ── */ [data-theme="dark"] { --footer-bg: #060d16; --footer-border: rgba(255, 255, 255, 0.08); } /* ── Portfolio ── */ [data-theme="dark"] .pf-card, [data-theme="dark"] .pf-sidebar-card { background: var(--card); border-color: var(--border); } [data-theme="dark"] .pf-tag { background: var(--card-secondary); border-color: var(--border); color: var(--text-secondary); } /* ── Drawer theme row ── */ .nav-drawer-theme { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; margin-top: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-secondary); font-size: 14px; font-weight: 500; font-family: inherit; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; } .nav-drawer-theme:hover { background: var(--bg-secondary); color: var(--text-primary); } .nav-drawer-theme .icon { font-size: 18px; color: var(--text-muted); flex-shrink: 0; } .nav-drawer-theme:hover .icon { color: var(--brand); }