/* Shopamoji tokens as CSS variables, generated from the design system's tokens.json.
   Light on :root; put class="dark" on an artboard's root for dark mode. */
:root {
  --green: #00c67f;
  --green-light: #5be6b2;
  --green-text: #007a4d;
  --green-hint: #00a86b;
  --mint: #f3fffa;
  --green-tint: #e6faf2;
  --yellow: #ffd43b;
  --red: #ff443a;
  --red-tint: #ffe3e1;
  --photo-tint: #fff1c9;
  --photo-ink: #b07a00;
  --ink: #111111;
  --on-fill: #111111;
  --bg: #ffffff;
  --surface: #ffffff;
  --fill: #f2f2f7;
  --fill-raised: #ffffff;
  --border: #111111;
  --border-strong: #111111;
  --border-soft: #d1d1d6;
  --radio-off: #c7c7cc;
  --muted: #6c6c70;
  --placeholder: #8e8e93;
  --you-text: #3c3c43;
  --grab: #d1d1d6;
  --dim: #00000066;
  --shadow-ink: #111111;
  --avatar-1: #ffd43b;
  --avatar-2: #7fd1ff;
  --avatar-3: #ff9aa8;
  --avatar-4: #b8f27c;
  --avatar-5: #d5b8ff;
  --avatar-6: #ffbe7a;
  --shadow-cta: 0 4px 0 #111111;
  --shadow-selected: 0 3px 0 #111111;
  --shadow-pressed: 0 1px 0 #111111;
  --shadow-sheet: 0 -10px 30px rgba(0,0,0,0.14);
  --shadow-menu: 0 10px 30px rgba(0,0,0,0.18);
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-30: 30px;
  --radius-tag: 8px;
  --radius-plate: 10px;
  --radius-segment: 12px;
  --radius-chip: 13px;
  --radius-small-cta: 14px;
  --radius-tile: 16px;
  --radius-bubble: 17px;
  --radius-cta: 18px;
  --radius-card: 22px;
  --radius-pill: 24px;
  --radius-sheet: 28px;
  --radius-dock: 36px;
  --size-touch: 44px;
  --size-control: 48px;
  --size-tile: 52px;
  --size-cta: 58px;
  --size-plus: 64px;
  --size-cat: 76px;
  --font-rounded: Nunito, ui-rounded, system-ui, sans-serif;
}
.dark {
  --green-text: #5be6b2;
  --green-hint: #00c67f;
  --mint: #0f2e22;
  --green-tint: #0f3d2c;
  --red-tint: #4a1d1a;
  --photo-tint: #4a3a10;
  --photo-ink: #ffd43b;
  --ink: #ffffff;
  --bg: #1c1c1e;
  --surface: #2c2c2e;
  --fill: #3a3a3c;
  --fill-raised: #48484a;
  --border: #ffffff29;
  --border-strong: #ffffff;
  --border-soft: #48484a;
  --muted: #aeaeb2;
  --you-text: #ebebf5;
  --grab: #48484a;
  --dim: #0000008c;
  --shadow-ink: #ffffff;
  --shadow-cta: 0 4px 0 #ffffff;
  --shadow-selected: 0 3px 0 #ffffff;
  --shadow-pressed: 0 1px 0 #ffffff;
  color-scheme: dark;
}

/* Bought items: option 5, faded but readable (Albert, 2026-10-06). Only the icon in the tile and the price fade;
   the title keeps the muted colour with a 2px strike (5.2:1 light, 7.7:1 dark). The check sticker stays solid.
   Options board R13 keeps the alternatives. */
.sa-product.is-bought { opacity: 1; }
.sa-product.is-bought .sa-tile > img,
.sa-product.is-bought .sa-product__price { opacity: .45; }
.sa-product.is-bought .sa-product__title { color: var(--muted); text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* Default line height of the design system (the app's saNormalLineHeight). */
body, .ph, .board { line-height: 1.19; }

/* AvatarStack with faces (Albert, 2026-10-06): members always show their avatar icon, never an initial.
   32px circle, 2px border-strong ring, avatar-1…6 fill in member order, the face 26px centred and clipped round,
   so a 1px ring of member colour shows. Overlap 10px. Three faces, then a 32px "+N" disc on surface (11/900 ink).
   xs (18px) stays a plain colour dot. */
.sa-avatars:not(.sa-avatars--xs) .sa-avatar { width: 32px; height: 32px; margin-left: -10px; overflow: hidden; }
.sa-avatars:not(.sa-avatars--xs) .sa-avatar:first-child { margin-left: 0; }
.sa-avatar > img { width: 26px; height: 26px; display: block; flex: none; }