/* tokens.css — Seapointish's design tokens: colour, the one control
   height, and the two corner radii every later stylesheet in
   static/styles/ builds on.

   Authoring rule: every colour is declared exactly once, as
     --name: light-dark(<light>, <dark>);
   on :root — never a second, separate dark block. Two things can't
   fold into that form and are the recorded exceptions: the
   [data-theme] color-scheme pins (an explicit toggle has to win over
   the OS in both directions, so it needs its own rule with higher
   specificity) and --shadow-1, which swaps from a soft drop shadow to
   a 1px light rim in dark mode — light-dark() picks between two
   values, not two shadow *lists*.

   Pair inventory — asserted >= AA (4.5:1 text, 3:1 UI-boundary) in
   BOTH themes by internal/apptest/contrast_test.go, which parses this
   file's light-dark() pairs and computes the ratios itself. No table
   of numbers is hand-copied here: change a hex, rerun
   `go test ./internal/apptest/ -run TokenContrast -v`, and let the
   test tell you whether it still clears the floor.
     --text        on --bg, --surface, --surface-2
     --text-muted  on --surface, --bg
     --text-faint  on --surface
     --accent      on --surface
     --on-accent   on --accent
     --accent-ink  on --surface tinted --accent-weak / --accent-weak-2
     --ok-ink      on --surface tinted --ok-weak
     --warn-ink    on --surface tinted --warn-weak
     --danger-ink  on --surface tinted --danger-weak
     --neutral-ink on --surface tinted --neutral-weak
     --field-line  on --surface   (control border, 3:1)
     --line-strong on --surface   (control border, 3:1)

   Below the palette: a small compatibility layer, not part of the
   authoring rule above (it's plumbing, not colour). The `--rst-*`
   custom properties are what rastrillo's shipped partials
   (page-header, status-pill, empty-state, …) still reference
   directly; every one is a one-line alias onto the token above it, so
   nothing downstream had to change. A handful of
   `.rst-` component classes live here too — exactly the ones
   templates/gen still render (rst-page, rst-btn, rst-page-header,
   rst-list, rst-status, rst-empty). The shell build restyles
   rst-btn in static/styles/20-controls.css, which loads after this
   file; what stays here is the fallback underneath it. */

/* ── Palette ───────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  --bg:            light-dark(#f7f7fa, #100f16);
  --surface:       light-dark(#ffffff, #1a1822);
  --surface-2:     light-dark(#fafafd, #141319);
  --line:          light-dark(#e7e6ee, #2c2a38);
  --line-strong:   light-dark(#8f8d99, #696778);
  --field-line:    light-dark(#928fa0, #6e6b80);
  --text:          light-dark(#1b1a23, #e8e6f2);
  --text-muted:    light-dark(#5b5670, #a7a2ba);
  --text-faint:    light-dark(#6e6987, #948fab);

  --accent:        light-dark(#5b3fa8, #b6a0ff);
  --on-accent:     light-dark(#ffffff, #191031);
  --accent-ink:    light-dark(#47308f, #c9baff);
  --accent-weak:   light-dark(rgba(91,63,168,.08), rgba(182,160,255,.13));
  --accent-weak-2: light-dark(rgba(91,63,168,.15), rgba(182,160,255,.18));

  --ok:            light-dark(#1f9d63, #43c489);
  --ok-ink:        light-dark(#17603f, #7fd7ab);
  --ok-weak:       light-dark(rgba(31,157,99,.12), rgba(67,196,137,.15));
  --warn:          light-dark(#d99a1c, #f2a33c);
  --warn-ink:      light-dark(#74490e, #f2b56a);
  --warn-weak:     light-dark(rgba(217,154,28,.14), rgba(242,163,60,.15));
  --danger:        light-dark(#d5484f, #ef6a71);
  --danger-ink:    light-dark(#93262f, #f4868c);
  --danger-weak:   light-dark(rgba(213,72,79,.12), rgba(239,106,113,.14));
  --neutral-ink:   light-dark(#45415a, #b6b2c8);
  --neutral-weak:  light-dark(rgba(69,65,90,.10), rgba(182,178,200,.14));

  --shadow-1: 0 1px 2px rgba(20,18,28,.06), 0 4px 12px rgba(20,18,28,.05);
  --rim:      light-dark(transparent, rgba(255,255,255,.07));

  --radius-card: 10px;
  --radius-ctl: 8px;
  --sp-control-h: 2.125rem;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; --shadow-1: 0 0 0 1px var(--rim); }
@media (prefers-color-scheme: dark) {
  :root { --shadow-1: 0 0 0 1px var(--rim); }
}

/* ── Legacy `--rst-*` aliases. Full list from
   `grep -rho 'var(--rst-[a-z0-9-]*' internal/app gen | sort -u` —
   keep it in sync if a new one shows up. ─────────────────────────── */
:root {
  --rst-bg: var(--bg);
  --rst-surface: var(--surface);
  --rst-surface-2: var(--surface-2);
  --rst-line: var(--line);
  --rst-line-strong: var(--line-strong);
  --rst-text: var(--text);
  --rst-text-muted: var(--text-muted);
  --rst-text-faint: var(--text-faint);
  --rst-accent: var(--accent);
  --rst-accent-strong: var(--accent-ink);
  --rst-accent-soft: var(--accent-weak);
  --rst-on-accent: var(--on-accent);
  --rst-radius: var(--radius-card);
  --rst-radius-sm: var(--radius-ctl);
  --rst-tone-neutral-fg: var(--neutral-ink);
  --rst-tone-neutral-bg: var(--neutral-weak);
  --rst-tone-positive-fg: var(--ok-ink);
  --rst-tone-positive-bg: var(--ok-weak);
  --rst-tone-warning-fg: var(--warn-ink);
  --rst-tone-warning-bg: var(--warn-weak);
  --rst-tone-negative-fg: var(--danger-ink);
  --rst-tone-negative-bg: var(--danger-weak);
}

/* ── Scale: type, spacing, the one radius the palette above didn't
   take over (the pill shape). Theme-independent, unchanged from
   rastrillo's scaffold, so nothing below needed to move. ─────────── */
:root {
  --rst-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rst-fs-base: 0.875rem;   /* 14px at the browser default */
  --rst-fs-xs: 0.71875rem;   /* 11.5px */

  --rst-sp-1: 0.25rem;
  --rst-sp-2: 0.5rem;
  --rst-sp-3: 0.75rem;
  --rst-sp-4: 1rem;
  --rst-sp-5: 1.5rem;
  --rst-sp-6: 2.5rem;

  --rst-radius-pill: 999px;
}

/* ── Base. ─────────────────────────────────────────────────────────── */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--rst-font);
  font-size: var(--rst-fs-base);
  line-height: 1.5;
}

/* The content column every screen sits in. */
.rst-page {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 52rem;
  padding: var(--rst-sp-5) var(--rst-sp-4) var(--rst-sp-6);
}

/* Focus is visible everywhere inside a rastrillo component. :where()
   contributes no specificity, so any rule below can override it. */
:where(.rst-page-header, .rst-list, .rst-empty) :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Buttons: page-header's primary action, empty-state's CTA, and
   every form submit across the app. ──────────────────────────────── */
.rst-btn {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-weight: 600;
  gap: var(--rst-sp-2);
  line-height: 1.4;
  padding: 0.45rem 0.75rem;
  text-decoration: none;
}
.rst-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.rst-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.rst-btn--primary:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--on-accent);
}

/* ── page-header ──────────────────────────────────────────────────── */
.rst-page-header {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rst-sp-3);
  justify-content: space-between;
  margin: 0 0 var(--rst-sp-5);
  padding-bottom: var(--rst-sp-3);
  position: relative;
}
.rst-page-header__titles {
  flex: 1 1 auto;
  min-inline-size: 0;
}
.rst-page-header h1 {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
}
.rst-page-header__sub {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin: var(--rst-sp-1) 0 0;
  max-inline-size: 44rem;
}

/* ── The list card (txnbrowser's wrapper). ───────────────────────── */
.rst-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* ── status-pill. The dot is decoration; the label is the state. ──── */
.rst-status {
  align-items: center;
  background: var(--neutral-weak);
  border-radius: var(--rst-radius-pill);
  color: var(--neutral-ink);
  display: inline-flex;
  font-size: var(--rst-fs-xs);
  font-weight: 600;
  gap: 0.35rem;
  line-height: 1.6;
  padding: 0.15rem 0.55rem;
}
.rst-status::before {
  background: currentColor;
  block-size: 0.375rem;
  border-radius: 50%;
  content: "";
  flex: none;
  inline-size: 0.375rem;
}
.rst-status[data-tone="positive"] {
  background: var(--ok-weak);
  color: var(--ok-ink);
}
.rst-status[data-tone="warning"] {
  background: var(--warn-weak);
  color: var(--warn-ink);
}
.rst-status[data-tone="negative"] {
  background: var(--danger-weak);
  color: var(--danger-ink);
}

/* ── empty-state ──────────────────────────────────────────────────── */
.rst-empty {
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--rst-sp-6) var(--rst-sp-4);
  text-align: center;
}
.rst-empty__title {
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 var(--rst-sp-2);
}
.rst-empty__body {
  color: var(--text-muted);
  margin: 0 auto;
  max-inline-size: 34rem;
}
.rst-empty__cta {
  margin: var(--rst-sp-4) 0 0;
}

/* ── Narrow screens ───────────────────────────────────────────────── */
@media (max-width: 34rem) {
  .rst-page-header h1 {
    font-size: 1.25rem;
  }
}