/* Tokens shared by the landing page and the panel.
   Values come from the app's dark palette (src/Resources/GlobalStyling/colors.js),
   Ultraviolet accent, because that is what the store screenshots show.
   The site is dark only, like the app's default.
   To switch the whole site to the app's default Ember orange, change the
   four --accent* values below to #F7742E / #F7742E / #14100C / #FFC24B. */

:root {
  color-scheme: dark;
  --bg: #0a0b0f;
  --surface: #14161c;
  --surface-raised: #1b1e26;
  --border: rgba(255, 255, 255, 0.08);
  --text-strong: #f2f3f5;
  --text: #a4a8b3;
  --quiet: #868c99;
  --accent: #8b7cf5;
  --accent-text: #a89df6;
  --on-accent: #110d26;
  --gold: #ffc24b;
  --good: #4ed39a;
  --danger: #e85c4a;
  --accent-soft: rgba(139, 124, 245, 0.12);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --radius: 20px;
  --radius-sm: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--text-strong); letter-spacing: -0.02em; line-height: 1.1; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--text-strong); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: default; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}