/* =====================================================================
   Light theme · components
   Loaded last. Utility colours are re-mapped by light-utilities.css
   (generated); this file covers what utilities cannot: code editors,
   syntax colours, Discord previews, the blocks editor and site tokens.
   Target: text ≥ 4.5:1 on its surface, no dark panels left behind.
   ===================================================================== */

/* ---------- tokens: a touch deeper so small text passes 4.5:1 ---------- */
html.light {
  --sn-text: #111827;
  --sn-muted: #445064;
  --sn-subtle: #5a6677;
  --sn-ice: #006a9e;
  --sn-ice-2: #0080bd;
  --sn-ice-soft: #005480;
  --sn-aurora: #5b43c0;
  --sn-ok: #0b7a52;
  --sn-warn: #8a5600;
  --sn-danger: #b3263d;
  --sn-line: #d3dde8;
  --sn-line-2: #b3c1d1;

  /* shared light code palette (editor, docs, home, highlighter) */
  --code-bg: #f6f8fb;
  --code-bar: #eef2f7;
  --code-line: #d5dde8;
  --code-text: #1f2937;
  --code-dim: #5b6677;
  --code-directive: #9a4d00;
  --code-block: #b3176b;
  --code-func: #005f99;
  --code-var: #5b2fc9;
  --code-string: #137333;
  --code-number: #b54708;
  --code-color: #7c2fb8;
  --code-link: #3d4fd6;
}

/* ---------- code panels ---------- */
html.light pre:not(.CodeMirror-line):not(.CodeMirror-line-like) {
  background-color: var(--code-bg) !important;
  border-color: var(--code-line) !important;
  color: var(--code-text) !important;
  box-shadow: none;
}
html.light .code, html.light .sn-code, html.light .anatomy {
  background: var(--code-bg) !important;
  border-color: var(--code-line) !important;
}
html.light .code figcaption, html.light .sn-code__bar { background: var(--code-bar) !important; border-color: var(--code-line) !important; color: #4b5668 !important; }
html.light .code__copy { color: #5a6677; }
html.light .code__copy:hover { color: var(--code-text); background: #e2e8f0; }
html.light .code pre, html.light .sn-code pre, html.light .sn-code code { color: var(--code-text) !important; }
html.light .tk-directive, html.light .cm-def { color: var(--code-directive) !important; }
html.light .tk-block, html.light .cm-keyword { color: var(--code-block) !important; }
html.light .tk-func { color: var(--code-func) !important; }
html.light .tk-var, html.light .cm-variable-2 { color: var(--code-var) !important; }
html.light .tk-string, html.light .cm-string { color: var(--code-string) !important; }
html.light .tk-number, html.light .cm-number { color: var(--code-number) !important; }
html.light .tk-color, html.light .cm-atom { color: var(--code-color) !important; }
html.light .tk-brace, html.light .cm-comment { color: var(--code-dim) !important; }
html.light .tk-op, html.light .cm-operator { color: var(--code-block) !important; }
html.light .cm-link { color: var(--code-link) !important; }
html.light .anatomy .a-fn { color: var(--code-func); border-color: currentColor; }
html.light .anatomy .a-arg { color: var(--code-var); border-color: currentColor; }
html.light .anatomy .a-str { color: var(--code-string); border-color: currentColor; }
html.light .anatomy .a-brace, html.light .anatomy .a-p, html.light .anatomy .a-sep, html.light .anatomy__legend { color: var(--code-dim); }
html.light .anatomy__legend i.a-fn { color: var(--code-func); } html.light .anatomy__legend i.a-arg { color: var(--code-var); } html.light .anatomy__legend i.a-str { color: var(--code-string); }
html.light .ref__sig { color: var(--code-text) !important; }
/* home page "constructor" editor mock */
html.light .sn-code { color: var(--code-text) !important; }
html.light .sn-code pre { color: var(--code-text) !important; }
html.light .sn-code .ln::before { color: #8a95a6; }
html.light .sn-code .ln.is-hot { background: rgb(0 106 158 / .1); }
html.light .sn-code .k { color: var(--code-func); } html.light .sn-code .f { color: var(--code-var); }
html.light .sn-code .s { color: var(--code-string); } html.light .sn-code .n { color: var(--code-number); }
html.light .sn-code .p, html.light .sn-code .c { color: var(--code-dim); }

/* ---------- CodeMirror (editor) ---------- */
html.light .CodeMirror, html.light .cm-s-dracula.CodeMirror {
  background: #fbfcfe !important; background-color: #fbfcfe !important;
  border-color: #cfd9e5 !important; color: var(--code-text) !important;
  box-shadow: inset 0 1px 2px rgb(15 23 42 / .06) !important;
}
html.light .CodeMirror-gutters, html.light .cm-s-dracula .CodeMirror-gutters { background: #f1f4f8 !important; background-color: #f1f4f8 !important; border-right-color: #dde4ed !important; }
html.light .CodeMirror-linenumber, html.light .cm-s-dracula .CodeMirror-linenumber { color: #66738a !important; }
html.light .CodeMirror-cursor { border-left-color: #6d28d9 !important; }
html.light .CodeMirror-focused { border-color: #7c3aed !important; box-shadow: 0 0 0 3px rgb(124 58 237 / .15) !important; }
html.light .CodeMirror-scroll::-webkit-scrollbar-track { background: #f1f4f8; }
html.light .CodeMirror-scroll::-webkit-scrollbar-thumb { background: #c3cedb; }
html.light .cm-s-dracula span.cm-variable, html.light .cm-s-dracula span.cm-meta, html.light .cm-s-dracula span.cm-qualifier,
html.light .cm-s-dracula span.cm-builtin, html.light .cm-s-dracula span.cm-attribute, html.light .cm-s-dracula span.cm-property { color: var(--code-text) !important; }
html.light .CodeMirror .CodeMirror-selected, html.light .cm-s-dracula div.CodeMirror-selected { background: #c7d2fe !important; opacity: 1 !important; }
html.light .CodeMirror-line::selection, html.light .CodeMirror-line *::selection { background-color: #c7d2fe !important; color: inherit !important; }
html.light .CodeMirror-matchingbracket { color: #047857 !important; background: #d1fae5; }
html.light .CodeMirror-activeline-background { background: #eef3fa !important; }
/* autocomplete popup and badges */
html.light #cmAutocompletePopup { background: #ffffff !important; border-color: #d3dde8 !important; box-shadow: 0 24px 50px -24px rgb(15 23 42 / .35) !important; }
html.light .cm-ac-item { color: var(--code-text); }
html.light .cm-ac-item:hover, html.light .cm-ac-item.active { background: #eef2ff !important; }
html.light .cm-ac-badge-fn { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
html.light .cm-ac-badge-var { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
html.light .cm-ac-badge-dyn { background: #fce7f3; color: #9d174d; border-color: #fbcfe8; }
html.light .cm-ac-badge-block { background: #fef3c7; color: #92400e; border-color: #fde68a; }
html.light .cm-ac-badge-embed { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }

/* ---------- Discord previews: Discord's own light theme ---------- */
html.light .dc, html.light .sn-window, html.light .emulator-shell .discord-chat, html.light .hero-card--dc .dc {
  background: #ffffff; color: #313338; border-color: #e3e5e8;
}
html.light .dc b, html.light .dc-msg__head b, html.light .dc-embed__title, html.light .dc-field__name, html.light .dc-h, html.light .dc-embed__author { color: #060607; }
html.light .dc-msg__head time, html.light .dc-embed__footer { color: #5c5e66; }
html.light .dc-embed { background: #f2f3f5; }
html.light .dc-embed__title.is-link, html.light .dc a:not(.dc-btn) { color: #006ce7; }
html.light .dc-mention, html.light .discord-mention-pill { color: #3f49b8 !important; background: rgb(88 101 242 / .15) !important; border-color: rgb(88 101 242 / .25) !important; }
html.light .dc-cmd { color: #505cdc; background: rgb(88 101 242 / .12); }
html.light .dc code, html.light .dc pre { color: #2e3338; background: #ebedef !important; border: 0 !important; }
html.light .dc-time { background: #ebedef; }
html.light .dc-quote { border-left-color: #c4c9ce; }
html.light .dc-btn { background: #6d6f78; }
html.light .dc-btn.is-link { background: #6d6f78; }
html.light .dc-select { background: #ebedef; border-color: #e3e5e8; color: #5c5e66; }
html.light .dc-select__menu { background: #ffffff; box-shadow: 0 8px 20px rgb(0 0 0 / .15); }
html.light .dc-select__menu span { color: #313338; }
html.light .dc-select__menu span:hover { background: #f2f3f5; }
html.light .dc-msg.is-ephemeral { background: rgb(88 101 242 / .07); }
html.light .dc-msg.is-ephemeral .dc-msg__main::after { color: #5c5e66; }
html.light .dc-modal__box { background: #ffffff; box-shadow: 0 0 0 1px #e3e5e8, 0 16px 40px rgb(0 0 0 / .18); }
html.light .dc-modal__box b { color: #060607; }
html.light .dc-modal__box label { color: #4e5058; }
html.light .dc-modal__box label span { background: #ebedef; }
html.light .dc-modal__foot span:not(.is-primary) { color: #313338; }
html.light .dc-reset { color: #313338; background: #ebedef; }
html.light .dc-reset:hover { background: #dfe1e5; }
html.light .hero-card--dc .dc { box-shadow: 0 0 0 1px #d8dde6; }

/* ---------- docs page details ---------- */
html.light .docs :not(pre) > code { color: #075985; background: #e8f3fb; border-color: #cde4f3; }
html.light .example { background: linear-gradient(180deg, #ffffff, #f7f9fc); }
html.light .blocks-demo__blocks { background: #eef2f7 radial-gradient(rgb(15 23 42 / .1) 1px, transparent 1.2px) 0 0 / 18px 18px; }
html.light .bk-in { background: rgb(15 23 42 / .28); }
html.light .docs-palette { background: rgb(15 23 42 / .35); }
html.light .chip-float { color: #075985; }
html.light .sn-footer__giant { opacity: .6; }

/* ---------- blocks editor (blocks_ui.css) ---------- */
html.light .sb-root { background: #eef2f7; }
html.light .sb-toolbar { background: linear-gradient(180deg, #ffffff, #f5f7fb); border-bottom-color: #dce3ec; }
html.light .sb-toolbar button { color: #1f2937; background: #ffffff; border-color: #d3dce7; box-shadow: 0 1px 2px rgb(15 23 42 / .06); }
html.light .sb-toolbar button:hover:not([disabled]) { background: #f1f5f9; }
html.light .sb-toolbar button.on { color: #075985; border-color: #38a4d8; background: #e0f2fe; }
html.light .sb-toolbar .sb-preview-btn { color: #0e7490; border-color: #9fd8e6; }
html.light .sb-toolbar .sb-ai { color: #ffffff; border: 0; background: linear-gradient(90deg, #7c3aed, #db2777, #7c3aed); background-size: 200% 100%; }
html.light .sb-palette { border-right-color: #dce3ec; }
html.light .sb-rail { background: #f7f9fc; border-right-color: #e3e9f0; }
html.light .sb-rail-btn { color: #4a5568; }
html.light .sb-rail-btn:hover { background: #eaf0f7; color: #111827; }
html.light .sb-rail-btn.on { color: #111827; }
html.light .sb-flyout { background: #ffffff; }
html.light .sb-search { color: #111827; background: #f3f6fa; border-color: #d3dce7; box-shadow: none; }
html.light .sb-search::placeholder { color: #6b7688; }
html.light .sb-group { color: #334155; }
html.light .sb-cat-title { text-shadow: none; filter: brightness(.72) saturate(1.3); }
html.light .sb-subgroup, html.light .sb-muted, html.light .sb-sub, html.light .sb-pal-help { color: #556275; }
html.light .sb-work {
  background-color: #f3f6fa;
  background-image: radial-gradient(900px 500px at 12% 0%, rgb(124 58 237 / .07), transparent 60%),
    radial-gradient(700px 480px at 95% 30%, rgb(14 165 233 / .07), transparent 60%),
    radial-gradient(rgb(15 23 42 / .09) 1px, transparent 1.2px);
}
html.light .sb-event { background: #ffffff; border-color: #dce3ec; box-shadow: 0 18px 40px -30px rgb(15 23 42 / .35); }
/* colored glass keeps white text: make the glass denser so it reads on a light page */
html.light :is(.sb-pal, .sb-block) {
  background:
    linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 48%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 80%, #000 20%), color-mix(in srgb, var(--c) 70%, #000 30%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 18px -12px color-mix(in srgb, var(--c) 70%, transparent), 0 1px 3px rgb(15 23 42 / .15);
  text-shadow: 0 1px 1px rgb(0 0 0 / .35);
}
html.light .sb-block.sb-thin { --c: #64748b; }
html.light .sb-c-body > .sb-stack { background: rgb(255 255 255 / .7); box-shadow: inset 0 1px 3px rgb(15 23 42 / .12); }
html.light .sb-empty { color: #5b6778; border-color: #c6d1de; }
html.light .sb-add { color: #075985; background: #e8f4fc; border-color: #9cc9e6; }
html.light .sb-data, html.light .sb-list-row { color: #1f2937; }
html.light .sb-modal-box, html.light .sb-dd-list { background: #ffffff !important; color: #111827; border-color: #dce3ec !important; }
html.light .sb-dd-opt { color: #1f2937; }
html.light .sb-dd-opt:hover, html.light .sb-dd-opt.on { background: #eef2ff; color: #111827; }
html.light .sb-modal-head button { color: #475569; }
html.light .sb-lint { color: #7c2d12; }
html.light .sb-hat { background: linear-gradient(180deg, rgb(255 255 255 / .2), transparent 55%), linear-gradient(100deg, color-mix(in srgb, var(--c) 82%, #000 18%), color-mix(in srgb, var(--c) 68%, #000 26%)); }
html.light .sb-pill { background-color: color-mix(in srgb, var(--c) 72%, #000 28%); }

/* ---------- switches (Tailwind "peer" toggles): the off-track must stay visible ---------- */
html.light input.peer:not(:checked) + div.rounded-full { background-color: #c3cdd9 !important; border-color: #b3bfcd !important; }
html.light input.peer + div.rounded-full::after { box-shadow: 0 1px 2px rgb(15 23 42 / .25); }

/* ---------- editor: live command-name check ---------- */
html.light .name-hint { color: #b3263d; }
html.light .name-suggest { color: #075985; background: #e0f2fe; border-color: #7cc4e8; }

/* Emulator debugger */
html.light .dbg-toggle { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }
html.light .dbg-toggle.is-on { color: #92400e; background: #fef3c7; border-color: #f59e0b; }
html.light .dbg { background: #fffdf7; border-color: #f3d58a; }
html.light .dbg__head { color: #92400e; border-color: #f3e2b3; }
html.light .dbg__head span, html.light .dbg__sub, html.light .dbg__empty { color: #64748b; }
html.light .dbg__vars { border-color: #e2e8f0; }
html.light .dbg__var code { color: #b45309; }
html.light .dbg__var span, html.light .dbg__step code { color: #1e293b; }
html.light .dbg__stage { color: #4338ca; }
html.light .dbg__step:hover { background: #f8fafc; }
html.light .dbg__step.is-fn > i { color: #0369a1; }
html.light .dbg__step.is-var > i { color: #6d28d9; }
html.light .dbg__step.is-if > i, html.light .dbg__step.is-for > i { color: #b45309; }
html.light .dbg__step.is-error, html.light .dbg__step.is-error > i, html.light .dbg__step.is-error code { color: #be123c; }
html.light .dbg__val { color: #15803d; }
html.light .dbg__bool.is-yes { color: #15803d; background: #dcfce7; }
html.light .dbg__bool.is-no { color: #be123c; background: #ffe4e6; }

/* Gallery */
html.light .gal-side { background: #ffffff; border-color: #d0dce7; }
html.light .gal-tab { color: #475569; }
html.light .gal-tab:hover { color: #0f172a; background: #f1f5f9; }
html.light .gal-tab.is-active { color: #075985; background: #e0f2fe; border-color: #7cc4e8; }
html.light .gal-side__sep, html.light .gal-meta, html.light .gal-bundlebar, html.light .gal-label, html.light .gal-pick__row small { color: #64748b; }
html.light .gal-chip { color: #075985; background: #e0f2fe; border-color: #bae6fd; }
html.light .gal-flag { color: #92400e; }
html.light .gal-btn, html.light .gal-count { color: #475569; background: #f8fafc; border-color: #d0dce7; }
html.light .gal-btn:hover { color: #0f172a; }
html.light .gal-btn[data-react="like"].is-on { color: #be123c; background: #ffe4e6; border-color: #fda4af; }
html.light .gal-btn[data-react="save"].is-on { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
html.light .gal-count.is-on { color: #047857; border-color: #6ee7b7; }
html.light .gal-cmd { color: #075985; background: #f0f9ff; border-color: #bae6fd; }
html.light .gal-modal { background: rgba(15, 23, 42, .35); }
html.light .gal-modal__box { background: #ffffff; border-color: #d0dce7; box-shadow: 0 25px 60px rgba(15, 23, 42, .18); }
html.light .gal-pick__row { border-color: #d0dce7; }
html.light .gal-pick__row span { color: #0f172a; }
html.light .gal-pick__row:has(input:checked) { border-color: #38bdf8; background: #f0f9ff; }

/* Player data */
html.light .pd-key { color: #334155; background: #f1f5f9; border-color: #d0dce7; }
html.light .pd-key small, html.light .pd-who small, html.light .pd-table th { color: #64748b; }
html.light .pd-key.is-on, html.light .pd-key:hover { color: #075985; background: #e0f2fe; border-color: #7cc4e8; }
html.light .pd-table th { border-color: #d0dce7; }
html.light .pd-table td { color: #0f172a; border-color: #e2e8f0; }
html.light .pd-table code { color: #b45309; }
html.light .pd-value { color: #0f172a; background: #ffffff; border-color: #cbd5e1; }
html.light .pd-value.is-num { color: #15803d; }
html.light .pd-actions button { color: #64748b; }
html.light .pd-actions .pd-save { color: #047857; background: #d1fae5; }
html.light .pd-empty { color: #64748b !important; }
html.light .pd-board code { color: #b45309; }
html.light .pd-top li { color: #334155; }
html.light .pd-top li b { color: #b45309; }

/* Feedback board */
html.light .fb-views { background: #ffffff; border-color: #d0dce7; }
html.light .fb-view { color: #475569; }
html.light .fb-view:hover { color: #0f172a; background: #f1f5f9; }
html.light .fb-view.is-active { color: #075985; background: #e0f2fe; box-shadow: inset 0 0 0 1px #7cc4e8; }
html.light .fb-view small { background: #e2e8f0; }
html.light .fb-tagf { color: #475569; border-color: #d0dce7; background: #fff; }
html.light .fb-tagf.is-active { color: #075985; border-color: #7cc4e8; background: #e0f2fe; }
html.light .fb-item { background: #ffffff; border-color: #d0dce7; }
html.light .fb-item:hover { border-color: #7cc4e8; }
html.light .fb-item__title { color: #0f172a; }
html.light .fb-item__title:hover { color: #0369a1; }
html.light .fb-item__snippet, html.light .fb-meta { color: #64748b; }
html.light .fb-vote { color: #475569; background: #f8fafc; border-color: #d0dce7; }
html.light .fb-vote b { color: #0f172a; }
html.light .fb-vote.is-on { color: #0369a1; background: #e0f2fe; border-color: #7cc4e8; }
html.light .fb-vote.is-on b { color: #075985; }
html.light .fb-status-new { color: #0369a1; background: #e0f2fe; border-color: #bae6fd; }
html.light .fb-status-planned { color: #6d28d9; background: #ede9fe; border-color: #ddd6fe; }
html.light .fb-status-in_progress { color: #92400e; background: #fef3c7; border-color: #fde68a; }
html.light .fb-status-resolved { color: #047857; background: #d1fae5; border-color: #a7f3d0; }
html.light .fb-status-rejected { color: #be123c; background: #ffe4e6; border-color: #fecdd3; }
html.light .fb-status-duplicate { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }
html.light .fb-tag-bug { color: #e11d48; } html.light .fb-tag-idea { color: #b45309; } html.light .fb-tag-improvement { color: #0284c7; }
html.light .fb-tag-question { color: #7c3aed; } html.light .fb-tag-other { color: #64748b; }
html.light .fb-body, html.light .fb-comment__text, html.light .fb-note p { color: #1e293b; }
html.light .fb-files a, html.light .fb-preview { background: #f1f5f9; border-color: #d0dce7; }
html.light .fb-note { background: #f0f9ff; border-left-color: #0ea5e9; }
html.light .fb-admin { background: #f5f3ff; border-color: #c4b5fd; }
html.light .fb-comment { border-top-color: #e2e8f0; }
html.light .fb-comment--dev { background: linear-gradient(90deg, #f5f3ff, transparent 70%); }
html.light .fb-tagpick span { color: #475569; border-color: #d0dce7; background: #fff; }
html.light .fb-tagpick input:checked + span { color: #075985; border-color: #7cc4e8; background: #e0f2fe; }
html.light .fb-drop { color: #475569; border-color: #93c5fd; }
html.light .fb-drop:hover, html.light .fb-drop.is-over { background: #f0f9ff; color: #075985; }
html.light .fb-pages a, html.light .fb-pages span { color: #475569; border-color: #d0dce7; background: #fff; }
html.light .fb-pages .is-active { color: #075985; background: #e0f2fe; border-color: #7cc4e8; }
html.light .fb-empty i { color: #cbd5e1; }

/* ---------- Levels tab leaderboard ---------- */
html.light .xp-top-card { background: linear-gradient(135deg, #fff7e6, #f5edff 70%); border-color: #f2c46b; box-shadow: 0 8px 24px rgba(146, 96, 0, .12); }
html.light .xp-top-head { border-bottom-color: #f2d49a; }
html.light .xp-top-title { color: #7a4a00; }
html.light .xp-top-sub { color: #6b5a3a; }
html.light .xp-top-refresh { background: #fff3d6; border-color: #eec57a; color: #8a5600; }
html.light .xp-row { background: #ffffffcc; border-color: #eadfca; }
html.light .xp-row--1 { background: #fff4cc; border-color: #e9b949; }
html.light .xp-rank, html.light .xp-level { color: #8a5600; }
html.light .xp-level { background: #ffe9b3; }
html.light .xp-name { color: #111827; }
html.light .xp-id, html.light .xp-xp { color: #5a6677; }