/* TrackMMO default white foundation. Obsidian is an explicit opt-in design. */
:root {
  --bg: #edf2f7;
  --surface: #ffffff;
  --raised: #f4f7fa;
  --line: #d7e0e8;
  --text: #202733;
  --muted: #626d7b;
  --accent: #c94a29;
  --accent-ink: #ffffff;
  --rose: #c94a29;
  --st-upcoming: #8ea4ff;
  --st-beta: #5fcab9;
  --st-ea: #e6b65e;
  --st-launched: #9fd27a;
  --radius: 12px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .2px; }
.brand img { width: 22px; height: 22px; border-radius: 6px; }
.brand b { color: var(--accent); }

.cover { display: grid; place-items: center; flex: none; border-radius: 10px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, hsl(var(--h) 55% 42%), hsl(calc(var(--h) + 40) 45% 22%)); }
.cover-sm { width: 42px; height: 42px; font-size: 14px; }
.cover-md { width: 100%; aspect-ratio: 16/9; font-size: 28px; border-radius: 10px 10px 0 0; }
.cover-lg { width: 132px; height: 176px; font-size: 40px; border-radius: 16px; }

.pill { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; }
.pill-upcoming { color: var(--st-upcoming); }
.pill-beta { color: var(--st-beta); }
.pill-early_access { color: var(--st-ea); }
.pill-launched { color: var(--st-launched); }

.chip { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12.5px; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chip:hover { border-color: var(--accent); }

.star { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); }
.star:hover { background: var(--raised); color: var(--text); }
.star[aria-pressed="true"] { color: var(--rose); }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--raised); text-decoration: none; color: var(--text); }
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.muted { color: var(--muted); }
.plats { color: var(--muted); font-size: 12px; }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); }
.sample-note { font-size: 11.5px; color: var(--muted); }

/* Real cover images */
.cover-img { object-fit: cover; display: block; background: var(--raised); }

/* Hover highlight chips */
.hc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hc-chip { padding: 2px 8px; border-radius: 6px; font-size: 11.5px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }

/* Default scrollbars; each design supplies its own tokens. */
:root { --scroll-thumb: #d7e0e8; --scroll-thumb-hover: #626d7b; --scroll-track: #edf2f7; }
/* Firefox uses the standard properties; Chrome uses the ::-webkit rules below. */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: thin; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 99px; border: 2px solid var(--scroll-track); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
::-webkit-scrollbar-corner { background: var(--scroll-track); }

/* Settings: reduce motion */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }
.reduce-motion .card:hover, .reduce-motion .pick:hover { transform: none !important; }

/* Toggle switch */
.switch { position: relative; flex: none; width: 42px; height: 24px; border-radius: 99px; border: 1px solid var(--line); background: var(--raised); cursor: pointer; padding: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .18s, background .18s; }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--accent-ink); }
.switch:disabled { opacity: .45; cursor: not-allowed; }

.credit { color: var(--muted); }
.credit b { color: var(--accent); font-weight: 700; }

/* Slate & Coral design system */
:root { --bg:#edf2f7; --surface:#fff; --raised:#f4f7fa; --line:#d7e0e8; --text:#202733; --muted:#626d7b; --accent:#d9502d; --accent-ink:#fff; --rose:#d9502d; --st-upcoming:#bb4b2c; --st-beta:#307f77; --st-ea:#88651e; --st-launched:#36784f; --radius:18px; --scroll-thumb:#bdcbd8; --scroll-thumb-hover:#8c9eaf; --scroll-track:#edf2f7; color-scheme:light; }
body { background:linear-gradient(135deg,#f3f6fa,#e9f0f6); }
button,input,select,textarea { accent-color:var(--accent); }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
.brand { letter-spacing:-.6px; }.brand b { color:inherit; }
.brand-mark { display:inline-grid; place-items:center; flex:none; width:34px; height:34px; border-radius:11px; background:linear-gradient(145deg,#ff8056,#f45d37); color:white; font-size:27px; font-weight:800; line-height:1; }
.btn { border-radius:11px; background:white; box-shadow:0 2px 4px #31465a05; }
.btn-primary { background:linear-gradient(135deg,#e9633c,#cf4525); border-color:#db5632; color:white; }
.btn:hover { box-shadow:0 3px 10px #31465a12; }
.chip { background:#fff; border-radius:10px; color:#56616e; padding:5px 10px; }
.chip[aria-pressed="true"] { background:#fff0ea; color:#b33e20; border-color:#e77858; }
.pill { background:#e4f2ef; color:#286d66; border:0; padding:3px 9px; }
.pill-upcoming { background:#ffede5; color:#a73c22; }.pill-early_access { background:#f7efd9; color:#78571b; }.pill-launched { background:#e5f2e7; color:#316b46; }
.star[aria-pressed="true"] { color:#e7643e; }
.hc-chip { background:#edf4f5; border-color:#d7e5e7; color:#426b70; }
.empty { background:#ffffffa8; border:1px dashed #cdd7e1; border-radius:16px; margin:12px 0; }
.cover { background:linear-gradient(145deg,hsl(var(--h) 25% 53%),hsl(calc(var(--h) + 40) 25% 35%)); }
.switch[aria-checked="true"] { background:#d9502d; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* Optional journal foundation for popup and side panel; tracker layout is isolated. */
:root[data-palette="journal"]{color-scheme:dark;--bg:#101216;--surface:#191d23;--raised:#222832;--line:#434b59;--text:#f5f1e9;--muted:#b5bdca;--accent:#3278eb;--accent-ink:#fff;--rose:#eb4655;--radius:7px;--scroll-track:#101216;--scroll-thumb:#454c58}
html:root[data-palette="journal"][data-theme="light"]{
 --bg:#edf0f4;--surface:#fff;--raised:#f3f5f8;--line:#cbd2dc;--text:#202b3c;--muted:#606e80;--accent:#245fca;--rose:#ba3549;--scroll-track:#edf0f4;--scroll-thumb:#bbc5d2;color-scheme:light;
}