/* Generated by the SSG (components::themes_css) — do not edit by hand.
   The 18-theme recolor, scoped to the swatch sample. --s-* tokens only;
   money color stays sage/clay, never the accent. */

.theme-sample[data-theme="paper"] {
  --s-bg: #fbfaf6;
  --s-surface: color-mix(in srgb, #fbfaf6 24%, #ffffff 76%);
  --s-on: #1c1a17;
  --s-on-dim: #5a554d;
  --s-brand: #a84e30;
  --s-pos: #4a7560;
  --s-neg: #b04a2f;
  --s-outline: color-mix(in srgb, #1c1a17 14%, transparent);
  --s-radius: 14px;
  --s-font: var(--font-sans);
}
.theme-sample[data-theme="midnight"] {
  --s-bg: #14130f;
  --s-surface: color-mix(in srgb, #14130f 85%, #ffffff 15%);
  --s-on: #f0ece1;
  --s-on-dim: #a8a297;
  --s-brand: #e58062;
  --s-pos: #7fb89a;
  --s-neg: #d97b5a;
  --s-outline: color-mix(in srgb, #f0ece1 14%, transparent);
  --s-radius: 14px;
  --s-font: var(--font-sans);
}
.theme-sample[data-theme="sage"] {
  --s-bg: #eef3ec;
  --s-surface: color-mix(in srgb, #eef3ec 24%, #ffffff 76%);
  --s-on: #1c1a17;
  --s-on-dim: #5a554d;
  --s-brand: #4a7560;
  --s-pos: #4a7560;
  --s-neg: #b04a2f;
  --s-outline: color-mix(in srgb, #1c1a17 14%, transparent);
  --s-radius: 14px;
  --s-font: var(--font-sans);
}
.theme-sample[data-theme="sunset"] {
  --s-bg: #fff5ec;
  --s-surface: color-mix(in srgb, #fff5ec 24%, #ffffff 76%);
  --s-on: #1c1a17;
  --s-on-dim: #5a554d;
  --s-brand: #a05a22;
  --s-pos: #4a7560;
  --s-neg: #b04a2f;
  --s-outline: color-mix(in srgb, #1c1a17 14%, transparent);
  --s-radius: 14px;
  --s-font: var(--font-sans);
}
.theme-sample[data-theme="nature"] {
  --s-bg: #eff3e6;
  --s-surface: color-mix(in srgb, #eff3e6 24%, #ffffff 76%);
  --s-on: #1c1a17;
  --s-on-dim: #5a554d;
  --s-brand: #556b2f;
  --s-pos: #4a7560;
  --s-neg: #b04a2f;
  --s-outline: color-mix(in srgb, #1c1a17 14%, transparent);
  --s-radius: 14px;
  --s-font: var(--font-sans);
}
.theme-sample[data-theme="slate"] {
  --s-bg: #14171c;
  --s-surface: color-mix(in srgb, #14171c 85%, #ffffff 15%);
  --s-on: #f0ece1;
  --s-on-dim: #a8a297;
  --s-brand: #6fb3c8;
  --s-pos: #7fb89a;
  --s-neg: #d97b5a;
  --s-outline: color-mix(in srgb, #f0ece1 14%, transparent);
  --s-radius: 14px;
  --s-font: var(--font-sans);
}
.theme-sample[data-theme="indigo"] {
  --s-bg: #161827;
  --s-surface: color-mix(in srgb, #161827 85%, #ffffff 15%);
  --s-on: #f0ece1;
  --s-on-dim: #a8a297;
  --s-brand: #7c8ce0;
  --s-pos: #7fb89a;
  --s-neg: #d97b5a;
  --s-outline: color-mix(in srgb, #f0ece1 14%, transparent);
  --s-radius: 14px;
  --s-font: var(--font-sans);
}
.theme-sample[data-theme="rosegold"] {
  --s-bg: #fff6f2;
  --s-surface: color-mix(in srgb, #fff6f2 24%, #ffffff 76%);
  --s-on: #1c1a17;
  --s-on-dim: #5a554d;
  --s-brand: #8e5558;
  --s-pos: #4a7560;
  --s-neg: #b04a2f;
  --s-outline: color-mix(in srgb, #1c1a17 14%, transparent);
  --s-radius: 14px;
  --s-font: var(--font-sans);
}
.theme-sample[data-theme="forest"] {
  --s-bg: #0f1612;
  --s-surface: color-mix(in srgb, #0f1612 85%, #ffffff 15%);
  --s-on: #f0ece1;
  --s-on-dim: #a8a297;
  --s-brand: #c8814a;
  --s-pos: #7fb89a;
  --s-neg: #d97b5a;
  --s-outline: color-mix(in srgb, #f0ece1 14%, transparent);
  --s-radius: 14px;
  --s-font: var(--font-sans);
}
.theme-sample[data-theme="ocean"] {
  --s-bg: #f2f6f9;
  --s-surface: color-mix(in srgb, #f2f6f9 24%, #ffffff 76%);
  --s-on: #1c1a17;
  --s-on-dim: #5a554d;
  --s-brand: #2d7584;
  --s-pos: #4a7560;
  --s-neg: #b04a2f;
  --s-outline: color-mix(in srgb, #1c1a17 14%, transparent);
  --s-radius: 14px;
  --s-font: var(--font-sans);
}
.theme-sample[data-theme="wallstreet"] {
  --s-bg: #0b1220;
  --s-surface: color-mix(in srgb, #0b1220 85%, #ffffff 15%);
  --s-on: #f0ece1;
  --s-on-dim: #a8a297;
  --s-brand: #d9b44a;
  --s-pos: #7fb89a;
  --s-neg: #d97b5a;
  --s-outline: color-mix(in srgb, #f0ece1 14%, transparent);
  --s-radius: 14px;
  --s-font: var(--font-sans);
}
.theme-sample[data-theme="financialguru"] {
  --s-bg: #f6f1e6;
  --s-surface: color-mix(in srgb, #f6f1e6 24%, #ffffff 76%);
  --s-on: #1c1a17;
  --s-on-dim: #5a554d;
  --s-brand: #8a6420;
  --s-pos: #4a7560;
  --s-neg: #b04a2f;
  --s-outline: color-mix(in srgb, #1c1a17 14%, transparent);
  --s-radius: 14px;
  --s-font: var(--font-sans);
}
.theme-sample[data-theme="matrix"] {
  --s-bg: #0a0f0a;
  --s-surface: color-mix(in srgb, #0a0f0a 85%, #ffffff 15%);
  --s-on: #f0ece1;
  --s-on-dim: #a8a297;
  --s-brand: #39ff14;
  --s-pos: #7fb89a;
  --s-neg: #d97b5a;
  --s-outline: color-mix(in srgb, #f0ece1 14%, transparent);
  --s-radius: 5px;
  --s-font: var(--font-mono);
}
.theme-sample[data-theme="amber"] {
  --s-bg: #100a04;
  --s-surface: color-mix(in srgb, #100a04 85%, #ffffff 15%);
  --s-on: #f0ece1;
  --s-on-dim: #a8a297;
  --s-brand: #e8b66c;
  --s-pos: #7fb89a;
  --s-neg: #d97b5a;
  --s-outline: color-mix(in srgb, #f0ece1 14%, transparent);
  --s-radius: 5px;
  --s-font: var(--font-mono);
}
.theme-sample[data-theme="cyberpunk"] {
  --s-bg: #0a0612;
  --s-surface: color-mix(in srgb, #0a0612 85%, #ffffff 15%);
  --s-on: #f0ece1;
  --s-on-dim: #a8a297;
  --s-brand: #ff2e97;
  --s-pos: #7fb89a;
  --s-neg: #d97b5a;
  --s-outline: color-mix(in srgb, #f0ece1 14%, transparent);
  --s-radius: 5px;
  --s-font: var(--font-mono);
}
.theme-sample[data-theme="monochrome"] {
  --s-bg: #000000;
  --s-surface: color-mix(in srgb, #000000 85%, #ffffff 15%);
  --s-on: #f0ece1;
  --s-on-dim: #a8a297;
  --s-brand: #ffffff;
  --s-pos: #7fb89a;
  --s-neg: #d97b5a;
  --s-outline: color-mix(in srgb, #f0ece1 14%, transparent);
  --s-radius: 5px;
  --s-font: var(--font-mono);
}
.theme-sample[data-theme="hackerman"] {
  --s-bg: #070b12;
  --s-surface: color-mix(in srgb, #070b12 85%, #ffffff 15%);
  --s-on: #f0ece1;
  --s-on-dim: #a8a297;
  --s-brand: #22e4ff;
  --s-pos: #7fb89a;
  --s-neg: #d97b5a;
  --s-outline: color-mix(in srgb, #f0ece1 14%, transparent);
  --s-radius: 5px;
  --s-font: var(--font-mono);
}
.theme-sample[data-theme="typewriter"] {
  --s-bg: #f3efe6;
  --s-surface: color-mix(in srgb, #f3efe6 24%, #ffffff 76%);
  --s-on: #1c1a17;
  --s-on-dim: #5a554d;
  --s-brand: #a8352e;
  --s-pos: #4a7560;
  --s-neg: #b04a2f;
  --s-outline: color-mix(in srgb, #1c1a17 14%, transparent);
  --s-radius: 5px;
  --s-font: var(--font-mono);
}