/* Local web adaptations of established palettes. See docs/palette-sources.md. */

/* Nord: Polar Night and Snow Storm foundations, with Frost and Aurora accents. */
:root[data-palette="nord"] {
  --bg: #2e3440;
  --surface: #3b4252;
  --surface-raised: #3b4252;
  --input: #2e3440;
  --ink: #eceff4;
  --muted: #e5e9f0;
  --subtle: #d8dee9;
  --line: #596579;
  --accent: #88c0d0;
  --accent-ink: #25313d;
  --accent-tint: #334852;
  --blue: #8fbcbb;
  --amber: #ebcb8b;
  --heading-surface: #3b4252;
  --form-surface: #343d4b;
  --output-surface: #272e38;
  --hero-surface: #354754;
  --tile-word: #3a4250;
  --tile-subnet: #334856;
  --tile-key: #453f42;
  --purple: var(--accent);
  --orange: var(--amber);
  --scrim: #1f2530cc;
}
:root[data-palette="nord"][data-theme="light"] {
  --bg: #eceff4;
  --surface: #f8fafc;
  --surface-raised: #d8dee9;
  --input: #ffffff;
  --ink: #2e3440;
  --muted: #3b4252;
  --subtle: #4c566a;
  --line: #bcc5d4;
  --accent: #3e6282;
  --accent-ink: #ffffff;
  --accent-tint: #d5e5eb;
  --blue: #315d66;
  --amber: #775627;
  --heading-surface: #d8dee9;
  --form-surface: #f4f6fa;
  --output-surface: #e5e9f0;
  --hero-surface: #dbe8eb;
  --tile-word: #e0e6ee;
  --tile-subnet: #d8e8ed;
  --tile-key: #eee4d7;
  --purple: var(--accent);
  --orange: var(--amber);
  --scrim: #29374999;
}
.swatch-nord {
  background: linear-gradient(
    135deg,
    #88c0d0 0 38%,
    #2e3440 38% 72%,
    #ebcb8b 72%
  );
}

/* Dracula Classic in dark mode; Alucard Classic foundations in light mode. */
:root[data-palette="dracula"] {
  --bg: #282a36;
  --surface: #343746;
  --surface-raised: #373a4a;
  --input: #21222c;
  --ink: #f8f8f2;
  --muted: #e7e4f2;
  --subtle: #c5c8de;
  --line: #6272a4;
  --accent: #bd93f9;
  --accent-ink: #241b33;
  --accent-tint: #40314f;
  --blue: #8be9fd;
  --amber: #50fa7b;
  --heading-surface: #3b324b;
  --form-surface: #303344;
  --output-surface: #21222c;
  --hero-surface: #3e2d43;
  --tile-word: #3d3150;
  --tile-subnet: #233c46;
  --tile-key: #3c3d2e;
  --purple: var(--accent);
  --orange: var(--amber);
  --scrim: #191a21cc;
}
:root[data-palette="dracula"][data-theme="light"] {
  --bg: #fffbeb;
  --surface: #fffdf5;
  --surface-raised: #efeddc;
  --input: #fffdf5;
  --ink: #1f1f1f;
  --muted: #5a5648;
  --subtle: #625d44;
  --line: #c5c4bc;
  --accent: #644ac9;
  --accent-ink: #ffffff;
  --accent-tint: #e6dff4;
  --blue: #03658f;
  --amber: #126b08;
  --heading-surface: #dedccf;
  --form-surface: #fffbeb;
  --output-surface: #edebf4;
  --hero-surface: #efeddc;
  --tile-word: #e8e0f4;
  --tile-subnet: #dbeaf0;
  --tile-key: #e1ecd8;
  --purple: var(--accent);
  --orange: var(--amber);
  --scrim: #302b4599;
}
.swatch-dracula {
  background: linear-gradient(
    135deg,
    #bd93f9 0 38%,
    #282a36 38% 72%,
    #50fa7b 72%
  );
}

/* Catppuccin Mocha in dark mode and Latte in light mode; pastel accents remain distinct. */
:root[data-palette="catppuccin"] {
  --bg: #1e1e2e;
  --surface: #313244;
  --surface-raised: #3b3e52;
  --input: #181825;
  --ink: #cdd6f4;
  --muted: #c6cde6;
  --subtle: #bac2de;
  --line: #585b70;
  --accent: #cba6f7;
  --accent-ink: #241d32;
  --accent-tint: #443550;
  --blue: #89b4fa;
  --amber: #fab387;
  --heading-surface: #3b304c;
  --form-surface: #313244;
  --output-surface: #181825;
  --hero-surface: #35314a;
  --tile-word: #40344d;
  --tile-subnet: #293d4a;
  --tile-key: #423a33;
  --purple: var(--accent);
  --orange: var(--amber);
  --scrim: #11111bcc;
}
:root[data-palette="catppuccin"][data-theme="light"] {
  --bg: #eff1f5;
  --surface: #f9faff;
  --surface-raised: #e6e9ef;
  --input: #ffffff;
  --ink: #4c4f69;
  --muted: #5c5f77;
  --subtle: #5c5f77;
  --line: #bcc0cc;
  --accent: #7829d7;
  --accent-ink: #ffffff;
  --accent-tint: #e8dcf8;
  --blue: #1b56cb;
  --amber: #a9440d;
  --heading-surface: #e9e0f4;
  --form-surface: #f8f7fc;
  --output-surface: #e7eff9;
  --hero-surface: #f2e4e6;
  --tile-word: #eadef7;
  --tile-subnet: #dfebf9;
  --tile-key: #f5e3d6;
  --purple: var(--accent);
  --orange: var(--amber);
  --scrim: #31324499;
}
.swatch-catppuccin {
  background: linear-gradient(
    135deg,
    #cba6f7 0 38%,
    #1e1e2e 38% 72%,
    #fab387 72%
  );
}

/* Solarized uses its blue-green dark base and warm paper light base, with adjusted text contrast. */
:root[data-palette="solarized"] {
  --bg: #002b36;
  --surface: #073642;
  --surface-raised: #124451;
  --input: #00242d;
  --ink: #eee8d5;
  --muted: #c5c9b7;
  --subtle: #b3c0b5;
  --line: #41616a;
  --accent: #d9ac36;
  --accent-ink: #2a260e;
  --accent-tint: #3c432c;
  --blue: #69b8ed;
  --amber: #78c6b8;
  --heading-surface: #23434c;
  --form-surface: #073642;
  --output-surface: #002b36;
  --hero-surface: #304239;
  --tile-word: #38422b;
  --tile-subnet: #123f50;
  --tile-key: #493c2c;
  --purple: var(--accent);
  --orange: var(--amber);
  --scrim: #001b24cc;
}
:root[data-palette="solarized"][data-theme="light"] {
  --bg: #fdf6e3;
  --surface: #fffbef;
  --surface-raised: #eee8d5;
  --input: #fffdf6;
  --ink: #073642;
  --muted: #4f656d;
  --subtle: #53676c;
  --line: #bdc2b2;
  --accent: #7a5a00;
  --accent-ink: #ffffff;
  --accent-tint: #ebe1bb;
  --blue: #1a6397;
  --amber: #186d66;
  --heading-surface: #e9e2ca;
  --form-surface: #fdf6e3;
  --output-surface: #f1ecd9;
  --hero-surface: #e5ecdf;
  --tile-word: #ebe4c6;
  --tile-subnet: #dce8e7;
  --tile-key: #f0dfcc;
  --purple: var(--accent);
  --orange: var(--amber);
  --scrim: #29444999;
}
.swatch-solarized {
  background: linear-gradient(
    135deg,
    #d9ac36 0 38%,
    #002b36 38% 72%,
    #2aa198 72%
  );
}

/* Gruvbox retains its warm charcoal, parchment, yellow, aqua, and orange identity. */
:root[data-palette="gruvbox"] {
  --bg: #282828;
  --surface: #3c3836;
  --surface-raised: #45413b;
  --input: #1d2021;
  --ink: #fbf1c7;
  --muted: #ebdbb2;
  --subtle: #d5c4a1;
  --line: #665c54;
  --accent: #fabd2f;
  --accent-ink: #322b12;
  --accent-tint: #4b422b;
  --blue: #8ec07c;
  --amber: #fe9d52;
  --heading-surface: #4b3d2a;
  --form-surface: #3c3836;
  --output-surface: #1d2021;
  --hero-surface: #3d4328;
  --tile-word: #4c3e24;
  --tile-subnet: #2d423b;
  --tile-key: #4c3427;
  --purple: var(--accent);
  --orange: var(--amber);
  --scrim: #1d2021cc;
}
:root[data-palette="gruvbox"][data-theme="light"] {
  --bg: #fbf1c7;
  --surface: #f9f5d7;
  --surface-raised: #ebdbb2;
  --input: #fff9e3;
  --ink: #282828;
  --muted: #3c3836;
  --subtle: #504945;
  --line: #bdae93;
  --accent: #9f3403;
  --accent-ink: #ffffff;
  --accent-tint: #ecd9ad;
  --blue: #076678;
  --amber: #665f0b;
  --heading-surface: #eadbb4;
  --form-surface: #fbf1c7;
  --output-surface: #ece8ce;
  --hero-surface: #e4dfba;
  --tile-word: #ede1b4;
  --tile-subnet: #dce4cb;
  --tile-key: #efd8b9;
  --purple: var(--accent);
  --orange: var(--amber);
  --scrim: #3c383699;
}
.swatch-gruvbox {
  background: linear-gradient(
    135deg,
    #fabd2f 0 38%,
    #282828 38% 72%,
    #8ec07c 72%
  );
}

/* Tokyo Night uses the upstream Night foundations and a contrast-adjusted Day palette. */
:root[data-palette="tokyo-night"] {
  --bg: #1a1b26;
  --surface: #24283b;
  --surface-raised: #292e42;
  --input: #16161e;
  --ink: #c0caf5;
  --muted: #a9b1d6;
  --subtle: #a9b1d6;
  --line: #545c7e;
  --accent: #7aa2f7;
  --accent-ink: #162443;
  --accent-tint: #2b3753;
  --blue: #7dcfff;
  --amber: #ff9e64;
  --heading-surface: #263451;
  --form-surface: #24283b;
  --output-surface: #16161e;
  --hero-surface: #302945;
  --tile-word: #342b4a;
  --tile-subnet: #1d3448;
  --tile-key: #3d3431;
  --purple: var(--accent);
  --orange: var(--amber);
  --scrim: #0c0e14cc;
}
:root[data-palette="tokyo-night"][data-theme="light"] {
  --bg: #e1e2e7;
  --surface: #f4f5fa;
  --surface-raised: #d5d9e5;
  --input: #f8f9ff;
  --ink: #233462;
  --muted: #43558c;
  --subtle: #485a86;
  --line: #acb9d5;
  --accent: #2453a6;
  --accent-ink: #ffffff;
  --accent-tint: #d5e0f6;
  --blue: #006180;
  --amber: #73532b;
  --heading-surface: #cdd7ef;
  --form-surface: #ecedf5;
  --output-surface: #e5edf6;
  --hero-surface: #ddd7ef;
  --tile-word: #e1d9f1;
  --tile-subnet: #d2e5ef;
  --tile-key: #ecdfcb;
  --purple: var(--accent);
  --orange: var(--amber);
  --scrim: #1b2d5c99;
}
.swatch-tokyo-night {
  background: linear-gradient(
    135deg,
    #7aa2f7 0 38%,
    #1a1b26 38% 72%,
    #ff9e64 72%
  );
}