/** * Koder Web Kit — baseline CSS tokens. * Pairs with koder-web-kit.js. Import once (e.g., in after the JS). * * Consumers reference the semantic variables below: * body { background: var(--bg); color: var(--text); } */ :root { --bg: #ffffff; --text: #0f172a; --muted: #64748b; --accent: #5b4fe8; --accent-strong: #3a2fb8; --surface: #f8fafc; --surface-strong: #e2e8f0; --error: #e84f4f; --error-bg: #fef2f2; --success: #4fe8a2; --border: #e2e8f0; --pad-top: env(safe-area-inset-top, 0); --pad-right: env(safe-area-inset-right, 0); --pad-bottom: env(safe-area-inset-bottom, 0); --pad-left: env(safe-area-inset-left, 0); color-scheme: light; } [data-theme="dark"] { --bg: #0b1120; --text: #f1f5f9; --muted: #94a3b8; --accent: #7b70ff; --accent-strong: #5b4fe8; --surface: #1a1a2e; --surface-strong: #2d2d44; --error: #ff6b6b; --error-bg: #2a1414; --success: #3dd68c; --border: #2d2d44; color-scheme: dark; } /* ─── koder-theme-toggle ────────────────────────────────────────────── */ koder-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: var(--text); font-size: 20px; background: transparent; transition: background 0.15s; } @media (hover: hover) { koder-theme-toggle:hover { background: var(--surface-strong); } } koder-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ─── koder-error-banner ────────────────────────────────────────────── */ .koder-error-banner { display: block; padding: 12px; margin: 8px 0; background: var(--error-bg); border: 1px solid var(--error); border-radius: 8px; color: var(--text); font: inherit; } .koder-err-head { display: flex; align-items: center; gap: 8px; font-weight: 500; } .koder-err-icon { color: var(--error); font-size: 1.2em; } .koder-err-id { display: block; margin: 4px 0 8px 28px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; color: var(--muted); } .koder-err-actions { margin-left: 28px; display: flex; gap: 8px; flex-wrap: wrap; } .koder-err-actions button { padding: 4px 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 6px; cursor: pointer; font: inherit; } @media (hover: hover) { .koder-err-actions button:hover { background: var(--surface); } } .koder-err-tech { margin: 8px 28px 0; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8em; overflow-x: auto; white-space: pre-wrap; } /* ─── koder-download-button ──────────────────────────────────────────── */ koder-download-button { display: inline-flex; align-items: center; gap: 6px; } .koder-download-link { display: inline-block; padding: 10px 20px; background: var(--accent); color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background 0.15s; } @media (hover: hover) { .koder-download-link:not(.is-disabled):hover { background: var(--accent-strong); } } .koder-download-link.is-disabled { background: var(--surface-strong); color: var(--muted); cursor: not-allowed; } .koder-download-ticket { font-size: 0.9em; color: var(--muted); text-decoration: none; padding: 4px 6px; border-radius: 4px; } @media (hover: hover) { .koder-download-ticket:hover { background: var(--surface); color: var(--text); } }