[data-palette='midnight'][data-theme='dark'],
[data-palette='midnight']:not([data-theme='light']) {
  color-scheme: dark;

  --bg: #0b111f;
  --bg-deep: #060a14;
  --surface-1: #1f2839;
  --surface-2: #283246;
  --surface-3: #354158;
  --surface-inset: #111828;

  --line: #59667f;
  --line-strong: #7a879f;

  --ink: #f4f8fd;
  --ink-2: #dde5f0;
  --ink-dim: #b9c4d5;
  --ink-faint: #b3bfd1;
  --ink-inverse: #0b111f;

  --metal-1: #78849b;
  --metal-2: #97a3b8;
  --metal-3: #bcc7d8;
  --metal-4: #dde5f0;
  --metal-5: #f4f8fd;
  --gradient-metal: linear-gradient(
    135deg,
    var(--metal-1) 0%, var(--metal-3) 34%, var(--metal-5) 50%,
    var(--metal-3) 66%, var(--metal-1) 100%
  );
  --gradient-metal-hairline: linear-gradient(
    90deg, transparent, var(--metal-3) 22%, var(--metal-5) 50%, var(--metal-3) 78%, transparent
  );

  --metal-text: #cbd6e6;
  --metal-text-strong: #eaf1fa;
  --accent: var(--metal-3);
  --accent-ink: #060b16;
  --accent-quiet: rgba(188, 199, 216, 0.14);
  --accent-line: rgba(188, 199, 216, 0.36);

  --ok: #6fe0a8;
  --warn: #ffca6a;
  --danger: #ff9a94;
  --info: #7cc8ff;

  --shadow-sm: 0 1px 2px rgba(2, 6, 14, 0.62);
  --shadow-md: 0 6px 20px rgba(2, 6, 14, 0.64);
  --shadow-lg: 0 24px 60px rgba(2, 6, 14, 0.72);
  --shadow-metal: 0 8px 30px rgba(124, 200, 255, 0.16);

  --scrim: rgba(4, 8, 18, 0.78);

  --accent-money: #7cc8ff;
  --accent-vapes: #63e2c0;
  --accent-accessories: #c3aaff;
}

[data-palette='midnight'][data-theme='light'] {
  color-scheme: light;

  --bg: #fafcff;
  --bg-deep: #e5eaf2;
  --surface-1: #dce3ed;
  --surface-2: #cfd8e5;
  --surface-3: #bfcada;
  --surface-inset: #ffffff;

  --line: #8794a8;
  --line-strong: #6a7889;

  --ink: #0a111d;
  --ink-2: #26303f;
  --ink-dim: #3b4757;
  --ink-faint: #404c5c;
  --ink-inverse: #fafcff;

  --metal-1: #78849b;
  --metal-2: #97a3b8;
  --metal-3: #bcc7d8;
  --metal-4: #dde5f0;
  --metal-5: #f4f8fd;
  --gradient-metal: linear-gradient(
    135deg,
    var(--metal-1) 0%, var(--metal-3) 34%, var(--metal-5) 50%,
    var(--metal-3) 66%, var(--metal-1) 100%
  );
  --gradient-metal-hairline: linear-gradient(
    90deg, transparent, var(--metal-3) 22%, var(--metal-5) 50%, var(--metal-3) 78%, transparent
  );

  --metal-text: #1f3350;
  --metal-text-strong: #142338;
  --accent: #1f3350;
  --accent-ink: #060b16;
  --accent-quiet: rgba(31, 51, 80, 0.10);
  --accent-line: rgba(31, 51, 80, 0.32);

  --ok: #00602a;
  --warn: #6f3d00;
  --danger: #97131a;
  --info: #0b4d99;

  --shadow-sm: 0 1px 2px rgba(10, 17, 29, 0.08);
  --shadow-md: 0 6px 20px rgba(10, 17, 29, 0.1);
  --shadow-lg: 0 24px 60px rgba(10, 17, 29, 0.14);
  --shadow-metal: 0 8px 30px rgba(31, 51, 80, 0.16);

  --scrim: rgba(10, 17, 29, 0.5);

  --accent-money: #0b4d99;
  --accent-vapes: #00614a;
  --accent-accessories: #5b3ca8;
}

[data-palette='sapphire'][data-theme='dark'],
[data-palette='sapphire']:not([data-theme='light']) {
  color-scheme: dark;

  --bg: #0c1730;
  --bg-deep: #070e1f;
  --surface-1: #1d2c50;
  --surface-2: #253660;
  --surface-3: #314478;
  --surface-inset: #121d3a;

  --line: #5b6b9c;
  --line-strong: #7c8bb8;

  --ink: #f2f6ff;
  --ink-2: #dbe3f6;
  --ink-dim: #b8c4e0;
  --ink-faint: #b2bedc;
  --ink-inverse: #0c1730;

  --metal-1: #a5764f;
  --metal-2: #c08f63;
  --metal-3: #dcae84;
  --metal-4: #eecfae;
  --metal-5: #fbeade;
  --gradient-metal: linear-gradient(
    135deg,
    var(--metal-1) 0%, var(--metal-3) 34%, var(--metal-5) 50%,
    var(--metal-3) 66%, var(--metal-1) 100%
  );
  --gradient-metal-hairline: linear-gradient(
    90deg, transparent, var(--metal-3) 22%, var(--metal-5) 50%, var(--metal-3) 78%, transparent
  );

  --metal-text: #f0c7a0;
  --metal-text-strong: #fbdfc9;
  --accent: var(--metal-3);
  --accent-ink: #1a0d03;
  --accent-quiet: rgba(220, 174, 132, 0.15);
  --accent-line: rgba(220, 174, 132, 0.38);

  --ok: #7ce08f;
  --warn: #ffc95f;
  --danger: #ff9b8f;
  --info: #8ac9ff;

  --shadow-sm: 0 1px 2px rgba(3, 7, 18, 0.62);
  --shadow-md: 0 6px 20px rgba(3, 7, 18, 0.64);
  --shadow-lg: 0 24px 60px rgba(3, 7, 18, 0.72);
  --shadow-metal: 0 8px 30px rgba(220, 174, 132, 0.2);

  --scrim: rgba(5, 10, 24, 0.78);

  --accent-money: #f0b072;
  --accent-vapes: #6fdfb4;
  --accent-accessories: #ff9fb4;
}

[data-palette='sapphire'][data-theme='light'] {
  color-scheme: light;

  --bg: #fbfbff;
  --bg-deep: #e5e9f7;
  --surface-1: #dce2f3;
  --surface-2: #cfd7ec;
  --surface-3: #bfc9e3;
  --surface-inset: #ffffff;

  --line: #8892b8;
  --line-strong: #6a769e;

  --ink: #0b1330;
  --ink-2: #26315a;
  --ink-dim: #3b4672;
  --ink-faint: #404b76;
  --ink-inverse: #fbfbff;

  --metal-1: #a5764f;
  --metal-2: #c08f63;
  --metal-3: #dcae84;
  --metal-4: #eecfae;
  --metal-5: #fbeade;
  --gradient-metal: linear-gradient(
    135deg,
    var(--metal-1) 0%, var(--metal-3) 34%, var(--metal-5) 50%,
    var(--metal-3) 66%, var(--metal-1) 100%
  );
  --gradient-metal-hairline: linear-gradient(
    90deg, transparent, var(--metal-3) 22%, var(--metal-5) 50%, var(--metal-3) 78%, transparent
  );

  --metal-text: #7a3f14;
  --metal-text-strong: #5a2c0c;
  --accent: #7a3f14;
  --accent-ink: #1a0d03;
  --accent-quiet: rgba(122, 63, 20, 0.10);
  --accent-line: rgba(122, 63, 20, 0.32);

  --ok: #00602a;
  --warn: #6f3d00;
  --danger: #97131a;
  --info: #0e4c9b;

  --shadow-sm: 0 1px 2px rgba(11, 19, 48, 0.08);
  --shadow-md: 0 6px 20px rgba(11, 19, 48, 0.1);
  --shadow-lg: 0 24px 60px rgba(11, 19, 48, 0.14);
  --shadow-metal: 0 8px 30px rgba(122, 63, 20, 0.16);

  --scrim: rgba(11, 19, 48, 0.5);

  --accent-money: #7a3f14;
  --accent-vapes: #00604a;
  --accent-accessories: #a01247;
}

[data-palette='cobalt'][data-theme='dark'],
[data-palette='cobalt']:not([data-theme='light']) {
  color-scheme: dark;

  --bg: #0a0f1c;
  --bg-deep: #050810;
  --surface-1: #1c2436;
  --surface-2: #242e44;
  --surface-3: #303c56;
  --surface-inset: #101625;

  --line: #55637d;
  --line-strong: #77859f;

  --ink: #f5f8ff;
  --ink-2: #dce4f2;
  --ink-dim: #b8c3d8;
  --ink-faint: #b2bed3;
  --ink-inverse: #0a0f1c;

  --metal-1: #4f8ae0;
  --metal-2: #6ea3ec;
  --metal-3: #93bdf6;
  --metal-4: #bcd8fb;
  --metal-5: #e4f0ff;
  --gradient-metal: linear-gradient(
    135deg,
    var(--metal-1) 0%, var(--metal-3) 34%, var(--metal-5) 50%,
    var(--metal-3) 66%, var(--metal-1) 100%
  );
  --gradient-metal-hairline: linear-gradient(
    90deg, transparent, var(--metal-3) 22%, var(--metal-5) 50%, var(--metal-3) 78%, transparent
  );

  --metal-text: #9cc4f8;
  --metal-text-strong: #cfe4ff;
  --accent: var(--metal-3);
  --accent-ink: #04101f;
  --accent-quiet: rgba(147, 189, 246, 0.15);
  --accent-line: rgba(147, 189, 246, 0.38);

  --ok: #86e07a;
  --warn: #ffc95f;
  --danger: #ff988f;
  --info: #7fc9ff;

  --shadow-sm: 0 1px 2px rgba(1, 4, 12, 0.65);
  --shadow-md: 0 6px 20px rgba(1, 4, 12, 0.66);
  --shadow-lg: 0 24px 60px rgba(1, 4, 12, 0.74);
  --shadow-metal: 0 8px 30px rgba(79, 138, 224, 0.28);

  --scrim: rgba(3, 6, 16, 0.78);

  --accent-money: #6db4ff;
  --accent-vapes: #b9e94f;
  --accent-accessories: #ff8fd0;
}

[data-palette='cobalt'][data-theme='light'] {
  color-scheme: light;

  --bg: #fbfcff;
  --bg-deep: #e6eaf4;
  --surface-1: #dce2ee;
  --surface-2: #d0d7e6;
  --surface-3: #c0c9dc;
  --surface-inset: #ffffff;

  --line: #8792ab;
  --line-strong: #69758e;

  --ink: #08101f;
  --ink-2: #242e42;
  --ink-dim: #3a4559;
  --ink-faint: #3f4a5e;
  --ink-inverse: #fbfcff;

  --metal-1: #4f8ae0;
  --metal-2: #6ea3ec;
  --metal-3: #93bdf6;
  --metal-4: #bcd8fb;
  --metal-5: #e4f0ff;
  --gradient-metal: linear-gradient(
    135deg,
    var(--metal-1) 0%, var(--metal-3) 34%, var(--metal-5) 50%,
    var(--metal-3) 66%, var(--metal-1) 100%
  );
  --gradient-metal-hairline: linear-gradient(
    90deg, transparent, var(--metal-3) 22%, var(--metal-5) 50%, var(--metal-3) 78%, transparent
  );

  --metal-text: #14417f;
  --metal-text-strong: #0d2d59;
  --accent: #14417f;
  --accent-ink: #04101f;
  --accent-quiet: rgba(20, 65, 127, 0.10);
  --accent-line: rgba(20, 65, 127, 0.32);

  --ok: #00602a;
  --warn: #6f3d00;
  --danger: #97131a;
  --info: #0b4d99;

  --shadow-sm: 0 1px 2px rgba(8, 16, 31, 0.08);
  --shadow-md: 0 6px 20px rgba(8, 16, 31, 0.1);
  --shadow-lg: 0 24px 60px rgba(8, 16, 31, 0.14);
  --shadow-metal: 0 8px 30px rgba(20, 65, 127, 0.18);

  --scrim: rgba(8, 16, 31, 0.5);

  --accent-money: #0b4d99;
  --accent-vapes: #3f5a00;
  --accent-accessories: #a3126f;
}

[data-palette='porcelain'][data-theme='light'] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-deep: #e8ecf6;
  --surface-1: #e2e7f3;
  --surface-2: #d5dcec;
  --surface-3: #c5cfe4;
  --surface-inset: #f7f9ff;

  --line: #8b97b7;
  --line-strong: #6d7a9c;

  --ink: #0d1327;
  --ink-2: #283155;
  --ink-dim: #3d4770;
  --ink-faint: #424c75;
  --ink-inverse: #ffffff;

  --metal-1: #16265e;
  --metal-2: #1d3475;
  --metal-3: #26428f;
  --metal-4: #2f4fa6;
  --metal-5: #3a5cbb;
  --gradient-metal: linear-gradient(
    135deg,
    var(--metal-1) 0%, var(--metal-3) 34%, var(--metal-5) 50%,
    var(--metal-3) 66%, var(--metal-1) 100%
  );
  --gradient-metal-hairline: linear-gradient(
    90deg, transparent, var(--metal-3) 22%, var(--metal-5) 50%, var(--metal-3) 78%, transparent
  );

  --metal-text: #26428f;
  --metal-text-strong: #16265e;
  --accent: #26428f;
  --accent-ink: #ffffff;
  --accent-quiet: rgba(38, 66, 143, 0.10);
  --accent-line: rgba(38, 66, 143, 0.34);

  --ok: #00602a;
  --warn: #7a4300;
  --danger: #97131a;
  --info: #0b4d99;

  --shadow-sm: 0 1px 2px rgba(13, 19, 39, 0.08);
  --shadow-md: 0 6px 20px rgba(13, 19, 39, 0.1);
  --shadow-lg: 0 24px 60px rgba(13, 19, 39, 0.14);
  --shadow-metal: 0 8px 30px rgba(38, 66, 143, 0.2);

  --scrim: rgba(13, 19, 39, 0.5);

  --accent-money: #7a4300;
  --accent-vapes: #00602a;
  --accent-accessories: #a01247;
}

[data-palette='porcelain'][data-theme='dark'],
[data-palette='porcelain']:not([data-theme='light']) {
  color-scheme: dark;

  --bg: #101828;
  --bg-deep: #0a1120;
  --surface-1: #263149;
  --surface-2: #2f3b57;
  --surface-3: #3b496b;
  --surface-inset: #161f33;

  --line: #5e6b8c;
  --line-strong: #7e8caa;

  --ink: #f4f7ff;
  --ink-2: #dfe5f4;
  --ink-dim: #bcc6dd;
  --ink-faint: #b6c1d9;
  --ink-inverse: #101828;

  --metal-1: #24408d;
  --metal-2: #2b4c9f;
  --metal-3: #3459b4;
  --metal-4: #3c65c4;
  --metal-5: #4571d3;
  --gradient-metal: linear-gradient(
    135deg,
    var(--metal-1) 0%, var(--metal-3) 34%, var(--metal-5) 50%,
    var(--metal-3) 66%, var(--metal-1) 100%
  );
  --gradient-metal-hairline: linear-gradient(
    90deg, transparent, var(--metal-3) 22%, var(--metal-5) 50%, var(--metal-3) 78%, transparent
  );

  --metal-text: #9db5f2;
  --metal-text-strong: #cfdcff;
  --accent: #3459b4;
  --accent-ink: #ffffff;
  --accent-quiet: rgba(69, 113, 211, 0.2);
  --accent-line: rgba(122, 158, 240, 0.4);

  --ok: #7fe08a;
  --warn: #ffc85c;
  --danger: #ff9a91;
  --info: #8cc9ff;

  --shadow-sm: 0 1px 2px rgba(4, 8, 18, 0.6);
  --shadow-md: 0 6px 20px rgba(4, 8, 18, 0.62);
  --shadow-lg: 0 24px 60px rgba(4, 8, 18, 0.7);
  --shadow-metal: 0 8px 30px rgba(52, 89, 180, 0.34);

  --scrim: rgba(8, 13, 26, 0.76);

  --accent-money: #ffc46b;
  --accent-vapes: #7fe0a6;
  --accent-accessories: #ff9d7a;
}