/* Two pigments per palette. Surfaces, accents and controls share the same recipe. */
:is([data-theme=rainbow], [data-palette=rainbow]) { --pigment: #60636b; --harmony: #807975; }
:is([data-theme=red], [data-palette=red]) { --pigment: #b64b54; --harmony: #a86175; }
:is([data-theme=sunset], [data-palette=sunset]) { --pigment: #bd6238; --harmony: #b98545; }
:is([data-theme=yellow], [data-palette=yellow]) { --pigment: #b39037; --harmony: #b2a35d; }
:is([data-theme=botanical], [data-palette=botanical]) { --pigment: #458467; --harmony: #7d8d4d; }
:is([data-theme=teal], [data-palette=teal]) { --pigment: #3c8585; --harmony: #56967c; }
:is([data-theme=ocean], [data-palette=ocean]) { --pigment: #3d79a7; --harmony: #4a8fa8; }
:is([data-theme=indigo], [data-palette=indigo]) { --pigment: #5b62aa; --harmony: #6b76a5; }
:is([data-theme=lavender], [data-palette=lavender]) { --pigment: #8e63a8; --harmony: #846fae; }
:is([data-theme=rose], [data-palette=rose]) { --pigment: #ac5b89; --harmony: #ad6a76; }
:is([data-theme=sand], [data-palette=sand]) { --pigment: #907256; --harmony: #a39070; }
:is([data-theme=midnight], [data-palette=midnight]) { --pigment: #505c75; --harmony: #788296; }

html[data-theme] {
  color-scheme: light;
  --canvas-base: #f8f7f4;
  --surface-base: #fcfbf9;
  --card-base: #fff;
  --ink-base: #24232a;
  --text-base: #3c3a43;
  --muted-base: #5b5861;
  --line-base: #dedbd8;
  --field-base: #91898a;
  --accent-base: #171519;
  --accent-weight: 70%;
  --on-accent: #fff;
  --shadow: #29222f15;
  --shadow-float: #29222f26;
  --backdrop: #15131b65;
  --red: #a12a3d;
  --danger-bg: #fbe7eb;
  --amber: #714a0c;
  --amber-bg: #faeed3;
  --positive: #246047;
  --positive-bg: #e6f2e9;
  --palette-wash: 8%;
  --surface-wash: 4%;
  --spectrum-weight: 30%;

  --spectral-red: #a34150;
  --spectral-orange: #a15330;
  --spectral-yellow: #806019;
  --spectral-green: #2f7257;
  --spectral-blue: #2b6789;
  --spectral-indigo: #485b97;
  --spectral-purple: #765396;
  --spectral-pink: #934f77;

  --bg-main: color-mix(in srgb, var(--pigment) var(--surface-wash), var(--canvas-base));
  --bg-surface: color-mix(in srgb, var(--harmony) var(--surface-wash), var(--surface-base));
  --bg-card: color-mix(in srgb, var(--harmony) 2%, var(--card-base));
  --ink: color-mix(in srgb, var(--pigment) 6%, var(--ink-base));
  --text: color-mix(in srgb, var(--pigment) 8%, var(--text-base));
  --muted: color-mix(in srgb, var(--pigment) 8%, var(--muted-base));
  --line: color-mix(in srgb, var(--harmony) 12%, var(--line-base));
  --control-line: color-mix(in srgb, var(--harmony) 10%, var(--field-base));
  --theme-accent: color-mix(in srgb, var(--pigment) var(--accent-weight), var(--accent-base));
  --theme-harmony: color-mix(in srgb, var(--harmony) var(--accent-weight), var(--accent-base));

  --tone-red: color-mix(in srgb, var(--spectral-red) var(--spectrum-weight), var(--theme-accent));
  --tone-terracotta: color-mix(in srgb, var(--spectral-orange) var(--spectrum-weight), var(--theme-harmony));
  --tone-citrus: color-mix(in srgb, var(--spectral-yellow) var(--spectrum-weight), var(--theme-harmony));
  --tone-mint: color-mix(in srgb, var(--spectral-green) var(--spectrum-weight), var(--theme-accent));
  --tone-water: color-mix(in srgb, var(--spectral-blue) var(--spectrum-weight), var(--theme-harmony));
  --tone-indigo: color-mix(in srgb, var(--spectral-indigo) var(--spectrum-weight), var(--theme-accent));
  --tone-lavender: color-mix(in srgb, var(--spectral-purple) var(--spectrum-weight), var(--theme-harmony));
  --tone-rose: color-mix(in srgb, var(--spectral-pink) var(--spectrum-weight), var(--theme-accent));

  --wash-warm: var(--theme-harmony);
  --wash-cool: var(--theme-accent);
  --wash-edge: var(--tone-rose);
  --wash-center: var(--tone-water);
  --wash-base: var(--tone-citrus);
  --site-ribbon: linear-gradient(90deg, var(--theme-accent), var(--theme-harmony));
  --rainbow-ribbon: linear-gradient(103deg, var(--spectral-red), var(--spectral-orange), var(--spectral-yellow), var(--spectral-green), var(--spectral-blue), var(--spectral-indigo), var(--spectral-purple), var(--spectral-pink));
  --flourish-border: var(--line);
  --photo-bg: #f8f7f4;
  background-color: var(--bg-main);
  --paper: var(--bg-main);
  --white: var(--bg-card);
  --header: var(--bg-surface);
  --green: var(--positive-bg);
}

html[data-theme]:is([data-color-mode=dark], [data-color-mode=palette]:is([data-theme=botanical], [data-theme=ocean], [data-theme=midnight])) {
  color-scheme: dark;
  --canvas-base: #17171b;
  --surface-base: #1f2025;
  --card-base: #26272c;
  --ink-base: #faf8fa;
  --text-base: #e8e6eb;
  --muted-base: #c4c0ca;
  --line-base: #494950;
  --field-base: #818087;
  --accent-base: #f8f3ee;
  --accent-weight: 55%;
  --on-accent: #19171c;
  --shadow: #0004;
  --shadow-float: #0008;
  --backdrop: #0b0b12a6;
  --red: #ffabb3;
  --danger-bg: #4a2b34;
  --amber: #f8d68e;
  --amber-bg: #423727;
  --positive: #a6dcc0;
  --positive-bg: #253d34;
  --spectral-red: #eca0aa;
  --spectral-orange: #eeb28f;
  --spectral-yellow: #e1ca88;
  --spectral-green: #a2cfb6;
  --spectral-blue: #9ecadf;
  --spectral-indigo: #aab9ea;
  --spectral-purple: #c7aee2;
  --spectral-pink: #dfa9c8;
}

html[data-theme][data-palette-tone=airy] { --palette-wash: 4%; --surface-wash: 2%; }
html[data-theme][data-palette-tone=vivid] { --palette-wash: 14%; --surface-wash: 7%; }

html[data-theme=rainbow] {
  --spectrum-weight: 100%;
  --wash-warm: var(--tone-rose);
  --wash-cool: var(--tone-water);
  --wash-edge: var(--tone-lavender);
  --wash-center: var(--tone-mint);
  --wash-base: var(--tone-citrus);
  --site-ribbon: var(--rainbow-ribbon);
}

/* Rainbow accents follow the purpose of each workspace. */
html[data-theme=rainbow] :is(#panel-collection, #panel-decants, #tab-collection, #tab-decants) { --section-accent: var(--tone-terracotta); }
html[data-theme=rainbow] :is(#panel-prices, #panel-coupons, #panel-sales, #panel-marketplace, #tab-prices, #tab-coupons, #tab-marketplace) { --section-accent: var(--tone-citrus); }
html[data-theme=rainbow] :is(#panel-discover, #panel-wardrobe, #panel-notes, #tab-discover, #tab-wardrobe, #tab-notes) { --section-accent: var(--tone-water); }
html[data-theme=rainbow] :is(#panel-compare, #panel-batches, #panel-finder, #tab-compare, #tab-batches, #tab-finder) { --section-accent: var(--tone-indigo); }
html[data-theme=rainbow] :is(#panel-alternatives, #panel-finance, #panel-news, #tab-alternatives, #tab-finance, #tab-news) { --section-accent: var(--tone-mint); }
html[data-theme=rainbow] :is(#panel-layering, #panel-quiz, #panel-tiers, #tab-layering, #tab-quiz, #tab-tiers) { --section-accent: var(--tone-lavender); }
html[data-theme=rainbow] :is(#panel-wishlist, #panel-favorites, #panel-creator, #tab-wishlist, #tab-favorites) { --section-accent: var(--tone-red); }
html[data-theme=rainbow] :is(#panel-threads, #panel-forums, #panel-friends, #panel-videos, #tab-threads, #tab-forums, #tab-friends, #tab-videos) { --section-accent: var(--tone-rose); }

html[data-theme], html[data-theme=rainbow] :is(.page-panel, .grouped-navigation [data-tab]) {
  --accent-color: var(--section-accent, var(--theme-accent));
  --accent-hover: color-mix(in srgb, var(--accent-color) 85%, var(--ink));
  --tint: color-mix(in srgb, var(--accent-color) 12%, var(--bg-card));
  --soft: color-mix(in srgb, var(--accent-color) 5%, var(--bg-surface));
  --control-bg: color-mix(in srgb, var(--accent-color) 3%, var(--bg-card));
  --accent: var(--accent-color);
  --hero: var(--accent-color);
  --metal: var(--accent-color);
  --on-metal: var(--on-accent);
  --feature-deep: var(--accent-color);
  --feature-end: var(--theme-harmony);
  --focus: var(--accent-color);
  --highlight: var(--accent-color);
}

body {
  --glow-background: radial-gradient(ellipse at 5% 10%, color-mix(in srgb, var(--wash-warm) var(--palette-wash), transparent), transparent 52%),
    radial-gradient(ellipse at 95% 38%, color-mix(in srgb, var(--wash-cool) var(--palette-wash), transparent), transparent 55%);
  --spectrum-background: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--wash-edge) 16%, transparent), transparent 47%),
    radial-gradient(ellipse at 5% 32%, color-mix(in srgb, var(--wash-center) 14%, transparent), transparent 50%),
    radial-gradient(ellipse at 82% 95%, color-mix(in srgb, var(--wash-base) 12%, transparent), transparent 55%);
  background: var(--glow-background) var(--bg-main);
}
html[data-background=clean] body { background-image: none; }
html[data-background=spectrum] body { background-image: var(--spectrum-background); }
body::before { height: 3px; background: var(--site-ribbon); }