:root[data-theme="deadly-darling"] {
  --bg:        #f7faff;
  --surface:   #ffffff;
  --surface-2: #eceef2;

  --ink:       #191919;
  --ink-2:     #3a3d43;
  --ink-3:     #5b5f67;
  --ink-disabled: #61656d;

  --border:        #dcdee2;
  --border-strong: #c3c7cd;

  --accent:        #cc2a2a;
  --accent-strong: #a61f1f;
  --accent-soft:   rgba(204, 42, 42, 0.10);

  --hover:    rgba(25, 25, 25, 0.04);
  --active:   rgba(25, 25, 25, 0.07);
  --focus:    rgba(204, 42, 42, 0.45);

  --danger:       #8f2447;
  --danger-soft:  rgba(143, 36, 71, 0.10);
  --warning:      #87621a;
  --warning-soft: rgba(135, 98, 26, 0.10);

  --shadow:    0 4px 12px rgba(25, 25, 25, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero:  #191919;
  --ink-hero:      #f7faff;
  --surface-inset: #ffffff;
  --ink-inset:     #191919;
}

:root[data-theme="deadly-darling"] .nav-rail,
:root[data-theme="deadly-darling"] .sb,
:root[data-theme="deadly-darling"] .entity-rail-col,
:root[data-theme="deadly-darling"] .nav-drawer {
  --bg:            #111111;
  --surface:       #1c1c1c;
  --surface-2:     #262626;
  --ink:           #f7faff;
  --ink-2:         #c9ccd1;
  --ink-3:         #9a9ea5;
  --ink-disabled:  #8a8e95;
  --border:        #242424;
  --border-strong: #333333;
  --accent:        #ff5454;
  --accent-strong: #ff6699;
  --accent-soft:   rgba(255, 84, 84, 0.14);
  --focus:         rgba(255, 84, 84, 0.50);
  --ink-on-strong: #191919;
  --hover:         rgba(255, 255, 255, 0.05);
  --active:        rgba(255, 255, 255, 0.08);
  --shadow:        0 4px 12px rgba(0, 0, 0, 0.55);
  --color-scheme:  dark;
  --picker-invert: 0.6;
}

:root[data-theme="deadly-darling"] .nav-top,
:root[data-theme="deadly-darling"] .site-header,
:root[data-theme="deadly-darling"] .site-footer,
:root[data-theme="deadly-darling"] .on-dark {
  --bg:            #191919;
  --surface:       #191919;
  --surface-2:     #252525;
  --ink:           #f7faff;
  --ink-2:         #c9ccd1;
  --ink-3:         #9a9ea5;
  --ink-disabled:  #8a8e95;
  --border:        #2a2a2a;
  --border-strong: #3a3a3a;
  --accent:        #ff5454;
  --accent-strong: #ff6699;
  --accent-soft:   rgba(255, 84, 84, 0.14);
  --focus:         rgba(255, 84, 84, 0.50);
  --ink-on-strong: #191919;
  --hover:         rgba(255, 255, 255, 0.05);
  --active:        rgba(255, 255, 255, 0.08);
  --color-scheme:  dark;
  --picker-invert: 0.6;
}

:root[data-theme="tuxedo"] {
  --bg:        #edf1f5;
  --surface:   #fafcfd;
  --surface-2: #e1e6eb;

  --ink:       #0c1219;
  --ink-2:     #4a5360;
  --ink-3:     #57636f;
  --ink-disabled: #bcc3cc;

  --border:        #d6dbe1;
  --border-strong: #bcc4cc;

  --accent:        #1b944b;
  --accent-strong: #167a3e;
  --accent-soft:   rgba(27, 148, 75, 0.10);

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(27, 148, 75, 0.45);

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.10);
  --warning:      #a17a30;
  --warning-soft: rgba(161, 122, 48, 0.10);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #0d1218;
  --ink-hero:     #f5f5f6;
  --surface-inset: #fafcfd;
  --ink-inset:     #0c1219;

}

:root[data-theme="tuxedo"] .nav-rail,
:root[data-theme="tuxedo"] .sb,
:root[data-theme="tuxedo"] .entity-rail-col,
:root[data-theme="tuxedo"] .nav-drawer {
  --bg:            #06090c;
  --surface:       #161c25;
  --surface-2:     #1d2530;
  --ink:           #f5f5f6;
  --ink-2:         #b4bdc7;
  --ink-3:         #8b95a3;
  --ink-disabled:  #424b58;
  --border:        #1a2230;
  --border-strong: #2a3340;
  --hover:         rgba(255, 255, 255, 0.05);
  --active:        rgba(255, 255, 255, 0.08);
  --shadow:        0 4px 12px rgba(0, 0, 0, 0.55);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}
:root[data-theme="tuxedo"] .nav-top {
  --bg:            #0d1218;
  --surface:       #0d1218;
  --surface-2:     #161c25;
  --ink:           #f5f5f6;
  --ink-2:         #b4bdc7;
  --ink-3:         #8b95a3;
  --ink-disabled:  #424b58;
  --border:        #1a2230;
  --border-strong: #2a3340;
  --hover:         rgba(255, 255, 255, 0.05);
  --active:        rgba(255, 255, 255, 0.08);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}

:root[data-theme="ember"] {
  --bg:        #fdf8f0;
  --surface:   #fffdfa;
  --surface-2: #f2e9e0;

  --ink:       #211a12;
  --ink-2:     #56504a;
  --ink-3:     #807b73;
  --ink-disabled: #c7c2ba;

  --border:        #ebe4dd;
  --border-strong: #dcd3ca;

  --accent:        #e05d2a;
  --accent-strong: #c44e1d;
  --accent-soft:   rgba(224, 93, 42, 0.10);

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(224, 93, 42, 0.45);

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.10);
  --warning:      #a17a30;
  --warning-soft: rgba(161, 122, 48, 0.10);

  --shadow:    0 4px 12px rgba(30, 26, 20, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #0d1218;
  --ink-hero:     #f5f5f6;
  --surface-inset: #fffdfa;
  --ink-inset:     #211a12;

}

:root[data-theme="ember"] .nav-rail,
:root[data-theme="ember"] .sb,
:root[data-theme="ember"] .entity-rail-col,
:root[data-theme="ember"] .nav-drawer {
  --bg:            #06090c;
  --surface:       #161c25;
  --surface-2:     #1d2530;
  --ink:           #f5f5f6;
  --ink-2:         #b4bdc7;
  --ink-3:         #8b95a3;
  --ink-disabled:  #424b58;
  --border:        #1a2230;
  --border-strong: #2a3340;
  --hover:         rgba(255, 255, 255, 0.05);
  --active:        rgba(255, 255, 255, 0.08);
  --shadow:        0 4px 12px rgba(0, 0, 0, 0.55);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}
:root[data-theme="ember"] .nav-top {
  --bg:            #0d1218;
  --surface:       #0d1218;
  --surface-2:     #161c25;
  --ink:           #f5f5f6;
  --ink-2:         #b4bdc7;
  --ink-3:         #8b95a3;
  --ink-disabled:  #424b58;
  --border:        #1a2230;
  --border-strong: #2a3340;
  --hover:         rgba(255, 255, 255, 0.05);
  --active:        rgba(255, 255, 255, 0.08);
  --color-scheme:  dark;
  --picker-invert: 0.6;

}

:root[data-theme="midnight"] {
  --bg:        #06090c;
  --surface:   #0d1218;
  --surface-2: #161c25;

  --ink:       #f5f5f6;
  --ink-2:     #b4bdc7;
  --ink-3:     #8b95a3;
  --ink-disabled: #424b58;

  --border:        #1a2230;
  --border-strong: #2a3340;

  --accent:        #1b944b;
  --accent-strong: #239e54;
  --accent-soft:   rgba(27, 148, 75, 0.16);

  --hover:    rgba(255, 255, 255, 0.04);
  --active:   rgba(255, 255, 255, 0.07);
  --focus:    rgba(27, 148, 75, 0.55);

  --danger:       #d65a5a;
  --danger-soft:  rgba(214, 90, 90, 0.16);
  --warning:      #d4a93f;
  --warning-soft: rgba(212, 169, 63, 0.16);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.55);

  --color-scheme:  dark;
  --picker-invert: 0.6;

  --surface-hero: #000000;
  --ink-hero:     #f5f5f6;
  --surface-inset: #1a2230;
  --ink-inset:     #f5f5f6;

}

:root[data-theme="deep-blue"] {
  --bg:        #001921;
  --surface:   #052530;
  --surface-2: #0a3340;

  --ink:       #f9f9f9;
  --ink-2:     #b6c5cc;
  --ink-3:     #7c8f99;
  --ink-disabled: #4a5d66;

  --border:        #0e3d4d;
  --border-strong: #14546a;

  --accent:        #1b944b;
  --accent-strong: #239e54;
  --accent-soft:   rgba(27, 148, 75, 0.16);

  --hover:    rgba(255, 255, 255, 0.04);
  --active:   rgba(255, 255, 255, 0.07);
  --focus:    rgba(27, 148, 75, 0.55);

  --danger:       #d65a5a;
  --danger-soft:  rgba(214, 90, 90, 0.16);
  --warning:      #d4a93f;
  --warning-soft: rgba(212, 169, 63, 0.16);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.40);

  --color-scheme:  dark;
  --picker-invert: 0.6;

  --surface-hero: #001119;
  --ink-hero:     #f9f9f9;
  --surface-inset: #0a3340;
  --ink-inset:     #f9f9f9;

}

:root[data-theme="slate"] {
  --bg:        #c4cbd2;
  --surface:   #d2d8de;
  --surface-2: #b3bbc4;

  --ink:       #0a121b;
  --ink-2:     #3e4a57;
  --ink-3:     #5c6975;
  --ink-disabled: #8e96a0;

  --border:        #b1b9c1;
  --border-strong: #9ba2ab;

  --accent:        #1b944b;
  --accent-strong: #167a3e;
  --accent-soft:   rgba(27, 148, 75, 0.10);

  --hover:    rgba(0, 0, 0, 0.05);
  --active:   rgba(0, 0, 0, 0.08);
  --focus:    rgba(27, 148, 75, 0.45);

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.12);
  --warning:      #a17a30;
  --warning-soft: rgba(161, 122, 48, 0.12);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.12);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #0d1218;
  --ink-hero:     #f5f5f6;
  --surface-inset: #d2d8de;
  --ink-inset:     #0a121b;

}

:root[data-theme="pearl"] {
  --bg:        #edf1f5;
  --surface:   #fafcfd;
  --surface-2: #e1e6eb;

  --ink:       #0c1219;
  --ink-2:     #4a5360;
  --ink-3:     #57636f;
  --ink-disabled: #bcc3cc;

  --border:        #d6dbe1;
  --border-strong: #bcc4cc;

  --accent:        #1b944b;
  --accent-strong: #167a3e;
  --accent-soft:   rgba(27, 148, 75, 0.10);

  --hover:    rgba(0, 0, 0, 0.04);
  --active:   rgba(0, 0, 0, 0.07);
  --focus:    rgba(27, 148, 75, 0.45);

  --danger:       #b73d3d;
  --danger-soft:  rgba(183, 61, 61, 0.10);
  --warning:      #a17a30;
  --warning-soft: rgba(161, 122, 48, 0.10);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.10);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #0d1218;
  --ink-hero:     #f5f5f6;
  --surface-inset: #fafcfd;
  --ink-inset:     #0c1219;

}

:root[data-theme="oled"] {
  --bg:        #000000;
  --surface:   #0a0a0a;
  --surface-2: #141414;

  --ink:       #f5f5f6;
  --ink-2:     #b4bdc7;
  --ink-3:     #8b95a3;
  --ink-disabled: #424b58;

  --border:        #1a1a1a;
  --border-strong: #2a2a2a;

  --accent:        #1b944b;
  --accent-strong: #239e54;
  --accent-soft:   rgba(27, 148, 75, 0.16);

  --hover:    rgba(255, 255, 255, 0.04);
  --active:   rgba(255, 255, 255, 0.07);
  --focus:    rgba(27, 148, 75, 0.55);

  --danger:       #d65a5a;
  --danger-soft:  rgba(214, 90, 90, 0.16);
  --warning:      #d4a93f;
  --warning-soft: rgba(212, 169, 63, 0.16);

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.65);

  --color-scheme:  dark;
  --picker-invert: 0.6;

  --surface-hero: #1b944b;
  --ink-hero:     #ffffff;
  --surface-inset: #1a1a1a;
  --ink-inset:     #f5f5f6;

}

:root[data-theme="kawaii"] {
  --bg:        #fef5f8;
  --surface:   #ffffff;
  --surface-2: #fbe2eb;

  --ink:       #3d1f2c;
  --ink-2:     #6e4856;
  --ink-3:     #9b7382;
  --ink-disabled: #d4b5c0;

  --border:        #f0d5e0;
  --border-strong: #d8a9bd;

  --accent:        #e84a8e;
  --accent-strong: #c93675;
  --accent-soft:   rgba(232, 74, 142, 0.14);

  --hover:    rgba(232, 74, 142, 0.05);
  --active:   rgba(232, 74, 142, 0.09);
  --focus:    rgba(232, 74, 142, 0.45);

  --danger:       #c4475e;
  --danger-soft:  rgba(196, 71, 94, 0.12);
  --warning:      #f4b733;
  --warning-soft: rgba(244, 183, 51, 0.14);

  --shadow:    0 4px 12px rgba(60, 20, 35, 0.12);

  --color-scheme:  light;
  --picker-invert: 0;

  --surface-hero: #c93675;
  --ink-hero:     #ffffff;
  --surface-inset: #ffffff;
  --ink-inset:     #3d1f2c;

}