/* COPad 25 Themes */

/* Theme 1: Classic */
body.yin.theme-1 { --tp-bg: #fdfdfd; --tp-fg: #111111; --tp-accent: #00bfff; }
body.yang.theme-1 { --tp-bg: #111111; --tp-fg: #fafafa; --tp-accent: #00bfff; }

/* Theme 2: Crimson */
body.yin.theme-2 { --tp-bg: #fdf5f5; --tp-fg: #3a0000; --tp-accent: #dc143c; }
body.yang.theme-2 { --tp-bg: #2a0000; --tp-fg: #ffeaea; --tp-accent: #dc143c; }

/* Theme 3: Forest */
body.yin.theme-3 { --tp-bg: #f5fdf5; --tp-fg: #003a00; --tp-accent: #228b22; }
body.yang.theme-3 { --tp-bg: #002a00; --tp-fg: #eaffea; --tp-accent: #228b22; }

/* Theme 4: Amber */
body.yin.theme-4 { --tp-bg: #fdfbf5; --tp-fg: #3a2a00; --tp-accent: #ff8c00; }
body.yang.theme-4 { --tp-bg: #2a2000; --tp-fg: #fff8ea; --tp-accent: #ff8c00; }

/* Theme 5: Violet */
body.yin.theme-5 { --tp-bg: #f8f5fd; --tp-fg: #2a003a; --tp-accent: #8a2be2; }
body.yang.theme-5 { --tp-bg: #1a002a; --tp-fg: #f0eaff; --tp-accent: #8a2be2; }

/* Theme 6: Slate */
body.yin.theme-6 { --tp-bg: #f5f8fa; --tp-fg: #001a2a; --tp-accent: #4682b4; }
body.yang.theme-6 { --tp-bg: #00111f; --tp-fg: #e6f0f8; --tp-accent: #4682b4; }

/* Theme 7: Coral */
body.yin.theme-7 { --tp-bg: #fdf5f5; --tp-fg: #3a1a1a; --tp-accent: #ff7f50; }
body.yang.theme-7 { --tp-bg: #2a1010; --tp-fg: #ffefe9; --tp-accent: #ff7f50; }

/* Theme 8: Teal */
body.yin.theme-8 { --tp-bg: #f5fdfb; --tp-fg: #003a30; --tp-accent: #20b2aa; }
body.yang.theme-8 { --tp-bg: #002a22; --tp-fg: #eafffb; --tp-accent: #20b2aa; }

/* Theme 9: Rose */
body.yin.theme-9 { --tp-bg: #fdf5f8; --tp-fg: #3a0020; --tp-accent: #ff69b4; }
body.yang.theme-9 { --tp-bg: #2a0018; --tp-fg: #ffeaf2; --tp-accent: #ff69b4; }

/* Theme 10: Olive */
body.yin.theme-10 { --tp-bg: #f8fdf0; --tp-fg: #2a3000; --tp-accent: #6b8e23; }
body.yang.theme-10 { --tp-bg: #1f2200; --tp-fg: #f5ffea; --tp-accent: #6b8e23; }

/* Theme 11: Indigo */
body.yin.theme-11 { --tp-bg: #f5f5fd; --tp-fg: #1a003a; --tp-accent: #4b0082; }
body.yang.theme-11 { --tp-bg: #10002a; --tp-fg: #eaeaff; --tp-accent: #4b0082; }

/* Theme 12: Gold */
body.yin.theme-12 { --tp-bg: #fdfbf0; --tp-fg: #3a3000; --tp-accent: #daa520; }
body.yang.theme-12 { --tp-bg: #2a2200; --tp-fg: #fffaea; --tp-accent: #daa520; }

/* Theme 13: Lime */
body.yin.theme-13 { --tp-bg: #f8fdf5; --tp-fg: #1a3a00; --tp-accent: #32cd32; }
body.yang.theme-13 { --tp-bg: #122a00; --tp-fg: #f0ffe6; --tp-accent: #32cd32; }

/* Theme 14: Turquoise */
body.yin.theme-14 { --tp-bg: #f5fdfd; --tp-fg: #003a3a; --tp-accent: #40e0d0; }
body.yang.theme-14 { --tp-bg: #002a2a; --tp-fg: #eaffff; --tp-accent: #40e0d0; }

/* Theme 15: Plum */
body.yin.theme-15 { --tp-bg: #fdf5fd; --tp-fg: #3a003a; --tp-accent: #dda0dd; }
body.yang.theme-15 { --tp-bg: #2a002a; --tp-fg: #ffeaff; --tp-accent: #dda0dd; }

/* Theme 16: Chocolate */
body.yin.theme-16 { --tp-bg: #fdf8f5; --tp-fg: #3a1a00; --tp-accent: #d2691e; }
body.yang.theme-16 { --tp-bg: #2a1200; --tp-fg: #fff0e6; --tp-accent: #d2691e; }

/* Theme 17: Steel */
body.yin.theme-17 { --tp-bg: #f5f7fb; --tp-fg: #0a1520; --tp-accent: #5f9ea0; }
body.yang.theme-17 { --tp-bg: #070f17; --tp-fg: #e8eef5; --tp-accent: #5f9ea0; }

/* Theme 18: Salmon */
body.yin.theme-18 { --tp-bg: #fdf5f2; --tp-fg: #3a1a10; --tp-accent: #fa8072; }
body.yang.theme-18 { --tp-bg: #2a120a; --tp-fg: #ffefea; --tp-accent: #fa8072; }

/* Theme 19: Spring */
body.yin.theme-19 { --tp-bg: #f5fdf5; --tp-fg: #003a15; --tp-accent: #00fa9a; }
body.yang.theme-19 { --tp-bg: #002a0f; --tp-fg: #eafff0; --tp-accent: #00fa9a; }

/* Theme 20: Orchid */
body.yin.theme-20 { --tp-bg: #faf5fd; --tp-fg: #2a0030; --tp-accent: #da70d6; }
body.yang.theme-20 { --tp-bg: #1f0022; --tp-fg: #f6eaff; --tp-accent: #da70d6; }

/* Theme 21: SlateDark */
body.yin.theme-21 { --tp-bg: #f8fafc; --tp-fg: #0f172a; --tp-accent: #38bdf8; }
body.yang.theme-21 { --tp-bg: #1e293b; --tp-fg: #e2e8f0; --tp-accent: #38bdf8; }

/* Theme 22: Gruvbox */
body.yin.theme-22 { --tp-bg: #fbf1c7; --tp-fg: #3c3836; --tp-accent: #d79921; }
body.yang.theme-22 { --tp-bg: #282828; --tp-fg: #ebdbb2; --tp-accent: #d79921; }

/* Theme 23: Solarized */
body.yin.theme-23 { --tp-bg: #fdf6e3; --tp-fg: #073642; --tp-accent: #268bd2; }
body.yang.theme-23 { --tp-bg: #002b36; --tp-fg: #839496; --tp-accent: #268bd2; }

/* Theme 24: Nord */
body.yin.theme-24 { --tp-bg: #eceff4; --tp-fg: #2e3440; --tp-accent: #88c0d0; }
body.yang.theme-24 { --tp-bg: #2e3440; --tp-fg: #d8dee9; --tp-accent: #88c0d0; }

/* Theme 25: Dracula */
body.yin.theme-25 { --tp-bg: #f8f8f2; --tp-fg: #282a36; --tp-accent: #bd93f9; }
body.yang.theme-25 { --tp-bg: #282a36; --tp-fg: #f8f8f2; --tp-accent: #bd93f9; }


/* Theme override rules */
body[class*="theme-"] { background: var(--tp-bg) !important; color: var(--tp-fg) !important; }
body[class*="theme-"] a { color: var(--tp-accent); }
body[class*="theme-"] a:hover { color: var(--tp-accent); text-decoration-color: var(--tp-accent); }
body[class*="theme-"] blockquote { border-left-color: var(--tp-accent); }
body[class*="theme-"] .progress { background-color: var(--tp-accent); }
body[class*="theme-"] .word-counter .progress { background-color: var(--tp-accent); }
body[class*="theme-"] .progress.complete { background-color: var(--tp-accent); opacity: .8; }

/* Scrollbar theming */
body[class*="theme-"]::-webkit-scrollbar { width: 6px; }
body[class*="theme-"]::-webkit-scrollbar-track { background: transparent; }
body[class*="theme-"]::-webkit-scrollbar-thumb { background: var(--tp-accent); border-radius: 3px; }
body[class*="theme-"]::-webkit-scrollbar-thumb:hover { opacity: .8; }
body[class*="theme-"].yin .tab.active { background: var(--tp-bg); border-color: var(--tp-accent); }
body[class*="theme-"].yang .tab.active { background: var(--tp-bg); border-color: var(--tp-accent); }
body[class*="theme-"] #tabBar { border-bottom-color: var(--tp-accent); }
body[class*="theme-"].yin #tabBar { background: var(--tp-bg); }
body[class*="theme-"].yang #tabBar { background: var(--tp-bg); }
body[class*="theme-"].yin header { background: var(--tp-bg); }
body[class*="theme-"].yang header { background: var(--tp-bg); }

/* Theming of swatches */
.theme-swatch.theme-1  { background: linear-gradient(135deg, #fdfdfd 50%, #111 50%); }
.theme-swatch.theme-2  { background: linear-gradient(135deg, #fdf5f5 50%, #3a0000 50%); }
.theme-swatch.theme-3  { background: linear-gradient(135deg, #f5fdf5 50%, #003a00 50%); }
.theme-swatch.theme-4  { background: linear-gradient(135deg, #fdfbf5 50%, #3a2a00 50%); }
.theme-swatch.theme-5  { background: linear-gradient(135deg, #f8f5fd 50%, #2a003a 50%); }
.theme-swatch.theme-6  { background: linear-gradient(135deg, #f5f8fa 50%, #001a2a 50%); }
.theme-swatch.theme-7  { background: linear-gradient(135deg, #fdf5f5 50%, #3a1a1a 50%); }
.theme-swatch.theme-8  { background: linear-gradient(135deg, #f5fdfb 50%, #003a30 50%); }
.theme-swatch.theme-9  { background: linear-gradient(135deg, #fdf5f8 50%, #3a0020 50%); }
.theme-swatch.theme-10 { background: linear-gradient(135deg, #f8fdf0 50%, #2a3000 50%); }
.theme-swatch.theme-11 { background: linear-gradient(135deg, #f5f5fd 50%, #1a003a 50%); }
.theme-swatch.theme-12 { background: linear-gradient(135deg, #fdfbf0 50%, #3a3000 50%); }
.theme-swatch.theme-13 { background: linear-gradient(135deg, #f8fdf5 50%, #1a3a00 50%); }
.theme-swatch.theme-14 { background: linear-gradient(135deg, #f5fdfd 50%, #003a3a 50%); }
.theme-swatch.theme-15 { background: linear-gradient(135deg, #fdf5fd 50%, #3a003a 50%); }
.theme-swatch.theme-16 { background: linear-gradient(135deg, #fdf8f5 50%, #3a1a00 50%); }
.theme-swatch.theme-17 { background: linear-gradient(135deg, #f5f7fb 50%, #0a1520 50%); }
.theme-swatch.theme-18 { background: linear-gradient(135deg, #fdf5f2 50%, #3a1a10 50%); }
.theme-swatch.theme-19 { background: linear-gradient(135deg, #f5fdf5 50%, #003a15 50%); }
.theme-swatch.theme-20 { background: linear-gradient(135deg, #faf5fd 50%, #2a0030 50%); }
.theme-swatch.theme-21 { background: linear-gradient(135deg, #f8fafc 50%, #0f172a 50%); }
.theme-swatch.theme-22 { background: linear-gradient(135deg, #fbf1c7 50%, #3c3836 50%); }
.theme-swatch.theme-23 { background: linear-gradient(135deg, #fdf6e3 50%, #073642 50%); }
.theme-swatch.theme-24 { background: linear-gradient(135deg, #eceff4 50%, #2e3440 50%); }
.theme-swatch.theme-25 { background: linear-gradient(135deg, #f8f8f2 50%, #282a36 50%); }

/*********************************************
 * Theme Picker Grid
 *********************************************/
.themeoverlay { margin-left: -270px; width: 540px; height: 340px; left: 50%; top: 50%; margin-top: -170px; }
.theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 10px; }
.theme-swatch { width: 100%; height: 46px; border-radius: 4px; cursor: pointer; border: 2px solid transparent; transition: transform 150ms, border-color 150ms; position: relative; box-shadow: inset 0 0 0 1px rgba(128,128,128,.2); }
.theme-swatch:hover { transform: scale(1.05); border-color: rgba(128,128,128,.5); }
.theme-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(128,128,128,.5); }
.yang .theme-swatch.active { border-color: #111; }
.theme-swatch span { position: absolute; bottom: 2px; left: 3px; font-size: 10px; background: rgba(0,0,0,.5); color: #fff; padding: 1px 4px; border-radius: 2px; pointer-events: none; }