/* AutoStacc's look: light/dark tokens, track colours and the platform touches inside main.platform. */
/* Light and dark follow the device unless the visitor picks one (js/theme.js sets data-theme on <html>). Look: docs/autostacc.md. */


:root {
  /* light */
  --bg: #eceef3;
  --panel: #ffffff;
  --panel-2: #f5f6f9;
  --text: #161a22;
  --muted: #586174;
  --line: #d9dde5;
  --grid: rgba(22, 26, 34, .045);
  --teal: #0a716a;
  --amber: #b86e00;
  --coral: #d64545;
  --lime: #4f8a10;
  --violet: #7356d8;
  --shadow: 0 1px 2px rgba(22, 26, 34, .06), 0 6px 18px rgba(22, 26, 34, .07);
  color-scheme: light;

  /* roles, used by css/core.css and the feature sheets */
  --accent: var(--text);
  --accent-dim: var(--muted);
  --accent-2: var(--teal);
  --heading: var(--text);
  --link: var(--teal);
  --link-hover: var(--text);
  --focus: var(--teal);
  --btn-bg: var(--teal);
  --on-accent: #ffffff;
  --ghost-border: var(--line);
  --stack: color-mix(in srgb, var(--teal) 22%, transparent);
  --glow: none;
  --glow-2: none;
  --radius: 10px;
  --max: 1120px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --display: var(--font);
  --display-weight: 750;
  --display-tracking: -.02em;
  --section-size: clamp(1.45rem, 3vw, 1.9rem);
  --section-case: none;
  --stamp-size: .8rem;
  --btn-case: none;
  --btn-tracking: 0;
  --prompt: "";
  --heading-case: none;
  --btn-prefix: "";
  --msg-ok: "";
  --msg-err: "";
  --msg-pending: "";
  --snap: cubic-bezier(.2, .8, .2, 1);
  /* glass: frosted chrome (sidebar, top bar, menus, drawers) and see-through surfaces over the ambient light below */
  --blur: saturate(150%) blur(12px);
  /* the bars, sidebar and drawers: a little stronger, so thin chrome still reads as frosted */
  --blur-bar: saturate(160%) blur(20px);
  --glass-edge: color-mix(in srgb, var(--line) 70%, transparent);
}

/* dark: the device asks for it (and the visitor hasn't picked light), or the visitor picked it */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111318;
    --panel: #191c23;
    --panel-2: #20242d;
    --text: #eef1f6;
    --muted: #9aa3b2;
    --line: #2a2f3a;
    --grid: rgba(238, 241, 246, .035);
    --teal: #2ee6d6;
    --amber: #ffb547;
    --coral: #ff6b6b;
    --lime: #9be15d;
    --violet: #a78bfa;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --on-accent: #06201e;
    --stack: color-mix(in srgb, var(--teal) 28%, transparent);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111318;
  --panel: #191c23;
  --panel-2: #20242d;
  --text: #eef1f6;
  --muted: #9aa3b2;
  --line: #2a2f3a;
  --grid: rgba(238, 241, 246, .035);
  --teal: #2ee6d6;
  --amber: #ffb547;
  --coral: #ff6b6b;
  --lime: #9be15d;
  --violet: #a78bfa;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --on-accent: #06201e;
  --stack: color-mix(in srgb, var(--teal) 28%, transparent);
  color-scheme: dark;
}

/* Track colours tag kinds of content wherever they appear (library, dashboard, shop). */
[data-track] { --track: var(--teal); }
[data-track="midi"] { --track: var(--amber); }
[data-track="samples"], [data-track="one-shots"] { --track: var(--coral); }
[data-track="loops"] { --track: var(--lime); }
[data-track="presets"] { --track: var(--violet); }
/* The community's channels use the same five colours by name (server/community/core/render.js track()). */
[data-track="teal"] { --track: var(--teal); }
[data-track="amber"] { --track: var(--amber); }
[data-track="coral"] { --track: var(--coral); }
[data-track="lime"] { --track: var(--lime); }
[data-track="violet"] { --track: var(--violet); }

/* ---------- platform pages ---------- */
/* A calm page: soft track-coloured light far behind everything (fixed, so it never scrolls), see-through surfaces over
   it, so content, not decoration, leads. */
body:has(> .site-frame)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 46% at 14% 6%, color-mix(in srgb, var(--teal) 15%, transparent), transparent 72%),
    radial-gradient(36% 42% at 94% 16%, color-mix(in srgb, var(--violet) 13%, transparent), transparent 72%),
    radial-gradient(46% 44% at 68% 104%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 72%);
}
.platform {
  min-height: 70vh;
}
.platform .page-hero { padding: 40px 0 20px; }
.platform .page-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.platform section { padding: 40px 0; }
.platform .alt { background: color-mix(in srgb, var(--panel) 70%, transparent); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-block: 1px solid var(--glass-edge); }

/* section titles carry a small track-colour chip, like a track header */
.platform .section-head h2 { display: inline-flex; align-items: center; gap: .5em; }
.platform .section-head h2::before {
  content: "";
  width: .5em;
  height: 1em;
  border-radius: 3px;
  background: var(--track, var(--teal));
}
.platform .btn { border-radius: 999px; box-shadow: none; }
.platform .btn:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--teal) 28%, transparent); transform: translateY(-1px); }
.platform .btn:active { transform: scale(.98); box-shadow: none; }
.platform .btn.ghost { color: var(--text); background: var(--panel); }
.platform .btn.ghost:hover { background: var(--panel-2); color: var(--text); border-color: var(--teal); }
.platform .owned-badge { transform: none; letter-spacing: .1em; font-family: var(--mono); font-weight: 600; box-shadow: none; color: var(--teal); border-color: var(--teal); }

/* panels: one soft shadow, no offset copies; hovering a card lifts it a little and tints its edge */
.platform .panel, .platform .card, .platform .tile, .platform .project-card, .platform .pcard, .platform .ccard, .platform .stacc-stacclet, .platform .vault-item {
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  transition: border-color .18s, box-shadow .2s var(--snap), transform .2s var(--snap);
}
/* clickable cards sit up off the page like things you can pick up; hovering one lifts it, grows it a little and tints
   its edge, and with a mouse it leans toward the pointer (--tilt-x/--tilt-y from js/motion.js) */
.platform :is(.card, .project-card, .tile, .pcard, .ex-item, .home-doors a, .stacc-stacclet, .vault-item):is(a[href], :has(a[href])) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .10);
}
.platform :is(.card, .project-card, .tile, .pcard, .ex-item, .home-doors a, .stacc-stacclet, .vault-item):is(a[href], :has(a[href])):is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--teal) 55%, var(--line));
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08), 0 18px 40px color-mix(in srgb, var(--teal) 18%, rgba(0, 0, 0, .16));
}
@media (prefers-reduced-motion: no-preference) {
  .platform :is(.card, .project-card, .tile, .pcard, .ex-item, .home-doors a, .stacc-stacclet, .vault-item):is(a[href], :has(a[href])) {
    transition: border-color .18s, box-shadow .25s var(--snap), transform .25s var(--snap);
  }
  .platform :is(.card, .project-card, .tile, .pcard, .ex-item, .home-doors a, .stacc-stacclet, .vault-item):is(a[href], :has(a[href])):is(:hover, :focus-within) {
    transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-4px) scale(1.04);
  }
}

/* meters and counts read as hardware */
.platform .stacc-count, .platform .price, .platform .tag { font-family: var(--mono); }

@media (prefers-reduced-motion: no-preference) {
  .platform .page-hero h1 { animation: stack-in .5s var(--snap) both; }
  .platform .page-hero p { animation: stack-in .5s .08s var(--snap) both; }
}
@keyframes stack-in {
  from { opacity: 0; translate: 0 -14px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- glass surfaces: AutoStacc's own panels and cards let the ambient light through (a project's look keeps
   its own solid surfaces, so it stays itself) ---------- */
.platform :is(.panel, .card, .tile, .project-card, .pcard, .ccard, .mix-panel, .ex-item, .store-tune, .home-doors a, .stacc-stacclet, .vault-item):not([class*="look-"]) {
  background-color: color-mix(in srgb, var(--panel) 76%, transparent);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-color: var(--glass-edge);
}
/* Every browse card says what it is (owner, 2026-10-22): Project, Creator, Community, Product, Release. */
.platform .card-type { margin: 0; font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Lighter effects (html.fx-lite, js/theme.js): no blur, and surfaces nearly solid in the same colours. */
.fx-lite { --blur: none; --blur-bar: none; }
.fx-lite .platform :is(.panel, .card, .tile, .project-card, .pcard, .mix-panel, .ex-item, .store-tune, .home-doors a, .stacc-stacclet, .vault-item):not([class*="look-"]),
.fx-lite .platform .alt { background-color: color-mix(in srgb, var(--panel) 95%, transparent); }
.platform :is(.browse-search input, .stacc-search input, .browse-sort select, .stacc-filter select, .f-seg label) { background-color: color-mix(in srgb, var(--panel) 88%, transparent); }

/* ---------- feedback: quiet, quick, the same everywhere ---------- */
.platform .btn { transition: transform .16s var(--snap), box-shadow .2s var(--snap), background-color .16s, border-color .16s, color .16s, opacity .16s; }
.platform .btn:disabled { opacity: .62; }
.platform :is(.side-nav a, .tool-link, .chip, .browse-cats button, .explore-views button, .f-list label, .latest-list a) { transition: background-color .16s, border-color .16s, color .16s, transform .16s var(--snap); }
.platform :is(.chip, .browse-cats button, .explore-views button):active { transform: scale(.96); }
:focus-visible { transition: outline-offset .14s var(--snap); }

@media (prefers-reduced-motion: no-preference) {
  /* results that a search or filter just drew settle in, the first few one after another */
  .platform :is(.pgrid > .pcard, .explore-list > .ex-item, .latest-list > li) { animation: settle .34s var(--snap) both; }
  .platform :is(.pgrid > .pcard, .explore-list > .ex-item, .latest-list > li):nth-child(2) { animation-delay: 35ms; }
  .platform :is(.pgrid > .pcard, .explore-list > .ex-item, .latest-list > li):nth-child(3) { animation-delay: 70ms; }
  .platform :is(.pgrid > .pcard, .explore-list > .ex-item, .latest-list > li):nth-child(4) { animation-delay: 105ms; }
  .platform :is(.pgrid > .pcard, .explore-list > .ex-item, .latest-list > li):nth-child(n+5) { animation-delay: 140ms; }
  /* panels that fold (filters, Your Stacc groups) open and close smoothly where the browser can animate to "auto" */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .platform details::details-content { height: 0; overflow: clip; transition: height .26s var(--snap), content-visibility .26s allow-discrete; }
    .platform details[open]::details-content { height: auto; }
  }
}
@keyframes settle { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }