/* Summit skins: switchable looks for every Summit site (2026-10-29).
   Works on top of the shared tokens in shared/summit-login/public/login.css and summitnet.io/assets/site.css:
   a skin only REDEFINES those token names, so no page markup or component CSS changes.
   Switch with <html data-skin="...">: "summit" (default, the current look), "studio", "terminal".
   Load AFTER the site's own stylesheet. Light/dark still follows the device, as today. */

/* ---------- studio: paper notebook, editorial serif, dark code panels, burnt orange ---------- */
:root[data-skin="studio"]{
  --bg:#f3eee3;--panel:#fffcf5;--ink:#26221d;--muted:#746a5c;--line:#ddd3c2;--field:#faf6ee;
  --brand:#b4541c;--brand-ink:#fff;--rust:#b4541c;--ring:#e08a4a;--ok:#3d6b35;--bad:#a3261c;
  --cream:#f8f2e6;--sage:#7f9a5a;--sage-deep:#4f6a34;--olive:#6e8a4a;--rust-deep:#8a3d12;--rust-soft:#f6e3d3;
  --walnut:#1f2023;--walnut-2:#2b2c30;--ink-soft:#4f473d;--ink-faint:#8b8172;--line-soft:#ece4d6;
  --card:#fffcf5;--card-alt:#faf6ee;--tint:#efe7d8;
  --display:"Fraunces SN","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font:"Source Sans 3",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --radius:14px;--label-case:uppercase;--label-track:.12em;
  --shadow-sm:0 1px 0 rgba(38,34,29,.08);--shadow-md:0 2px 0 rgba(38,34,29,.10),0 10px 24px -12px rgba(38,34,29,.18);
  --code-bg:#1f2023;--code-ink:#ece6da;--code-accent:#f0904c;
}
@media (prefers-color-scheme:dark){:root[data-skin="studio"]{
  --bg:#17171a;--panel:#1f2023;--ink:#efe8db;--muted:#a99f90;--line:#34343a;--field:#1b1b1e;
  --brand:#f0904c;--brand-ink:#17171a;--rust:#f0904c;--ring:#f0904c;--ok:#9cc480;--bad:#ff8a7a;
  --cream:#1c1c20;--rust-deep:#f4a874;--rust-soft:#3a2618;--ink-soft:#d3c9b8;--ink-faint:#9a907f;--line-soft:#29292e;
  --card:#1f2023;--card-alt:#232428;--tint:#26262b;--code-bg:#0f0f11;
  color-scheme:dark;
}}

/* ---------- terminal: always dark, mono labels, amber signal ---------- */
:root[data-skin="terminal"]{
  --bg:#0e1113;--panel:#161a1d;--ink:#e6e3da;--muted:#98a09a;--line:#262d31;--field:#12161a;
  --brand:#f2b544;--brand-ink:#0e1113;--rust:#f2b544;--ring:#f2b544;--ok:#7fd18b;--bad:#ff7b72;
  --cream:#131719;--sage:#7fd18b;--sage-deep:#7fd18b;--olive:#9bd6a2;--rust-deep:#ffd27a;--rust-soft:#2b2412;
  --walnut:#090b0c;--walnut-2:#131719;--ink-soft:#c8c5bb;--ink-faint:#7d857f;--line-soft:#1c2226;
  --card:#161a1d;--card-alt:#1a1f22;--tint:#1b2124;
  --display:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --radius:6px;--label-case:uppercase;--label-track:.08em;
  --shadow-sm:none;--shadow-md:0 0 0 1px #262d31;
  --code-bg:#090b0c;--code-ink:#e6e3da;--code-accent:#f2b544;
  color-scheme:dark;
}

/* ---------- small shared components that read the tokens (opt-in classes) ---------- */
.sk-label{font:600 .72rem/1 var(--mono);letter-spacing:var(--label-track,.1em);text-transform:var(--label-case,uppercase);
  color:var(--rust);border:1.5px solid currentColor;border-radius:999px;padding:.4em .8em;display:inline-block}
.sk-panel{background:var(--code-bg,var(--walnut));color:var(--code-ink,#f3ece1);border-radius:var(--radius,12px);
  font:400 .85rem/1.6 var(--mono);padding:1rem 1.1rem;overflow-x:auto}
.sk-panel b,.sk-panel .hl{color:var(--code-accent,var(--rust));font-weight:600}
.sk-check{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.sk-check li{display:flex;gap:.6rem;align-items:baseline}
.sk-check li::before{content:"";flex:0 0 .9rem;height:.9rem;border-radius:50%;border:2px solid var(--line);transform:translateY(.15rem)}
.sk-check li.done::before{background:var(--ok);border-color:var(--ok)}
.sk-switcher{display:inline-flex;gap:.25rem;padding:.25rem;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.sk-switcher button{font:600 .78rem/1 var(--font);border:0;background:none;color:var(--muted);padding:.45rem .8rem;border-radius:999px;cursor:pointer}
.sk-switcher button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}
.sk-switcher button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}