/* Receipt: the design's colour, type and shape tokens. Nothing else in the site hard-codes these.
 *
 * Colours use light-dark(), so one block covers both appearances. The appearance itself comes from
 * <html data-mode="auto|light|dark">: auto follows the phone.
 *
 * Contrast was checked in light and dark: body text 4.5:1 or better, star outlines and focus rings 3:1 or better.
 *
 * To try a change as a variant instead of editing these, override the tokens in variants.css under
 * :root[data-variant="your-id"] (see README.md).
 */

:root {
  color-scheme: light dark;
}

/* ---- Receipt: Paper slips with torn edges, one dashed rule, a stamp for open. Monospace.
 * Dark: the same slips under a dim heat lamp. Charcoal paper on a near-black counter, warm ink,
 * amber highlighter instead of yellow, and a softer green stamp, so nothing glares at night. */
:root {
  --bg:            light-dark(#e6e6e1, #121110);
  --surface:       light-dark(#fbfbf7, #22211e);
  --text:          light-dark(#1b1b1a, #ebe7dc);
  --muted:         light-dark(#56564f, #a9a499);
  --border:        light-dark(#1b1b1a, #ebe7dc);
  --divider:       light-dark(#bdbdb4, #4a4741);
  --accent:        light-dark(#1b1b1a, #d9d3c5);
  --accent-text:   light-dark(#fbfbf7, #1a1917);
  --accent-soft:   light-dark(#fff0a0, #453812);
  --link:          light-dark(#1b1b1a, #ebe7dc);
  --focus:         light-dark(#1b1b1a, #f2c94c);
  --good:          light-dark(#0b6a2c, #5bb374);
  --good-soft:     light-dark(#daf2e1, #1d3324);
  --bad:           light-dark(#b3180f, #ff9189);
  --bad-soft:      light-dark(#fde3df, #3d211e);
  --neutral-soft:  light-dark(#ecece6, #2c2b27);
  --closed-soft:   light-dark(#dcdcd5, #34332f); /* the CLOSED stamp and the closed voting card */
  --star:          light-dark(#1b1b1a, #ebe7dc);
  --star-edge:     light-dark(#1b1b1a, #ebe7dc);
  --star-empty:    light-dark(#cbcbc3, #57534b);
  --star-line:     light-dark(#1b1b1a, #b3ada1);
  --skeleton:      light-dark(#e7e7e1, #2c2b27);
  --skeleton-hi:   light-dark(#f3f3ee, #37352f);
  --overlay:       light-dark(rgb(0 0 0 / 55%), rgb(0 0 0 / 72%));
  --on-good:       light-dark(#ffffff, #0c1a10);
  --radius: 2px;
  --radius-sm: 2px;
  --radius-btn: 2px;
  --radius-pill: 2px;
  --bw: 1px;
  --bw-strong: 1px;
  --border-style: dashed;
  --shadow: 0 0 #0000;
  --lift: 0 0 #0000;
  --btn-border: transparent;
  --btn-shadow: 0 0 #0000;
  --vote-border: var(--border);
  --vote-bg: light-dark(var(--accent-soft), #2e2817);
  --font-display: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-body: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --display-weight: 700;
  --body-size: 0.94rem;
  --card-bw: 0px;
  --vote-bw: 0px;
  --header-bw: 0px;
  --chip-bw: 1px;
  --ctl-bw: 0px;
  --details-bw: 0px;
  --sheet-bw: 0px;
  --tab-bw: 0px;
  --dock-bw: 0px;
  --btn-bw: 1px;
  --btn-style: dashed;
  --edge-h: 7px;
  --card-filter: drop-shadow(0 1px 0 light-dark(rgb(0 0 0 / 22%), rgb(0 0 0 / 90%)));
  --dock-filter: drop-shadow(0 -1px 0 light-dark(rgb(0 0 0 / 22%), rgb(0 0 0 / 90%)));
  --open-stripe: 0px;
  --open-pad: 0rem;
  --badge-open-bg: var(--good);
  --badge-open-fg: var(--on-good);
  --badge-closed-bg: var(--closed-soft);
  --badge-closed-fg: var(--muted);
  --badge-radius: 2px;
  --badge-transform: rotate(-2deg);
  --badge-case: uppercase;
  --badge-track: 0.08em;
  --badge-dot: none;
  --count-bg: transparent;
  --row-hover: var(--neutral-soft); /* not the highlighter: tags sit on rows */
  --tab-on-bg: var(--accent);
  --tab-on-fg: var(--accent-text);
  --tab-on-line: transparent;
  --tag-count-display: none;
  --list-overflow: visible;
  --bg-image: none;
  --bg-size: auto;
}

/* The order matters: these must stay below anything that sets color-scheme. */
:root[data-mode="light"] {
  color-scheme: light;
}

:root[data-mode="dark"] {
  color-scheme: dark;
}