/* 00 theme */
:root {
  --bg-color: #f0f6ff;
  --card-bg: #fffdf9;
  --white: #ffffff;
  --cream: #f7fbff;
  --acc1: #5599ee;
  --acc1-d: #2266cc;
  --acc2: #88bbf5;
  --acc2-d: #4488dd;
  --acc-petal: #ddeeff;
  --acc-border: #aaccf5;
  --text: #0f2550;
  --muted: #4470aa;
  --plum: #071530;
  --border: var(--acc-border);
  --petal: var(--acc-petal);
  --rose: var(--acc1);
  --rose-d: var(--acc1-d);
  --lilac: var(--acc2);
  --lilac-d: var(--acc2-d);
  --tb-bg: #ffffff;
  --tb-border: var(--acc-border);
  --tb-logo: var(--plum);
  --tb-logo-acc: var(--acc1-d);
  --tb-text: var(--text);
  --tb-muted: #888888;
  --tb-btn-bg: var(--acc-petal);
  --tb-btn-border: var(--acc1-d);
  --tb-btn-hover: color-mix(in srgb, var(--acc-petal) 70%, var(--white));
  --good: #47a96b;
  --unsure: #d99022;
  --bad: #d65766;
  --good-bg: #e7f7ec;
  --unsure-bg: #fff3d8;
  --bad-bg: #fde8eb;
  --line-color: rgba(60, 120, 220, .18);
  --line-spacing: 32px;
  --card-shadow: 0 4px 20px color-mix(in srgb, var(--acc1) 14%, transparent);
  --card-shadow-hover: 0 8px 32px color-mix(in srgb, var(--acc1) 24%, transparent);
  --hl-yellow-bg: rgba(246, 217, 76, .58);
  --hl-yellow-fg: #4a3a00;
  --hl-pink-bg: rgba(244, 178, 214, .48);
  --hl-pink-fg: #4a1830;
  --hl-orange-bg: rgba(244, 163, 64, .42);
  --hl-orange-fg: #4a2500;
  --hl-blue-bg: rgba(166, 210, 255, .48);
  --hl-blue-fg: #102a52;
}
/* Light colour themes */
body[data-bg="rose"] {
  --bg-color: #fff0f3;
  --acc1: #f28baa;
  --acc1-d: #d9557d;
  --acc2: #f5b8cc;
  --acc2-d: #e07a9a;
  --acc-petal: #ffe0ea;
  --acc-border: #f5c5d5;
  --line-color: rgba(220, 100, 140, .20);
  --text: #4a1f30;
  --muted: #b06080;
  --plum: #3a1525;
}
body[data-bg="lavender"] {
  --bg-color: #f3f0ff;
  --acc1: #a98ed4;
  --acc1-d: #7c5bb5;
  --acc2: #c9b8e8;
  --acc2-d: #a98ed4;
  --acc-petal: #ede5ff;
  --acc-border: #d4c8f5;
  --line-color: rgba(140, 110, 220, .20);
  --text: #2e1f5a;
  --muted: #8070b5;
  --plum: #1e1040;
}
body[data-bg="mint"] {
  --bg-color: #f0fff8;
  --acc1: #5dc8a0;
  --acc1-d: #3aaa80;
  --acc2: #a8e0cc;
  --acc2-d: #6cbfa5;
  --acc-petal: #d8f5ec;
  --acc-border: #a8dfc8;
  --line-color: rgba(60, 180, 140, .18);
  --text: #1a3d30;
  --muted: #5a9a80;
  --plum: #0e2820;
}
body[data-bg="butter"] {
  --bg-color: #fffbf0;
  --acc1: #f0c030;
  --acc1-d: #c89a10;
  --acc2: #f5da80;
  --acc2-d: #d4b040;
  --acc-petal: #fff5cc;
  --acc-border: #f0e090;
  --line-color: rgba(200, 160, 40, .20);
  --text: #3d2e00;
  --muted: #9a7a20;
  --plum: #2a1e00;
}
body[data-bg="sky"] {
  --bg-color: #f0f6ff;
  --acc1: #5599ee;
  --acc1-d: #2266cc;
  --acc2: #88bbf5;
  --acc2-d: #4488dd;
  --acc-petal: #ddeeff;
  --acc-border: #aaccf5;
  --line-color: rgba(60, 120, 220, .18);
  --text: #0f2550;
  --muted: #4470aa;
  --plum: #071530;
}
body[data-bg="peach"] {
  --bg-color: #fff5ee;
  --acc1: #f5845a;
  --acc1-d: #d05a30;
  --acc2: #f5b890;
  --acc2-d: #e0885a;
  --acc-petal: #ffe5d5;
  --acc-border: #f5c8a8;
  --line-color: rgba(200, 110, 70, .18);
  --text: #3d1a0a;
  --muted: #a05030;
  --plum: #280f00;
}
body {
  --tb-border: var(--acc-border);
  --tb-logo: var(--plum);
  --tb-logo-acc: var(--acc1-d);
  --tb-text: var(--text);
  --tb-btn-bg: color-mix(in srgb, var(--acc-petal) 85%, var(--white));
  --tb-btn-border: var(--acc1-d);
  --tb-btn-hover: var(--acc-petal);
  --border: var(--acc-border);
  --petal: var(--acc-petal);
  --rose: var(--acc1);
  --rose-d: var(--acc1-d);
  --card-shadow: 0 4px 20px color-mix(in srgb, var(--acc1) 14%, transparent);
  --card-shadow-hover: 0 8px 32px color-mix(in srgb, var(--acc1) 24%, transparent);
}
body[data-theme="dark"] {
  --cream: var(--bg-color);
  --petal: var(--acc-petal);
  --border: var(--acc-border);
  --text: #f6eef4;
  --muted: #d2bfcb;
  --plum: #fff7fb;
  --white: var(--card-bg);
  --line-color: rgba(255, 255, 255, .08);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, .22);
  --card-shadow-hover: 0 8px 32px rgba(0, 0, 0, .28);
  --tb-bg: color-mix(in srgb, var(--bg-color) 78%, black 22%);
  --tb-border: color-mix(in srgb, var(--acc-border) 65%, white 35%);
  --tb-logo: #fff7fb;
  --tb-logo-acc: color-mix(in srgb, var(--acc1) 65%, white 35%);
  --tb-text: #fff3f8;
  --tb-muted: #dbc6d2;
  --tb-btn-bg: color-mix(in srgb, var(--card-bg) 70%, black 30%);
  --tb-btn-border: color-mix(in srgb, var(--acc-border) 70%, white 30%);
  --tb-btn-hover: color-mix(in srgb, var(--card-bg) 82%, white 18%);
}
body[data-theme="dark"][data-bg="rose"] {
  --bg-color: #3a2430;
  --card-bg: #2b1821;
  --acc-petal: #4a2c39;
  --acc-border: #7a4b60;
}
body[data-theme="dark"][data-bg="lavender"] {
  --bg-color: #2b2842;
  --card-bg: #1d1a30;
  --acc-petal: #383458;
  --acc-border: #655f90;
}
body[data-theme="dark"][data-bg="mint"] {
  --bg-color: #233731;
  --card-bg: #162621;
  --acc-petal: #2f4740;
  --acc-border: #537d70;
}
body[data-theme="dark"][data-bg="butter"] {
  --bg-color: #3c3420;
  --card-bg: #2a2414;
  --acc-petal: #4c4328;
  --acc-border: #8a7740;
}
body[data-theme="dark"][data-bg="sky"] {
  --bg-color: #213246;
  --card-bg: #16222f;
  --acc-petal: #2d4258;
  --acc-border: #53779b;
}
body[data-theme="dark"][data-bg="peach"] {
  --bg-color: #3a2a23;
  --card-bg: #291c16;
  --acc-petal: #49342c;
  --acc-border: #876252;
}