/* themes.css */

/* Base variables (used by components that don't change per theme, if any) */
:root {
    --border-radius-large: 24px; --border-radius-medium: 16px; --transition-speed: 0.3s;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --monospace-font: "Consolas", "Monaco", "Courier New", monospace; --line-number-width: 50px;
}

/* Apply background image variable and base color */
body {
    /* These are still needed as the base properties */
    background-image: var(--bg-image, none);
    background-color: var(--bg-color, #ffffff);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    /* Existing body styles */
    font-family: var(--font-family);
    color: var(--text-color);
    line-height: 1.6;
    /* Note: Transitioning filter on ::before is separate */
    transition: background-color var(--transition-speed), color var(--transition-speed), background-image var(--transition-speed);
    display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 30px 15px;
    position: relative; /* Needed for z-index stacking */
    z-index: 0; /* Ensure body is base layer */
}

/* Pseudo-element to handle the actual visual background and apply blur */
body::before {
    content: '';
    position: fixed; /* Cover the entire viewport */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* Place it behind the body content */

    /* Inherit background properties from the body */
    background-image: var(--bg-image, none);
    background-color: var(--bg-color, #ffffff);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Match body's attachment */

    /* Apply the blur using the theme variable */
    filter: blur(var(--bg-blur, 0px));

    /* Smooth transition for background properties and blur */
    transition: background-color var(--transition-speed),
                background-image var(--transition-speed),
                filter var(--transition-speed);
}


/* --- 1. Default Theme --- */
body.theme-default-light {
    --bg-color: #ffffff; --text-color: #111111; --secondary-bg: #f5f5f5;
    --border-color: #e0e0e0; --accent-color: #555555; --accent-hover: #333333;
    --link-color: #111111; --error-color: #D32F2F; --success-color: #388E3C;
    --duplicate-color: #1976D2; --warning-color: #FFA000; --progress-bg: #eeeeee;
    --switch-bg: #e0e0e0; --switch-bg-active: var(--accent-color); --switch-text-active: #ffffff;
    --line-number-bg: #f5f5f5; --line-number-text: #aaa; --line-number-border: #e0e0e0;
    --md-code-bg: rgba(128,128,128,.15); --md-pre-bg: rgba(128,128,128,.1); --md-blockquote-color: #666; --md-blockquote-border: #e0e0e0;
    --bg-image: none;
    --bg-blur: 0px;
}
body.theme-default-dark {
    --bg-color: #000000; --text-color: #e0e0e0; --secondary-bg: #111111;
    --border-color: #333333; --accent-color: #bbbbbb; --accent-hover: #dddddd;
    --link-color: #e0e0e0; --progress-bg: #222222; --error-color: #EF9A9A;
    --success-color: #A5D6A7; --duplicate-color: #90CAF9; --warning-color: #FFCC80;
    --switch-bg: #333; --switch-bg-active: var(--accent-color); --switch-text-active: #000000;
    --line-number-bg: #1a1a1a; --line-number-text: #666; --line-number-border: #333333;
    --md-code-bg: rgba(187,187,187,.15); --md-pre-bg: rgba(187,187,187,.1); --md-blockquote-color: #aaa; --md-blockquote-border: #555;
    --bg-image: none;
    --bg-blur: 0px;
}

/* --- 2. Ocean Theme --- */
body.theme-ocean-light {
    --bg-color: #e0f7fa; --text-color: #004d40; --secondary-bg: #b2ebf2;
    --border-color: #80deea; --accent-color: #00796b; --accent-hover: #004d40;
    --link-color: #006064; --error-color: #d32f2f; --success-color: #2e7d32;
    --duplicate-color: #0277bd; --warning-color: #ef6c00; --progress-bg: #b2ebf2;
    --switch-bg: #80deea; --switch-bg-active: var(--accent-color); --switch-text-active: #e0f7fa;
    --line-number-bg: #b2ebf2; --line-number-text: #006064; --line-number-border: #80deea;
    --md-code-bg: rgba(0,121,107,.1); --md-pre-bg: rgba(0,121,107,.05); --md-blockquote-color: #006064; --md-blockquote-border: #80deea;
    --bg-image: none;
    --bg-blur: 0px;
}
body.theme-ocean-dark {
    --bg-color: #001f24; --text-color: #b2ebf2; --secondary-bg: #00343d;
    --border-color: #004c56; --accent-color: #4dd0e1; --accent-hover: #80deea;
    --link-color: #80deea; --error-color: #ef9a9a; --success-color: #a5d6a7;
    --duplicate-color: #81d4fa; --warning-color: #ffcc80; --progress-bg: #00343d;
    --switch-bg: #004c56; --switch-bg-active: var(--accent-color); --switch-text-active: #001f24;
    --line-number-bg: #00343d; --line-number-text: #4dd0e1; --line-number-border: #004c56;
    --md-code-bg: rgba(77,208,225,.1); --md-pre-bg: rgba(77,208,225,.05); --md-blockquote-color: #80deea; --md-blockquote-border: #004c56;
    --bg-image: none;
    --bg-blur: 0px;
}

/* --- 3. Forest Theme --- */
body.theme-forest-light {
    --bg-color: #f1f8e9; --text-color: #33691e; --secondary-bg: #dcedc8;
    --border-color: #c5e1a5; --accent-color: #689f38; --accent-hover: #33691e;
    --link-color: #558b2f; --error-color: #c62828; --success-color: #1b5e20;
    --duplicate-color: #0d47a1; --warning-color: #e65100; --progress-bg: #dcedc8;
    --switch-bg: #c5e1a5; --switch-bg-active: var(--accent-color); --switch-text-active: #f1f8e9;
    --line-number-bg: #dcedc8; --line-number-text: #558b2f; --line-number-border: #c5e1a5;
    --md-code-bg: rgba(104,159,56,.1); --md-pre-bg: rgba(104,159,56,.05); --md-blockquote-color: #558b2f; --md-blockquote-border: #c5e1a5;
    --bg-image: none;
    --bg-blur: 0px;
}
body.theme-forest-dark {
    --bg-color: #1b2e0e; --text-color: #dcedc8; --secondary-bg: #2a4017;
    --border-color: #415f2b; --accent-color: #aed581; --accent-hover: #c5e1a5;
    --link-color: #c5e1a5; --error-color: #ef9a9a; --success-color: #a5d6a7;
    --duplicate-color: #90caf9; --warning-color: #ffcc80; --progress-bg: #2a4017;
    --switch-bg: #415f2b; --switch-bg-active: var(--accent-color); --switch-text-active: #1b2e0e;
    --line-number-bg: #2a4017; --line-number-text: #aed581; --line-number-border: #415f2b;
    --md-code-bg: rgba(174,213,129,.1); --md-pre-bg: rgba(174,213,129,.05); --md-blockquote-color: #c5e1a5; --md-blockquote-border: #415f2b;
    --bg-image: none;
    --bg-blur: 0px;
}

/* --- 4. Sunset Theme --- */
body.theme-sunset-light {
    --bg-color: #fff3e0; --text-color: #e65100; --secondary-bg: #ffe0b2;
    --border-color: #ffcc80; --accent-color: #fb8c00; --accent-hover: #e65100;
    --link-color: #ef6c00; --error-color: #b71c1c; --success-color: #1a237e;
    --duplicate-color: #311b92; --warning-color: #bf360c; --progress-bg: #ffe0b2;
    --switch-bg: #ffcc80; --switch-bg-active: var(--accent-color); --switch-text-active: #fff3e0;
    --line-number-bg: #ffe0b2; --line-number-text: #ef6c00; --line-number-border: #ffcc80;
    --md-code-bg: rgba(251,140,0,.1); --md-pre-bg: rgba(251,140,0,.05); --md-blockquote-color: #ef6c00; --md-blockquote-border: #ffcc80;
    --bg-image: none;
    --bg-blur: 0px;
}
body.theme-sunset-dark {
    --bg-color: #281a00; --text-color: #ffe0b2; --secondary-bg: #422a00;
    --border-color: #663d00; --accent-color: #ffb74d; --accent-hover: #ffcc80;
    --link-color: #ffcc80; --error-color: #ef9a9a; --success-color: #c5cae9;
    --duplicate-color: #b39ddb; --warning-color: #ffab91; --progress-bg: #422a00;
    --switch-bg: #663d00; --switch-bg-active: var(--accent-color); --switch-text-active: #281a00;
    --line-number-bg: #422a00; --line-number-text: #ffb74d; --line-number-border: #663d00;
    --md-code-bg: rgba(255,183,77,.1); --md-pre-bg: rgba(255,183,77,.05); --md-blockquote-color: #ffcc80; --md-blockquote-border: #663d00;
    --bg-image: none;
    --bg-blur: 0px;
}

/* --- 5. Pink Theme --- */
body.theme-pink-light {
    --bg-color: #fff5fa; --text-color: #a05a8c; --secondary-bg: #ffeef6;
    --border-color: #ffcdea; --accent-color: #ff9bcd; --accent-hover: #f78ac3;
    --link-color: #d675aa; --error-color: #ff8787; --success-color: #b3e8b3;
    --duplicate-color: var(--accent-color); --warning-color: #ffccbc; --progress-bg: var(--secondary-bg);
    --switch-bg: #ffcdea; --switch-bg-active: var(--accent-color); --switch-text-active: #fff5fa;
    --line-number-bg: var(--secondary-bg); --line-number-text: #d8bfd8; --line-number-border: var(--border-color);
    --md-code-bg: rgba(255, 155, 205, 0.08); --md-pre-bg: rgba(255, 238, 246, 0.5); --md-blockquote-color: #cea8e0; --md-blockquote-border: var(--border-color);
    --bg-image: none;
    --bg-blur: 0px;
}
body.theme-pink-dark {
    --bg-color: #3a1f3f; --text-color: #f8d8e8; --secondary-bg: #522d51;
    --border-color: #8f5c73; --accent-color: #ff85c1; --accent-hover: #ffa1d1;
    --link-color: #e898d0; --error-color: #ff8787; --success-color: #b3e8b3;
    --duplicate-color: var(--accent-color); --warning-color: #ffb78a; --progress-bg: var(--secondary-bg);
    --switch-bg: var(--border-color); --switch-bg-active: var(--accent-color); --switch-text-active: #3a1f3f;
    --line-number-bg: var(--secondary-bg); --line-number-text: #b0809c; --line-number-border: var(--border-color);
    --md-code-bg: rgba(255, 133, 193, 0.15); --md-pre-bg: rgba(82, 45, 81, 0.5); --md-blockquote-color: #e6a9cf; --md-blockquote-border: var(--border-color);
    --bg-image: none;
    --bg-blur: 0px;
}

/* === SPECIAL THEMES === */

/* --- 6. Terminal Theme (Dark Only) --- */
body.theme-terminal-dark {
    --bg-color: #0a0a0a; --text-color: #39ff14; --secondary-bg: #111111;
    --border-color: #222222; --accent-color: #39ff14; --accent-hover: #8aff70;
    --link-color: #39ff14; --error-color: #ff4136; --success-color: #39ff14;
    --duplicate-color: #00ffff; --warning-color: #ffff00; --progress-bg: #111111;
    --switch-bg: #222; --switch-bg-active: var(--accent-color); --switch-text-active: #0a0a0a;
    --line-number-bg: #111111; --line-number-text: #555555; --line-number-border: #222222;
    --md-code-bg: rgba(57,255,20,.1); --md-pre-bg: rgba(57,255,20,.05); --md-blockquote-color: #00dd00; --md-blockquote-border: #333;
    --font-family: var(--monospace-font);
    --bg-image: url('https://i.pinimg.com/originals/b6/e6/0c/b6e60c232eea473eb8bce612ed569cd3.gif');
    --bg-blur: 0px;
}
body.theme-terminal-dark #previewOutput { font-family: var(--monospace-font); }
body.theme-terminal-dark .markdown-body a { border-bottom-style: solid; }


/* --- 7. Synthwave Theme (Dark Only) --- */
body.theme-synthwave-dark {
    --bg-color: #1a0a2e; --text-color: #a0e8ff; --secondary-bg: #2a1a4e;
    --border-color: #4a2a7e; --accent-color: #00ffff; --accent-hover: #ffffff;
    --link-color: #ff00ff; --error-color: #ff1493; --success-color: #00ffaa;
    --duplicate-color: #0077ff; --warning-color: #fff000; --progress-bg: #2a1a4e;
    --switch-bg: #4a2a7e; --switch-bg-active: var(--accent-color); --switch-text-active: #1a0a2e;
    --line-number-bg: #2a1a4e; --line-number-text: #ff00ff; --line-number-border: #4a2a7e;
    --md-code-bg: rgba(0,255,255,.1); --md-pre-bg: rgba(74,42,126,.3); --md-blockquote-color: #00ffff; --md-blockquote-border: #ff00ff;
    --bg-image: url('https://i.pinimg.com/originals/9c/98/22/9c9822a872aadcc57e2dfb3be7866780.gif');
    background-repeat: repeat;
    background-size: auto;
    --bg-blur: 1px;
}
body.theme-synthwave-dark h1 { text-shadow: 0 0 5px var(--accent-color); }
body.theme-synthwave-dark .markdown-body a { border-bottom-style: solid; text-shadow: 0 0 3px var(--link-color); }


/* --- 8. Paper Theme (Light Only) --- */
body.theme-paper-light {
    --bg-color: #fdfaf4; --text-color: #4a4a4a; --secondary-bg: #f8f0e3;
    --border-color: #dcd0c0; --accent-color: #6a8bad; --accent-hover: #4a6b8d;
    --link-color: #6a8bad; --error-color: #c06a6a; --success-color: #6aa06a;
    --duplicate-color: #6a8bad; --warning-color: #d09a6a; --progress-bg: #f8f0e3;
    --switch-bg: #dcd0c0; --switch-bg-active: var(--accent-color); --switch-text-active: #fdfaf4;
    --line-number-bg: #f8f0e3; --line-number-text: #aaa; --line-number-border: #dcd0c0;
    --md-code-bg: rgba(106,139,173,.08); --md-pre-bg: rgba(106,139,173,.05); --md-blockquote-color: #7a7a7a; --md-blockquote-border: #dcd0c0;
    --bg-image: none;
    --bg-blur: 0px;
}
body.theme-paper-light .container { box-shadow: 0 5px 15px rgba(0,0,0,0.07); }


/* --- 9. Dracula Theme (Dark Only) --- */
body.theme-dracula-dark {
    --bg-color: #282a36; --text-color: #f8f8f2; --secondary-bg: #3a3c4e;
    --border-color: #44475a; --accent-color: #bd93f9; --accent-hover: #d7b3ff;
    --link-color: #8be9fd; --error-color: #ff5555; --success-color: #50fa7b;
    --duplicate-color: #8be9fd; --warning-color: #f1fa8c; --progress-bg: #44475a;
    --switch-bg: #44475a; --switch-bg-active: var(--accent-color); --switch-text-active: #f8f8f2;
    --line-number-bg: #282a36; --line-number-text: #6272a4; --line-number-border: #44475a;
    --md-code-bg: #44475a; --md-pre-bg: #2f313d; --md-blockquote-color: #9a9ab5; --md-blockquote-border: #6272a4;
    --bg-image: none;
    --bg-blur: 0px;
}
body.theme-dracula-dark .markdown-body a { border-bottom-style: solid; }
body.theme-dracula-dark .tab-button.active { color: #f8f8f2; }


/* --- 10. Nord Theme --- */
body.theme-nord-light {
    --bg-color: #eceff4; --text-color: #2e3440; --secondary-bg: #e5e9f0;
    --border-color: #d8dee9; --accent-color: #5e81ac; --accent-hover: #81a1c1;
    --link-color: #5e81ac; --error-color: #bf616a; --success-color: #a3be8c;
    --duplicate-color: #88c0d0; --warning-color: #ebcb8b; --progress-bg: #e5e9f0;
    --switch-bg: #d8dee9; --switch-bg-active: var(--accent-color); --switch-text-active: #eceff4;
    --line-number-bg: #e5e9f0; --line-number-text: #abb1ba; --line-number-border: #d8dee9;
    --md-code-bg: rgba(94,129,172,.1); --md-pre-bg: rgba(94,129,172,.05); --md-blockquote-color: #4c566a; --md-blockquote-border: #d8dee9;
    --bg-image: none;
    --bg-blur: 0px;
}
body.theme-nord-dark {
    --bg-color: #2e3440; --text-color: #d8dee9; --secondary-bg: #3b4252;
    --border-color: #434c5e; --accent-color: #88c0d0; --accent-hover: #8fbcbb;
    --link-color: #81a1c1; --error-color: #bf616a; --success-color: #a3be8c;
    --duplicate-color: #5e81ac; --warning-color: #ebcb8b; --progress-bg: #434c5e;
    --switch-bg: #434c5e; --switch-bg-active: var(--accent-color); --switch-text-active: #2e3440;
    --line-number-bg: #3b4252; --line-number-text: #616e88; --line-number-border: #434c5e;
    --md-code-bg: rgba(136,192,208,.1); --md-pre-bg: rgba(136,192,208,.05); --md-blockquote-color: #a0a9b8; --md-blockquote-border: #4c566a;
    --bg-image: url('../images/nord-aurora.jpg'); /* Example */
    --bg-blur: 4px;
}

/* --- 11. Solarized Theme --- */
body.theme-solarized-light {
    --bg-color: #fdf6e3; --text-color: #586e75; --secondary-bg: #eee8d5;
    --border-color: #eee8d5; --accent-color: #268bd2; --accent-hover: #2aa198;
    --link-color: #268bd2; --error-color: #dc322f; --success-color: #859900;
    --duplicate-color: #6c71c4; --warning-color: #b58900; --progress-bg: #eee8d5;
    --switch-bg: #eee8d5; --switch-bg-active: var(--accent-color); --switch-text-active: #fdf6e3;
    --line-number-bg: #eee8d5; --line-number-text: #93a1a1; --line-number-border: #eee8d5;
    --md-code-bg: rgba(38,139,210,.1); --md-pre-bg: rgba(238,232,213,.5); --md-blockquote-color: #839496; --md-blockquote-border: #eee8d5;
    --bg-image: none;
    --bg-blur: 0px;
}
body.theme-solarized-dark {
    --bg-color: #002b36; --text-color: #839496; --secondary-bg: #073642;
    --border-color: #073642; --accent-color: #268bd2; --accent-hover: #2aa198;
    --link-color: #268bd2; --error-color: #dc322f; --success-color: #859900;
    --duplicate-color: #6c71c4; --warning-color: #b58900; --progress-bg: #073642;
    --switch-bg: #073642; --switch-bg-active: var(--accent-color); --switch-text-active: #002b36;
    --line-number-bg: #073642; --line-number-text: #586e75; --line-number-border: #073642;
    --md-code-bg: rgba(38,139,210,.1); --md-pre-bg: rgba(7,54,66,.5); --md-blockquote-color: #657b83; --md-blockquote-border: #073642;
    --bg-image: none;
    --bg-blur: 0px;
}

/* --- 12. Gruvbox Theme --- */
body.theme-gruvbox-light {
    --bg-color: #fbf1c7; --text-color: #3c3836; --secondary-bg: #ebdbb2;
    --border-color: #d5c4a1; --accent-color: #458588; --accent-hover: #076678;
    --link-color: #458588; --error-color: #cc241d; --success-color: #98971a;
    --duplicate-color: #689d6a; --warning-color: #d65d0e; --progress-bg: #ebdbb2;
    --switch-bg: #d5c4a1; --switch-bg-active: var(--accent-color); --switch-text-active: #fbf1c7;
    --line-number-bg: #ebdbb2; --line-number-text: #a89984; --line-number-border: #d5c4a1;
    --md-code-bg: rgba(69,133,136,.1); --md-pre-bg: rgba(235,219,178,.5); --md-blockquote-color: #7c6f64; --md-blockquote-border: #d5c4a1;
    --bg-image: none;
    --bg-blur: 0px;
}
body.theme-gruvbox-dark {
    --bg-color: #282828; --text-color: #ebdbb2; --secondary-bg: #3c3836;
    --border-color: #504945; --accent-color: #83a598; --accent-hover: #8ec07c;
    --link-color: #83a598; --error-color: #fb4934; --success-color: #b8bb26;
    --duplicate-color: #fabd2f; --warning-color: #fe8019; --progress-bg: #504945;
    --switch-bg: #504945; --switch-bg-active: var(--accent-color); --switch-text-active: #282828;
    --line-number-bg: #3c3836; --line-number-text: #7c6f64; --line-number-border: #504945;
    --md-code-bg: rgba(131,165,152,.1); --md-pre-bg: rgba(60,56,54,.5); --md-blockquote-color: #a89984; --md-blockquote-border: #504945;
    --bg-image: none;
    --bg-blur: 0px;
}


/* --- 13. Anime Theme (Copy of Default) --- */
body.theme-anime-light {
    /* Copied from Default Light */
    --bg-color: #ffffff; --text-color: #111111; --secondary-bg: #f5f5f5;
    --border-color: #e0e0e0; --accent-color: #555555; --accent-hover: #333333;
    --link-color: #111111; --error-color: #D32F2F; --success-color: #388E3C;
    --duplicate-color: #1976D2; --warning-color: #FFA000; --progress-bg: #eeeeee;
    --switch-bg: #e0e0e0; --switch-bg-active: var(--accent-color); --switch-text-active: #ffffff;
    --line-number-bg: #f5f5f5; --line-number-text: #aaa; --line-number-border: #e0e0e0;
    --md-code-bg: rgba(128,128,128,.15); --md-pre-bg: rgba(128,128,128,.1); --md-blockquote-color: #666; --md-blockquote-border: #e0e0e0;
    /* --- Custom Background (STATIC - will be overridden by JS for reload) --- */
    --bg-image: url('https://pic.re/image');
    --bg-blur: 0px; /* No blur on the main body::before background */
}
body.theme-anime-dark {
    /* Copied from Default Dark */
    --bg-color: #000000; --text-color: #e0e0e0; --secondary-bg: #111111;
    --border-color: #333333; --accent-color: #bbbbbb; --accent-hover: #dddddd;
    --link-color: #e0e0e0; --progress-bg: #222222; --error-color: #EF9A9A;
    --success-color: #A5D6A7; --duplicate-color: #90CAF9; --warning-color: #FFCC80;
    --switch-bg: #333; --switch-bg-active: var(--accent-color); --switch-text-active: #000000;
    --line-number-bg: #1a1a1a; --line-number-text: #666; --line-number-border: #333333;
    --md-code-bg: rgba(187,187,187,.15); --md-pre-bg: rgba(187,187,187,.1); --md-blockquote-color: #aaa; --md-blockquote-border: #555;
    /* --- Custom Background (STATIC - will be overridden by JS for reload) --- */
    --bg-image: url('https://pic.re/image');
    --bg-blur: 0px; /* No blur on the main body::before background */
}

/* --- Specific Container Styles for Anime Theme --- */
body.theme-anime-light .container,
body.theme-anime-dark .container {
    /* Apply the backdrop blur effect */
    -webkit-backdrop-filter: blur(10px); /* Adjust blur amount (e.g., 10px) as needed */
    backdrop-filter: blur(10px);         /* Adjust blur amount (e.g., 10px) as needed */

    /* Ensure backdrop-filter transitions smoothly */
    transition: background-color var(--transition-speed),
                border-color var(--transition-speed),
                backdrop-filter var(--transition-speed); /* Add backdrop-filter to transition */
}

/* Set semi-transparent background for Anime Light container */
body.theme-anime-light .container {
    /* Original --secondary-bg was #f5f5f5 (rgb 245, 245, 245) */
    background-color: rgba(245, 245, 245, 0.75); /* Adjust alpha (0.75) for desired transparency */
}

/* Set semi-transparent background for Anime Dark container */
body.theme-anime-dark .container {
    /* Original --secondary-bg was #111111 (rgb 17, 17, 17) */
    background-color: rgba(17, 17, 17, 0.75); /* Adjust alpha (0.75) for desired transparency */
}