:root {
  --paper: 245 244 239;
  --ink: 23 23 20;
  --muted: 111 110 102;
  --line: 220 219 210;
  --accent: 232 68 30;
  /*
   * The app's own blue. The site accent is Holistcraft's warm orange; the product page paints
   * with this one instead, so the page and the app screenshots agree on a colour.
   */
  --app: 58 110 240;
  color-scheme: light;
}

.dark {
  --paper: 17 16 14;
  --ink: 242 241 236;
  --muted: 148 146 137;
  --line: 45 43 39;
  --accent: 255 92 42;
  --app: 108 152 255;
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: rgb(var(--paper));
  color: rgb(var(--ink));
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: rgb(var(--accent));
  color: rgb(var(--paper));
}

/*
 * The app artwork (screens, hero, loop) is dark, so it lives on its own surface that stays
 * dark in both themes – otherwise the panels fight the light `--paper`. Colours inside it
 * are therefore fixed, not theme variables.
 */
.app-surface {
  background: linear-gradient(176deg, #0a0e18 0%, #0b1120 52%, #0a0d16 100%);
}

/*
 * The trio hero is rendered on its own gradient (see `store-compose.mjs`), so it gets that
 * one instead – and it runs edge to edge, because an inset image on a gradient always shows
 * a faint rectangle where the two backgrounds disagree.
 */
.app-surface-hero {
  background: linear-gradient(165deg, #0f1626 0%, #1c2740 100%);
}

.app-surface .eyebrow {
  color: #ff5c2a;
}

.no-scrollbar {
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/*
 * Scroll reveal. The hidden state is scoped to `html.js` (set in theme-init.js) so the page
 * renders in full when scripts never run.
 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}