/* Scenehatch brand tokens — the "H25" identity chosen 2026-09-06.
 * Inter, white ground, hairline borders, square corners, one accent colour.
 * Light is the default; dark is an explicit [data-theme="dark"] stamp or the
 * visitor's OS preference when nothing is stamped. Accents switch with
 * [data-accent="..."] on <html>; each accent carries a brightened dark-mode
 * companion so selections stay vivid on charcoal.
 * Used by: landing.html, index.html (app), upgrade/help/rate pages, emails. */

:root {
  /* surfaces */
  --sh-bg: #ffffff;
  --sh-tx: #101418;
  --sh-dim: #56606c;
  --sh-line: #e3e6ea;
  --sh-soft: #f5f6f7;
  --sh-band: #1b1d22;      /* dark feature band on light pages */
  --sh-band-tx: #eef0f3;
  --sh-frost: hsla(0, 0%, 100%, 0.82);
  --sh-shadow: 0 20px 20px rgba(0, 0, 0, 0.05);
  /* semantic */
  --sh-ok: #16a34a;
  --sh-warn: #d97706;
  --sh-danger: #dc2626;
  --sh-etsy: #EB6D20;
  /* accent pairs (light / dark-companion) — default: Bee Blue (H25) */
  --sh-a-l: #2563eb;  --sh-a-d: #60a5fa;
  --sh-abt-l: #ffffff; --sh-abt-d: #ffffff;
  /* resolved accent (light by default) */
  --sh-a: var(--sh-a-l);
  --sh-abt: var(--sh-abt-l);
}

/* accents — set data-accent on <html>; names match the app settings picker */
[data-accent="violet"]  { --sh-a-l: #4352FF; --sh-a-d: #7c88ff; --sh-abt-l: #fff; --sh-abt-d: #fff; }
[data-accent="emerald"] { --sh-a-l: #059669; --sh-a-d: #10b981; --sh-abt-l: #fff; --sh-abt-d: #fff; }
[data-accent="amber"]   { --sh-a-l: #d97706; --sh-a-d: #fbbf24; --sh-abt-l: #fff; --sh-abt-d: #141414; }
[data-accent="red"]     { --sh-a-l: #dc2626; --sh-a-d: #f87171; --sh-abt-l: #fff; --sh-abt-d: #141414; }
[data-accent="yellow"]  { --sh-a-l: #eab308; --sh-a-d: #facc15; --sh-abt-l: #141414; --sh-abt-d: #141414; }
[data-accent="pink"]    { --sh-a-l: #db2777; --sh-a-d: #f472b6; --sh-abt-l: #fff; --sh-abt-d: #141414; }

/* dark surfaces + accent companion resolution */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sh-bg: #101114; --sh-tx: #eceef2; --sh-dim: #a3adba;
    --sh-line: #272b33; --sh-soft: #17191e;
    --sh-band: #0a0b0d; --sh-band-tx: #e6e8ec;
    --sh-frost: hsla(220, 8%, 10%, 0.74);
    --sh-shadow: 0 20px 24px rgba(0, 0, 0, 0.35);
    --sh-ok: #4ade80; --sh-warn: #fbbf24; --sh-danger: #f87171;
    --sh-a: var(--sh-a-d); --sh-abt: var(--sh-abt-d);
  }
}
[data-theme="dark"] {
  --sh-bg: #101114; --sh-tx: #eceef2; --sh-dim: #a3adba;
  --sh-line: #272b33; --sh-soft: #17191e;
  --sh-band: #0a0b0d; --sh-band-tx: #e6e8ec;
  --sh-frost: hsla(220, 8%, 10%, 0.74);
  --sh-shadow: 0 20px 24px rgba(0, 0, 0, 0.35);
  --sh-ok: #4ade80; --sh-warn: #fbbf24; --sh-danger: #f87171;
  --sh-a: var(--sh-a-d); --sh-abt: var(--sh-abt-d);
}

/* shared primitives (opt-in classes for the static pages) */
.sh-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 22px;
  background: var(--sh-a); color: var(--sh-abt); border: 1px solid var(--sh-a);
  padding: 12px 20px; font-size: 0.95rem; font-weight: 400; font-family: inherit;
  text-decoration: none; cursor: pointer; border-radius: 0; transition: filter 0.4s ease;
}
.sh-btn:hover { filter: brightness(0.85); }
.sh-btn.ghost { background: transparent; color: var(--sh-a); }
.sh-btn.ghost:hover { background: var(--sh-a); color: var(--sh-abt); filter: none; }
.sh-lbl {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sh-dim);
}