/*
 * 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 ---
     `--brand` is genduo's own mark colour, taken from the fill of its favicon
     rather than eyeballed, so the logo here sits in the same family as the icon
     in the tab. The product colours below are a different, lighter green that
     came from the app's UI palette — they are for controls, not for the mark. */
  --brand: #2f7d62;

  --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 ---
     A fallback, nothing more. The real sizes are computed from the viewport in
     positionField() — see fitCell() in scatter.js — and written onto the field
     element as inline custom properties, because the pile is a fraction of the
     screen height and no constant written here can know what that is.

     Worth knowing if you do change it: the chip wants to sit well under the
     pitch. A field chip is a bare emoji, 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.
     Too close to the pitch and the pile tightens back into the grid it is
     meant not to be. */
  --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;

  /* Lifted well above genduo's #2f7d62, which is too dark to hold an edge
     against a near-black page. */
  --brand: #6fbf9c;

  --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;
}

/*
 * 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);
}