/*
 * Design tokens.
 *
 * The colour values are lifted from Genduo's public/app/app.css — the only
 * palette in this family with a complete light/dark pair — so the tool reads as
 * part of the same product rather than a side project.
 *
 * Genduo has no spacing or type scale, so those are self-built here. They are
 * deliberately a short ladder (4/6/8/10/12/16/24/32 and 11–28px) rather than an
 * open-ended set: the whole page is a few hundred lines, and an unbounded scale
 * just becomes a way to write the same value three different ways.
 */

:root {
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', sans-serif;

  /* --- layout --- */
  --bg-layout: #f2f4f2;
  --bg-card: #fdfdfd;
  --bg-sunken: #e9ece8;
  --bg-hover: #f4f6f3;

  /* --- ink --- */
  --text: #141414;
  --text-dim: #676c67;
  --text-faint: #9aa09a;

  /* --- lines --- */
  --border: #bcbbba;
  --border-soft: #dcdfda;

  /* --- brand --- */
  --primary: #80c776;
  --primary-ink: #2f4a2b;
  --primary-soft: #e6f3e3;
  --send: #536e5c;

  --radius: 6px;
  --radius-lg: 14px;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 5%), 0 10px 28px -14px rgb(0 0 0 / 22%);
  --shadow-lift: 0 4px 14px -4px rgb(0 0 0 / 18%);

  /* --- motion --- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 420ms;

  /* --- spacing --- */
  --s1: 4px;
  --s2: 6px;
  --s3: 8px;
  --s4: 10px;
  --s5: 12px;
  --s6: 16px;
  --s7: 24px;
  --s8: 32px;

  /* --- type --- */
  --t1: 11px;
  --t2: 12px;
  --t3: 13px;
  --t4: 14px;
  --t5: 16px;
  --t6: 20px;
  --t7: 28px;

  /* --- scatter geometry: overridden per breakpoint, read by scatter.js ---
     `--cell` is the *average* pitch, not a fixed one: scatter.js splits the
     width into as many tracks as fit, then varies them around this value. The
     variation needs headroom — a chip plus its tilt plus a margin is the floor
     a track can be squeezed to, and if the average sat on that floor there
     would be nothing left to vary, which is exactly the even spacing the pile
     is meant to avoid.

     The gap between the two is deliberately lopsided in favour of the cell. A
     field chip is a bare emoji now, so it needs far less room than the tile it
     used to be, and every pixel taken off the chip while the pitch stays put
     is a pixel of jitter the item can wander within its own cell. At 46/78
     close to half of each cell is slack. */
  --cell: 78px;
  --chip: 46px;

  color-scheme: light;
}

[data-theme='dark'] {
  --bg-layout: #191b1a;
  --bg-card: #222523;
  --bg-sunken: #151716;
  --bg-hover: #2a2e2b;

  --text: #dadcd9;
  --text-dim: #9ba29c;
  --text-faint: #6d746e;

  --border: #4b524c;
  --border-soft: #343935;

  --primary: #89cb99;
  --primary-ink: #dff3e2;
  --primary-soft: #29372c;
  --send: #8fbfa0;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 28px -14px rgb(0 0 0 / 60%);
  --shadow-lift: 0 4px 14px -4px rgb(0 0 0 / 50%);

  color-scheme: dark;
}

/* Phones: the scattered field has to fit four columns without horizontal
   scrolling, so both the cell and the chip shrink together. scatter.js reads
   these back via getComputedStyle, so the geometry has exactly one definition. */
@media (max-width: 560px) {
  :root {
    --cell: 68px;
    --chip: 40px;
  }
}

/*
 * Scoped reset. Only the elements this page actually uses are reset — a
 * full `*` reset would also be reaching into anything embedded later.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-layout);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t4);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* The scatter layer positions chips absolutely; a horizontal scrollbar from a
     chip nudged past the edge would be pure noise. */
  overflow-x: hidden;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}