/* ── Clean theme ───────────────────────────────────────────────────────────── */ /* Applied when is set. */ /* Overrides the retro-future design tokens defined in style.css. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); [data-theme="clean"] { --bg: #f0f2f5; --bg-deep: #e4e8ee; --panel: #ffffff; --border: #cdd3da; --accent: #1a73e8; --accent2: #d93025; --text: #1f2937; --dim: #6b7280; --success: #137333; --error: #c5221f; --glow: none; --glow2: none; --glow-success: none; } /* ── Base overrides ────────────────────────────────────────────────────────── */ [data-theme="clean"] body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); /* Remove the retro grid pattern */ background-image: none; } /* Hide the scanline overlay */ [data-theme="clean"] .scanline { display: none; } /* ── Panel ─────────────────────────────────────────────────────────────────── */ [data-theme="clean"] .panel { background: var(--panel); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); } [data-theme="clean"] .panel::before { background: var(--accent); height: 3px; } /* ── Typography ────────────────────────────────────────────────────────────── */ [data-theme="clean"] h1 { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; text-transform: none; color: var(--text); text-shadow: none; border-bottom-color: var(--border); } [data-theme="clean"] h2 { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; color: var(--text); text-shadow: none; letter-spacing: 0; text-transform: none; } [data-theme="clean"] h3 { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 0.8rem; color: var(--dim); letter-spacing: 0.04em; text-transform: uppercase; } [data-theme="clean"] strong { color: var(--text); text-shadow: none; font-weight: 600; } [data-theme="clean"] ul li { border-left-color: var(--border); color: var(--text); } [data-theme="clean"] ul li::before { color: var(--accent); } /* ── Links ─────────────────────────────────────────────────────────────────── */ [data-theme="clean"] a { color: var(--accent); border-bottom-color: rgba(26, 115, 232, 0.3); } [data-theme="clean"] a:hover { color: #0d47a1; border-bottom-color: #0d47a1; text-shadow: none; } /* ── Buttons ───────────────────────────────────────────────────────────────── */ [data-theme="clean"] .btn { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.02em; text-transform: none; border-radius: 6px; border-color: var(--accent); color: var(--accent); } [data-theme="clean"] .btn:hover { background: var(--accent); color: #ffffff; box-shadow: 0 2px 6px rgba(26, 115, 232, 0.35); text-shadow: none; } /* ── Topbar ────────────────────────────────────────────────────────────────── */ [data-theme="clean"] .topbar { background: #ffffff; border-bottom: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } [data-theme="clean"] .topbar-name { color: var(--dim); } /* ── Vol name chip ────────────────────────────────────────────────────────── */ [data-theme="clean"] .vol-name { color: var(--accent); background: rgba(26, 115, 232, 0.08); border-color: rgba(26, 115, 232, 0.3); border-radius: 4px; } [data-theme="clean"] .vol-name.empty { color: var(--error); background: rgba(197, 34, 31, 0.07); border-color: rgba(197, 34, 31, 0.3); } /* ── EON: semantic colours ──────────────────────────────────────────────────── */ [data-theme="clean"] .eon-success { text-shadow: none; } [data-theme="clean"] .eon-danger { text-shadow: none; } /* ── EON: rows & cards ──────────────────────────────────────────────────────── */ [data-theme="clean"] .eon-row { background: var(--bg); border-left-color: var(--border); border-radius: 0 4px 4px 0; } [data-theme="clean"] .eon-row:hover { background: #e8f0fe; border-left-color: var(--accent); } [data-theme="clean"] .eon-card { background: var(--bg); border-color: var(--border); border-radius: 8px; } [data-theme="clean"] .eon-card-title { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--dim); letter-spacing: 0.04em; } /* ── EON: table ─────────────────────────────────────────────────────────────── */ [data-theme="clean"] .eon-table thead tr { border-bottom-color: var(--accent); } [data-theme="clean"] .eon-table th { color: var(--dim); background: var(--bg); letter-spacing: 0.04em; } [data-theme="clean"] .eon-table td { border-bottom-color: var(--border); } [data-theme="clean"] .eon-table tbody tr:hover td { background: #f0f7ff; } /* ── EON: badges ────────────────────────────────────────────────────────────── */ [data-theme="clean"] .eon-badge { border-radius: 4px; } /* ── EON: buttons ───────────────────────────────────────────────────────────── */ [data-theme="clean"] .eon-btn { font-family: 'Inter', system-ui, -apple-system, sans-serif; border-radius: 5px; letter-spacing: 0.01em; } [data-theme="clean"] .eon-btn-outline:hover { background: rgba(26, 115, 232, 0.08); } /* ── EON: inputs ────────────────────────────────────────────────────────────── */ [data-theme="clean"] .eon-input { border-radius: 5px; border-color: var(--border); background: #ffffff; color: var(--text); } [data-theme="clean"] .eon-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15); } [data-theme="clean"] .eon-counter-input { border-radius: 5px; background: #ffffff; color: var(--text); } [data-theme="clean"] .eon-counter-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15); } [data-theme="clean"] .eon-counter-grand { text-shadow: none; color: var(--accent); } /* ── EON: warnings ──────────────────────────────────────────────────────────── */ [data-theme="clean"] .eon-warnings { background: rgba(217, 48, 37, 0.05); border-left-color: var(--accent2); } /* ── EON: modal ─────────────────────────────────────────────────────────────── */ [data-theme="clean"] .eon-modal-box { border-radius: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); } [data-theme="clean"] .eon-modal-title { font-family: 'Inter', system-ui, -apple-system, sans-serif; letter-spacing: 0.03em; font-size: 0.9rem; color: var(--text); text-transform: none; } /* ── EON: DJ rows ───────────────────────────────────────────────────────────── */ [data-theme="clean"] .eon-dj-row { background: var(--bg); border-left-color: var(--border); border-radius: 0 6px 6px 0; } [data-theme="clean"] .eon-dj-amount { text-shadow: none; } /* ── EON: note block ────────────────────────────────────────────────────────── */ [data-theme="clean"] .note { background: rgba(26, 115, 232, 0.05); border-left-color: var(--accent); border-radius: 0 6px 6px 0; } /* ── EON: next-step button throb ────────────────────────────────────────────── */ [data-theme="clean"] .eon-next-btn { font-family: 'Inter', system-ui, -apple-system, sans-serif; letter-spacing: 0.03em; text-transform: none; } /* ── Sync messages ─────────────────────────────────────────────────────────── */ [data-theme="clean"] .sync-ok { text-shadow: none; } [data-theme="clean"] .sync-err { text-shadow: none; } /* ── Theme toggle button (in topbar) ───────────────────────────────────────── */ .theme-toggle { background: none; border: 1px solid var(--border); color: var(--dim); cursor: pointer; font-family: inherit; font-size: 0.72em; letter-spacing: 0.06em; padding: 3px 10px; transition: border-color 0.2s, color 0.2s, background 0.2s; white-space: nowrap; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } [data-theme="clean"] .theme-toggle { font-family: 'Inter', system-ui, -apple-system, sans-serif; border-radius: 5px; font-size: 0.78em; letter-spacing: 0.01em; }