/* One style = three colours, for every picker that draws the styles: the
   Discover picker (base.css lays the chip out), the app's 外觀 dialog and
   /start's tiles. Each swatch previews ITS style, not the active one, so the
   colours are fixed here rather than read from the loaded theme file.

   --sw-1 is the page ground, --sw-2 and --sw-3 the two colours that make the
   style recognisable, --sw-ink its text (the /start tiles draw a line of it). Grounds collide in pairs (midnight/neon are both
   near-black, the paper styles all pale), so pickers show --sw-1 last. */
[data-swatch="midnight"]   { --sw-1: #101114; --sw-2: #C9A66B; --sw-3: #2E2438; --sw-ink: #EDE9DF; }
[data-swatch="newspaper"]  { --sw-1: #EEE9DE; --sw-2: #202020; --sw-3: #2C4F66; --sw-ink: #202020; }
[data-swatch="wayfinding"] { --sw-1: #E7E5DF; --sw-2: #2364B1; --sw-3: #E37536; --sw-ink: #1B1B1B; }
[data-swatch="market"]     { --sw-1: #FFF3DE; --sw-2: #C94B32; --sw-3: #6D8759; --sw-ink: #2B241E; }
[data-swatch="neon"]       { --sw-1: #080A0F; --sw-2: #35E0D0; --sw-3: #FF3CAC; --sw-ink: #D7F1EE; }
[data-swatch="sticker"]    { --sw-1: #FFFBF2; --sw-2: #FFD84D; --sw-3: #8FD9B6; --sw-ink: #3B2F2F; }
[data-swatch="cloud"]      { --sw-1: #FFF8F3; --sw-2: #FFB38A; --sw-3: #C9B8F5; --sw-ink: #4A3A4F; }

/* The app's 外觀 dialog draws a style's row with style.css's .theme-swatch
   (three bands); here its bands take the style's colours, ground last. */
.theme-swatch[data-swatch] i:nth-child(1) { background: var(--sw-2); }
.theme-swatch[data-swatch] i:nth-child(2) { background: var(--sw-3); }
.theme-swatch[data-swatch] i:nth-child(3) { background: var(--sw-1); }