/* Preview palettes for the whole site: washes, cards, fields, dark bands, and type.
   Lavender is also the theme default in assets/css/tokens.css.
   Delete this folder, and the enqueue in inc/enqueue.php, to remove the preview. */

html[data-argos-theme="lavender"] {
  --ink: #16131f;
  --muted: #5f5a6c;
  --paper: #f5f3ff;
  --paper-2: #e6e0ff;
  --paper-wash: linear-gradient(180deg, #faf9ff 0%, #f5f3ff 100%);
  --paper-wash-soft: linear-gradient(180deg, #f3f0ff 0%, #e6e0ff 100%);
  --card: #fbfaff;
  --card-glass: rgba(251, 250, 255, 0.82);
  --field: #f6f4ff;
  --visual: linear-gradient(145deg, #f8f6ff, #f1eefe);
  --tint-a: #ece6ff;
  --tint-b: #dff7f2;
  --header-bg: rgba(245, 243, 255, 0.92);
  --menu-bg: rgba(250, 249, 255, 0.985);
  --line: rgba(28, 22, 48, 0.14);
  --violet: #6118d7;
  --violet-dark: #3e0b94;
  --mint: #1dd6be;
  --mint-soft: #c8fff3;
  --dark: #16131c;
  --charcoal: #141820;
  --midnight: #14111c;
  --navy-bg: linear-gradient(145deg, #2c1458, #14111f 62%, #102824);
  --violet-bg: linear-gradient(145deg, #4c12b0, #24104a 78%);
  --band-bg: linear-gradient(135deg, #3a1080 0%, #241044 55%, #14111c 100%);
  --es-navy: #14111c;
  --es-teal: #14bfa7;
  --es-blue: #5279d8;
  --es-amber: #d9a04a;
}

html[data-argos-theme="warm"] {
  --ink: #161411;
  --muted: #645f58;
  --paper: #f7f5f0;
  --paper-2: #edeae3;
  --paper-wash: linear-gradient(180deg, #fbfaf6 0%, #f7f5f0 100%);
  --paper-wash-soft: linear-gradient(180deg, #f6f3ec 0%, #edeae3 100%);
  --card: #fcfbf8;
  --card-glass: rgba(252, 251, 248, 0.82);
  --field: #f6f4ee;
  --visual: linear-gradient(145deg, #fbfaf6, #f3f0e8);
  --tint-a: #efe8ff;
  --tint-b: #e5f7f3;
  --header-bg: rgba(247, 245, 240, 0.92);
  --menu-bg: rgba(250, 249, 246, 0.985);
  --line: rgba(22, 20, 17, 0.14);
  --violet: #6118d7;
  --violet-dark: #3e0b94;
  --mint: #1dd6be;
  --mint-soft: #c8fff3;
  --dark: #17151c;
  --charcoal: #141820;
  --midnight: #121820;
  --navy-bg: linear-gradient(145deg, #2a1848, #141820 62%, #14302c);
  --violet-bg: linear-gradient(145deg, #4f10b7, #241430 78%);
  --band-bg: linear-gradient(135deg, #3b0d86 0%, #241430 55%, #141820 100%);
  --es-navy: #121820;
  --es-teal: #14bfa7;
  --es-blue: #5279d8;
  --es-amber: #d9a04a;
}

html[data-argos-theme="violet"] {
  --ink: #1c1228;
  --muted: #645878;
  --paper: #efe8ff;
  --paper-2: #e2d4ff;
  --paper-wash: linear-gradient(180deg, #f7f2ff 0%, #efe8ff 100%);
  --paper-wash-soft: linear-gradient(180deg, #f0e8ff 0%, #e2d4ff 100%);
  --card: #f7f3ff;
  --card-glass: rgba(247, 243, 255, 0.84);
  --field: #f3ecff;
  --visual: linear-gradient(145deg, #f6f1ff, #ebe3ff);
  --tint-a: #e4d8ff;
  --tint-b: #e3f7f3;
  --header-bg: rgba(239, 232, 255, 0.92);
  --menu-bg: rgba(247, 242, 255, 0.985);
  --line: rgba(40, 24, 72, 0.14);
  --violet: #6118d7;
  --violet-dark: #3a0c88;
  --mint: #1dd6be;
  --mint-soft: #c8fff3;
  --dark: #1a1026;
  --charcoal: #1c1428;
  --midnight: #160e22;
  --navy-bg: linear-gradient(145deg, #3a1280, #160e24 62%, #12302c);
  --violet-bg: linear-gradient(145deg, #5b16cc, #2a0858 78%);
  --band-bg: linear-gradient(135deg, #4a12a8 0%, #220848 55%, #160e22 100%);
  --es-navy: #160e22;
  --es-teal: #14bfa7;
  --es-blue: #6a4ad4;
  --es-amber: #d9a04a;
}

html[data-argos-theme="mint"] {
  --ink: #10211c;
  --muted: #4c6560;
  --paper: #e7fbf6;
  --paper-2: #d5f6ee;
  --paper-wash: linear-gradient(180deg, #f4fffc 0%, #e7fbf6 100%);
  --paper-wash-soft: linear-gradient(180deg, #e9fbf7 0%, #d5f6ee 100%);
  --card: #f4fffc;
  --card-glass: rgba(244, 255, 252, 0.84);
  --field: #eefaf6;
  --visual: linear-gradient(145deg, #f3fffb, #e4f8f3);
  --tint-a: #d9f4ee;
  --tint-b: #c8efe6;
  --header-bg: rgba(231, 251, 246, 0.92);
  --menu-bg: rgba(244, 255, 252, 0.985);
  --line: rgba(16, 40, 34, 0.14);
  --violet: #0c6e60;
  --violet-dark: #084840;
  --mint: #1a7a9a;
  --mint-soft: #d4eef6;
  --dark: #0e2420;
  --charcoal: #102824;
  --midnight: #0c1e22;
  --navy-bg: linear-gradient(145deg, #0f4a42, #0c1e22 62%, #12303a);
  --violet-bg: linear-gradient(145deg, #0f6e60, #0c2e34 78%);
  --band-bg: linear-gradient(135deg, #0e5c52 0%, #0c2a32 55%, #0c1e22 100%);
  --es-navy: #0c1e22;
  --es-teal: #149a8c;
  --es-blue: #3d7a9a;
  --es-amber: #c4924a;
}

html[data-argos-theme="blue"] {
  --ink: #121826;
  --muted: #556070;
  --paper: #e8eeff;
  --paper-2: #d9e3ff;
  --paper-wash: linear-gradient(180deg, #f5f8ff 0%, #e8eeff 100%);
  --paper-wash-soft: linear-gradient(180deg, #eef3ff 0%, #d9e3ff 100%);
  --card: #f6f8ff;
  --card-glass: rgba(246, 248, 255, 0.84);
  --field: #eef2ff;
  --visual: linear-gradient(145deg, #f4f7ff, #e6ecff);
  --tint-a: #dde5ff;
  --tint-b: #e3f4f6;
  --header-bg: rgba(232, 238, 255, 0.92);
  --menu-bg: rgba(245, 248, 255, 0.985);
  --line: rgba(18, 28, 48, 0.14);
  --violet: #3d62c8;
  --violet-dark: #243e86;
  --mint: #1aa89a;
  --mint-soft: #d4f6f1;
  --dark: #121826;
  --charcoal: #141a24;
  --midnight: #101722;
  --navy-bg: linear-gradient(145deg, #1d3a78, #101722 62%, #0e2e32);
  --violet-bg: linear-gradient(145deg, #2f56b8, #162044 78%);
  --band-bg: linear-gradient(135deg, #274a9e 0%, #162044 55%, #101722 100%);
  --es-navy: #101722;
  --es-teal: #1aa89a;
  --es-blue: #5279d8;
  --es-amber: #d9a04a;
}

html[data-argos-theme="ink"] {
  --ink: #12161c;
  --muted: #5c6570;
  --paper: #eef2f6;
  --paper-2: #e2e8ef;
  --paper-wash: linear-gradient(180deg, #f7f9fb 0%, #eef2f6 100%);
  --paper-wash-soft: linear-gradient(180deg, #f2f5f8 0%, #e2e8ef 100%);
  --card: #f7f9fb;
  --card-glass: rgba(247, 249, 251, 0.86);
  --field: #f2f5f8;
  --visual: linear-gradient(145deg, #f6f8fa, #e8eef3);
  --tint-a: #e4eaf1;
  --tint-b: #e3eef0;
  --header-bg: rgba(238, 242, 246, 0.92);
  --menu-bg: rgba(247, 249, 251, 0.985);
  --line: rgba(18, 22, 28, 0.14);
  --violet: #3e5674;
  --violet-dark: #243246;
  --mint: #1a8f86;
  --mint-soft: #d5f0ec;
  --dark: #12161c;
  --charcoal: #161a20;
  --midnight: #10141a;
  --navy-bg: linear-gradient(145deg, #243246, #10141a 62%, #142826);
  --violet-bg: linear-gradient(145deg, #31465e, #161c26 78%);
  --band-bg: linear-gradient(135deg, #2a3c52 0%, #161c26 55%, #10141a 100%);
  --es-navy: #10141a;
  --es-teal: #1a8f86;
  --es-blue: #4d6d92;
  --es-amber: #c4924a;
}

html[data-argos-theme="amber"] {
  --ink: #24180f;
  --muted: #6d5c4c;
  --paper: #fbf3e6;
  --paper-2: #f4e6cf;
  --paper-wash: linear-gradient(180deg, #fffbf5 0%, #fbf3e6 100%);
  --paper-wash-soft: linear-gradient(180deg, #fbf6ec 0%, #f4e6cf 100%);
  --card: #fffaf3;
  --card-glass: rgba(255, 250, 243, 0.86);
  --field: #fbf6ec;
  --visual: linear-gradient(145deg, #fff8ee, #f6ead6);
  --tint-a: #f3e4cc;
  --tint-b: #e7f4ef;
  --header-bg: rgba(251, 243, 230, 0.92);
  --menu-bg: rgba(255, 251, 245, 0.985);
  --line: rgba(48, 32, 16, 0.14);
  --violet: #9a5a10;
  --violet-dark: #6b3c0c;
  --mint: #1a8f7c;
  --mint-soft: #d7f3ec;
  --dark: #24180f;
  --charcoal: #22180f;
  --midnight: #1c140e;
  --navy-bg: linear-gradient(145deg, #6a3e10, #1c140e 62%, #143028);
  --violet-bg: linear-gradient(145deg, #a35e10, #3a2410 78%);
  --band-bg: linear-gradient(135deg, #8a4e0e 0%, #3a2410 55%, #1c140e 100%);
  --es-navy: #1c140e;
  --es-teal: #1a8f7c;
  --es-blue: #8a6230;
  --es-amber: #c9842e;
}

/* Logo violet and the black wordmark. No green in these options. */

html[data-argos-theme="porcelain"] {
  --ink: #141218;
  --muted: #5c5868;
  --paper: #f7f6fb;
  --paper-2: #eceaf3;
  --paper-wash: linear-gradient(180deg, #fcfbfe 0%, #f7f6fb 100%);
  --paper-wash-soft: linear-gradient(180deg, #f4f2f8 0%, #eceaf3 100%);
  --card: #fffcff;
  --card-glass: rgba(255, 252, 255, 0.88);
  --field: #f3f1f8;
  --visual: linear-gradient(145deg, #f8f6fc, #eeeaf6);
  --tint-a: #ece6f8;
  --tint-b: #e6e0f4;
  --header-bg: rgba(247, 246, 251, 0.92);
  --menu-bg: rgba(252, 251, 254, 0.985);
  --line: rgba(20, 18, 24, 0.12);
  --violet: #6118d7;
  --violet-dark: #3e0b94;
  --mint: #d7ccff;
  --mint-soft: #eee9ff;
  --dark: #141218;
  --charcoal: #1a1720;
  --midnight: #121016;
  --navy-bg: linear-gradient(145deg, #2a1460, #121016 62%, #1a1430);
  --violet-bg: linear-gradient(145deg, #6118d7, #2a0a58 78%);
  --band-bg: linear-gradient(135deg, #4c14b0 0%, #2a0a58 55%, #121016 100%);
  --es-navy: #121016;
  --es-teal: #b7a6f5;
  --es-blue: #5b4ad4;
  --es-amber: #c4924a;
}

html[data-argos-theme="iris"] {
  --ink: #1a1028;
  --muted: #5e5470;
  --paper: #f0e9ff;
  --paper-2: #dfd2ff;
  --paper-wash: linear-gradient(180deg, #f8f4ff 0%, #eadfff 100%);
  --paper-wash-soft: linear-gradient(180deg, #f3ecff 0%, #dfd2ff 100%);
  --card: #faf7ff;
  --card-glass: rgba(250, 247, 255, 0.86);
  --field: #f4edff;
  --visual: linear-gradient(145deg, #f7f2ff, #e8dcff);
  --tint-a: #e4d6ff;
  --tint-b: #ddd0f8;
  --header-bg: rgba(240, 233, 255, 0.92);
  --menu-bg: rgba(248, 244, 255, 0.985);
  --line: rgba(36, 16, 72, 0.14);
  --violet: #6118d7;
  --violet-dark: #3a0c90;
  --mint: #e4daff;
  --mint-soft: #f1ebff;
  --dark: #1a1028;
  --charcoal: #1c142c;
  --midnight: #140e22;
  --navy-bg: linear-gradient(145deg, #3a1288, #140e22 62%, #221448);
  --violet-bg: linear-gradient(145deg, #6118d7, #2c0860 78%);
  --band-bg: linear-gradient(135deg, #5514c4 0%, #2c0860 55%, #140e22 100%);
  --es-navy: #140e22;
  --es-teal: #c4b5fd;
  --es-blue: #6d4ee0;
  --es-amber: #c4924a;
}

html[data-argos-theme="indigo"] {
  --ink: #14182a;
  --muted: #555a70;
  --paper: #eef0f8;
  --paper-2: #dfe3f2;
  --paper-wash: linear-gradient(180deg, #f7f8fc 0%, #eef0f8 100%);
  --paper-wash-soft: linear-gradient(180deg, #f2f4fa 0%, #dfe3f2 100%);
  --card: #f8f9fd;
  --card-glass: rgba(248, 249, 253, 0.86);
  --field: #eef1f8;
  --visual: linear-gradient(145deg, #f4f6fb, #e4e8f4);
  --tint-a: #e3e6f6;
  --tint-b: #dcdff0;
  --header-bg: rgba(238, 240, 248, 0.92);
  --menu-bg: rgba(247, 248, 252, 0.985);
  --line: rgba(20, 24, 42, 0.13);
  --violet: #4334c4;
  --violet-dark: #2a2080;
  --mint: #ddd9ff;
  --mint-soft: #eceaff;
  --dark: #14182a;
  --charcoal: #161a28;
  --midnight: #101422;
  --navy-bg: linear-gradient(145deg, #2a2478, #101422 62%, #1a2040);
  --violet-bg: linear-gradient(145deg, #4334c4, #1c1848 78%);
  --band-bg: linear-gradient(135deg, #3a2cb0 0%, #1c1848 55%, #101422 100%);
  --es-navy: #101422;
  --es-teal: #b7b3ef;
  --es-blue: #4d5cb8;
  --es-amber: #c4924a;
}

html[data-argos-theme="plum"] {
  --ink: #241226;
  --muted: #6a5870;
  --paper: #f7f0f6;
  --paper-2: #eadfec;
  --paper-wash: linear-gradient(180deg, #fbf7fa 0%, #f7f0f6 100%);
  --paper-wash-soft: linear-gradient(180deg, #f6eef4 0%, #eadfec 100%);
  --card: #fdfafc;
  --card-glass: rgba(253, 250, 252, 0.86);
  --field: #f6f0f4;
  --visual: linear-gradient(145deg, #faf5f8, #f0e6ee);
  --tint-a: #f0e4ee;
  --tint-b: #e8dce8;
  --header-bg: rgba(247, 240, 246, 0.92);
  --menu-bg: rgba(251, 247, 250, 0.985);
  --line: rgba(36, 18, 38, 0.13);
  --violet: #7a28b0;
  --violet-dark: #4e1474;
  --mint: #f0dcf6;
  --mint-soft: #f8eef8;
  --dark: #241226;
  --charcoal: #221420;
  --midnight: #1a101c;
  --navy-bg: linear-gradient(145deg, #5a1878, #1a101c 62%, #2a1430);
  --violet-bg: linear-gradient(145deg, #7a28b0, #3a1058 78%);
  --band-bg: linear-gradient(135deg, #6a1e9c 0%, #3a1058 55%, #1a101c 100%);
  --es-navy: #1a101c;
  --es-teal: #d4b4e4;
  --es-blue: #8a4aaa;
  --es-amber: #c4924a;
}

.argos-colors {
  position: fixed;
  z-index: 500;
  right: 18px;
  bottom: 18px;
  width: min(280px, calc(100vw - 28px));
  color: #111015;
  font-family: Inter, ui-sans-serif, sans-serif;
}

.argos-colors__toggle {
  margin-left: auto;
  min-height: 42px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(17, 16, 21, 0.14);
  border-radius: 999px;
  color: #111015;
  background: #fff;
  box-shadow: 0 12px 30px rgba(35, 24, 59, 0.16);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.argos-colors__swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #faf9ff 0%, #6118d7 100%);
  box-shadow: inset 0 0 0 1px rgba(17, 16, 21, 0.12);
}

.argos-colors__panel {
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid rgba(17, 16, 21, 0.12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(35, 24, 59, 0.18);
}

.argos-colors__panel[hidden] { display: none; }

.argos-colors__panel p {
  margin: 0 0 12px;
  color: #64616d;
  font-size: 0.72rem;
  line-height: 1.4;
}

.argos-colors__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: min(62vh, 460px);
  overflow: auto;
}

.argos-colors__option {
  min-height: 64px;
  padding: 8px;
  display: grid;
  align-content: end;
  border: 1px solid rgba(17, 16, 21, 0.12);
  border-radius: 12px;
  color: #111015;
  background: #f5f3ff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.argos-colors__option[aria-checked="true"] {
  border-color: #6118d7;
  box-shadow: 0 0 0 2px rgba(97, 24, 215, 0.28);
}

.argos-colors__option span {
  display: block;
  color: #64616d;
  font-size: 0.62rem;
  font-weight: 650;
}