/*
 * Year of the Linux Desktop: theme tokens ("rices").
 *
 * Every theme is one block per appearance, keyed on <html data-theme data-mode>.
 * To add a theme: copy a pair of blocks, change the values, and add an entry
 * to THEMES in include/yotld/js/site.js. Layout never reads raw colours;
 * site.css only consumes the roles below.
 *
 * Roles
 *   --bg            page canvas behind the windows
 *   --panel*        the top panel and footer (chrome); may differ from the page
 *   --surface       window / pane body
 *   --surface-2     window title bars, table heads, raised rows
 *   --surface-3     controls, chips, tracks
 *   --hover         row and control hover
 *   --line          dividers and pane borders
 *   --line-strong   control borders, focusable edges
 *   --ink / -2 / -3 primary, secondary, tertiary text (all >= 4.5:1 on surface)
 *   --accent        links, focus, selection (differs from --action by hue)
 *   --action        the one filled button per task area; --on-action is its text
 *   --red … --purple  terminal hues (ANSI-ish); also the data palette
 *   --panel-accent  accent used on the panel when the chrome and page differ
 *   --win-active    border paint for the focused window (Hyprland-style)
 *   --radius / --radius-sm  pane and control corners
 */

/* ---------- Tokyo Night ---------- */
:root,
[data-theme="tokyo-night"] {
	color-scheme: dark;
	--bg: #1a1b26;
	--panel: #16161e;
	--panel-ink: #c0caf5;
	--panel-ink-2: #a9b1d6;
	--panel-line: #292e42;
	--panel-hover: #292e42;
	--surface: #1f2335;
	--surface-2: #24283b;
	--surface-3: #292e42;
	--hover: #2f354f;
	--line: #343a55;
	--line-strong: #646c8f;
	--ink: #c0caf5;
	--ink-2: #a9b1d6;
	--ink-3: #8c94c0;
	--accent: #7aa2f7;
	--action: #7aa2f7;
	--action-hover: #93b4f9;
	--on-action: #15161e;
	--red: #f7768e;
	--orange: #ff9e64;
	--yellow: #e0af68;
	--green: #9ece6a;
	--cyan: #7dcfff;
	--blue: #7aa2f7;
	--purple: #bb9af7;
	--sel: #33467c;
	--win-active: linear-gradient(135deg, #7aa2f7, #bb9af7 55%, #7dcfff);
	--radius: 10px;
	--radius-sm: 6px;
	--edge: rgb(255 255 255 / 0.03);
	--shadow: 0 18px 48px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.3);
}

[data-theme="tokyo-night"][data-mode="light"] {
	color-scheme: light;
	--bg: #d0d5e3;
	--panel: #c4c8da;
	--panel-ink: #2b3150;
	--panel-ink-2: #454c6e;
	--panel-line: #b4b9cf;
	--panel-hover: #b5bad1;
	--surface: #e1e2e7;
	--surface-2: #d8dae4;
	--surface-3: #ced2e0;
	--hover: #c8ccdc;
	--line: #bcc1d4;
	--line-strong: #787fa1;
	--ink: #2b3150;
	--ink-2: #454c6e;
	--ink-3: #525880;
	--accent: #1e53c2;
	--action: #2459c9;
	--action-hover: #1b4aad;
	--on-action: #ffffff;
	--red: #b40e43;
	--orange: #944300;
	--yellow: #755500;
	--green: #396518;
	--cyan: #006284;
	--blue: #1e53c2;
	--purple: #6d3fba;
	--sel: #b6c3ec;
	--win-active: linear-gradient(135deg, #2e7de9, #9854f1 60%, #007197);
	--edge: rgb(255 255 255 / 0.5);
	--shadow: 0 18px 48px rgb(40 48 90 / 0.22), 0 2px 6px rgb(40 48 90 / 0.14);
}

/* ---------- Catppuccin (Mocha / Latte) ---------- */
[data-theme="catppuccin"] {
	color-scheme: dark;
	--bg: #181825;
	--panel: #11111b;
	--panel-ink: #cdd6f4;
	--panel-ink-2: #bac2de;
	--panel-line: #262637;
	--panel-hover: #313244;
	--surface: #1e1e2e;
	--surface-2: #262637;
	--surface-3: #313244;
	--hover: #3a3b52;
	--line: #34354a;
	--line-strong: #65697e;
	--ink: #cdd6f4;
	--ink-2: #bac2de;
	--ink-3: #949ab3;
	--accent: #89b4fa;
	--action: #cba6f7;
	--action-hover: #d7baf9;
	--on-action: #11111b;
	--red: #f38ba8;
	--orange: #fab387;
	--yellow: #f9e2af;
	--green: #a6e3a1;
	--cyan: #89dceb;
	--blue: #89b4fa;
	--purple: #cba6f7;
	--sel: #3b3d56;
	--win-active: linear-gradient(135deg, #cba6f7, #f5c2e7 45%, #89b4fa);
	--radius: 14px;
	--radius-sm: 8px;
	--edge: rgb(255 255 255 / 0.03);
	--shadow: 0 18px 48px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
}

[data-theme="catppuccin"][data-mode="light"] {
	color-scheme: light;
	--bg: #dce0e8;
	--panel: #ccd0da;
	--panel-ink: #4c4f69;
	--panel-ink-2: #555870;
	--panel-line: #bcc0cc;
	--panel-hover: #bcc0cc;
	--surface: #e6e9ef;
	--surface-2: #dde1e9;
	--surface-3: #d2d6e0;
	--hover: #c9cdd8;
	--line: #c3c7d2;
	--line-strong: #818595;
	--ink: #4c4f69;
	--ink-2: #545770;
	--ink-3: #595c74;
	--accent: #1353d1;
	--action: #8839ef;
	--action-hover: #7424dd;
	--on-action: #ffffff;
	--red: #bd0030;
	--orange: #a63800;
	--yellow: #8a4e00;
	--green: #1f6c05;
	--cyan: #006486;
	--blue: #1353d1;
	--purple: #792adc;
	--sel: #c7cff0;
	--win-active: linear-gradient(135deg, #8839ef, #ea76cb 45%, #1e66f5);
	--edge: rgb(255 255 255 / 0.5);
	--shadow: 0 18px 48px rgb(76 79 105 / 0.2), 0 2px 6px rgb(76 79 105 / 0.14);
}

/* ---------- Dracula (Dracula / Alucard) ---------- */
[data-theme="dracula"] {
	color-scheme: dark;
	--bg: #21222c;
	--panel: #191a21;
	--panel-ink: #f8f8f2;
	--panel-ink-2: #c9cbdb;
	--panel-line: #2c2e3a;
	--panel-hover: #343746;
	--surface: #282a36;
	--surface-2: #2e303f;
	--surface-3: #343746;
	--hover: #3c3f52;
	--line: #3b3e50;
	--line-strong: #6272a4;
	--ink: #f8f8f2;
	--ink-2: #c9cbdb;
	--ink-3: #a2aacc;
	--accent: #8be9fd;
	--action: #bd93f9;
	--action-hover: #cba8fb;
	--on-action: #191a21;
	--red: #ff7571;
	--orange: #ffb86c;
	--yellow: #f1fa8c;
	--green: #50fa7b;
	--cyan: #8be9fd;
	--blue: #bd93f9;
	--purple: #ff79c6;
	--sel: #44475a;
	--win-active: linear-gradient(135deg, #bd93f9, #ff79c6 60%, #ffb86c);
	--radius: 8px;
	--radius-sm: 5px;
	--edge: rgb(255 255 255 / 0.03);
	--shadow: 0 18px 48px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
}

[data-theme="dracula"][data-mode="light"] {
	color-scheme: light;
	--bg: #d8d6e4;
	--panel: #cac8da;
	--panel-ink: #1f1f2e;
	--panel-ink-2: #3f3c58;
	--panel-line: #bbb9cf;
	--panel-hover: #bdbbd0;
	--surface: #e3e1ec;
	--surface-2: #dcdae7;
	--surface-3: #d1cfe0;
	--hover: #c9c7da;
	--line: #c0bed3;
	--line-strong: #7f7c9e;
	--ink: #1f1f2e;
	--ink-2: #3f3c58;
	--ink-3: #55517b;
	--accent: #005f8b;
	--action: #644ac9;
	--action-hover: #5438b8;
	--on-action: #ffffff;
	--red: #ac2617;
	--orange: #934209;
	--yellow: #6c5803;
	--green: #126808;
	--cyan: #005f8b;
	--blue: #5a41bd;
	--purple: #a3144d;
	--sel: #cfcfde;
	--win-active: linear-gradient(135deg, #644ac9, #a3144d 60%, #a34d14);
	--edge: rgb(255 255 255 / 0.5);
	--shadow: 0 18px 48px rgb(40 36 70 / 0.22), 0 2px 6px rgb(40 36 70 / 0.14);
}

/* ---------- Praxical Signal (Sapphire; hybrid shell in light) ---------- */
[data-theme="signal"] {
	color-scheme: dark;
	--bg: #10131f;
	--panel: #161926;
	--panel-ink: #e3e4ed;
	--panel-ink-2: #9da4b8;
	--panel-line: #2a2e3e;
	--panel-hover: #292d3d;
	--surface: #1a1d2a;
	--surface-2: #222534;
	--surface-3: #292d3d;
	--hover: #323647;
	--line: #3a3f53;
	--line-strong: #696f88;
	--ink: #e3e4ed;
	--ink-2: #a8aec0;
	--ink-3: #9098ae;
	--accent: #79c1ff;
	--action: #2d69de;
	--action-hover: #2e6fef;
	--on-action: #ffffff;
	--red: #f76d89;
	--orange: #ff9b50;
	--yellow: #efca61;
	--green: #96d670;
	--cyan: #68def4;
	--blue: #79c1ff;
	--purple: #bb9af4;
	--sel: #203460;
	--win-active: linear-gradient(#79c1ff, #79c1ff);
	--radius: 3px;
	--radius-sm: 2px;
	--edge: rgb(255 255 255 / 0.047);
	--shadow: 0 16px 40px rgb(5 6 12 / 0.55), 0 1px 3px rgb(5 6 12 / 0.4);
}

[data-theme="signal"][data-mode="light"] {
	color-scheme: light;
	--bg: #dfe2ec;
	/* Signal's hybrid shell: chrome stays dark on a light page */
	--panel: #161926;
	--panel-ink: #e3e4ed;
	--panel-ink-2: #9da4b8;
	--panel-line: #2a2e3e;
	--panel-hover: #292d3d;
	--panel-accent: #79c1ff;
	--surface: #eceff7;
	--surface-2: #e4e7f1;
	--surface-3: #d9dcea;
	--hover: #d0d4e5;
	--line: #bcc0d2;
	--line-strong: #7f859f;
	--ink: #202333;
	--ink-2: #4e5268;
	--ink-3: #5a5e76;
	--accent: #0057b7;
	--action: #1e59cd;
	--action-hover: #1148b3;
	--on-action: #ffffff;
	--red: #b11f47;
	--orange: #a14600;
	--yellow: #7e5b00;
	--green: #296f15;
	--cyan: #006a81;
	--blue: #0057b7;
	--purple: #6635a3;
	--sel: #cfdbf5;
	--win-active: linear-gradient(#1e59cd, #1e59cd);
	--edge: rgb(255 255 255 / 0.7);
	--shadow: 0 16px 40px rgb(20 26 44 / 0.2), 0 1px 3px rgb(20 26 44 / 0.16);
}

/* Signal light keeps dark chrome, so the chrome gets Signal's dark hues */
[data-theme="signal"][data-mode="light"] :is(.sidebar, .topbar) {
	--red: #f76d89;
	--orange: #ff9b50;
	--yellow: #efca61;
	--green: #96d670;
	--cyan: #68def4;
	--blue: #79c1ff;
	--purple: #bb9af4;
}