/* Default Theme (Dark) - No class needed, this is the base */
:root {
    /* === Color Modifiers === */
    --color-lighten: rgba(255, 255, 255, 0.1);
    --color-darken: rgba(0, 0, 0, 0.1);
    --color-lighten-strong: rgba(255, 255, 255, 0.2);
    --color-darken-strong: rgba(0, 0, 0, 0.2);

    /* === Primary Colors === */
    --color-primary: #00cccc; /* Bright teal/cyan for headings, links, primary buttons */
    --color-secondary: #008080; /* Medium teal for active tabs, secondary buttons */
    --color-accent: #005959; /* Dark teal for hover states, accents */
    --color-text: #ffffff; /* White text */

    /* === Neutral Colors === */
    --color-background: #0f0f0f; /* Very dark body background for better contrast */
    --color-header-bg: #004d4d; /* Dark teal header background */
    --color-header-hover-bg: #006666; /* Brighter teal for header button hover */
    --color-header-hover-text: #ffffff; /* White text for hover state */
    --color-menu-bg: #004d4d; /* Dark teal menu background */
    --color-chat-bg: #1a1a1a; /* Dark chat area background */
    --color-chat-header-bg: #003333; /* Very dark teal chat header */
    --color-chat-user-bg: #005959; /* Dark teal for user message background */
    --color-note-bg: #1a1a1a; /* Dark notes background */
    --color-loader-bg: rgba(0, 0, 0, 0.85); /* Dark loader background */
    --color-border: #3a3a3a; /* Slightly lighter borders for better visibility */
    --color-code-bg: #252525; /* Dark code block background */
    --color-code-text: #e0e0e0; /* Light gray code text */
    --color-delete-btn: #d32f2f; /* Bright red for delete button */

    /* === Button Colors === */
    --color-button-bg: #008080; /* Brighter teal for buttons */
    --color-button-text: #ffffff; /* White text for buttons */
    --color-button-hover-bg: #00a6a6; /* Lighter teal on hover */
    --color-button-hover-text: #ffffff; /* White text for hover state */

    /* === Active Button Colors === */
    --color-button-active-bg: #004d4d; /* Darker teal for active state */
    --color-button-active-text: #ffffff; /* White text for active state */

    /* === Text Colors === */
    --color-text-primary: #E0E0E0; /* Light gray for primary text */
    --color-text-secondary: #000000; /* Black for text on light backgrounds */
    --color-heading: var(--color-primary); /* Teal headings */
    --color-link: var(--color-primary); /* Teal links */
    --color-quote: var(--color-text-primary); /* Light gray blockquotes */
    --color-table-header: var(--color-primary); /* Teal table headers */
    --color-table-cell: #cccccc; /* Light gray table cells */
    --color-button-text: #ffffff; /* White button text */

    /* === Interaction Colors === */
    --color-checkbox: #00cccc; /* Teal checkbox accent */
    --color-spinner: #ffffff; /* White spinner */

    /* === Additional Colors === */
    --color-sign-bg: #f9f9f9;
    --color-sign-heading: #333333;
    --color-sign-text: #666666;
    --color-mark-bg: #004d4d; /* Teal for <mark> elements */
    --color-blockquote-border: var(--color-secondary); /* Teal border for blockquotes */

    /* === Navigation Link Colors === */
    --color-menu-link: var(--color-text-primary); /* Light gray menu links */

    /* === Delete Hover Color === */
    --color-delete-hover-bg: #a71d2a; /* Darker red for delete button hover */

    /* === Table Header Background === */
    --color-table-header-bg: #333333; /* Dark gray for table header background */

    /* === Action Colors === */
    --color-red: #d32f2f; /* Bright red */
    --color-darkred: #b71c1c; /* Darker red for hover */

    /* === Apply Button Colors === */
    --color-apply-btn: #4CAF50; /* Green for apply buttons */
    --color-apply-btn-hover: #45A049; /* Darker green for hover state */
}

/* Light Theme - Stylish light background with greenish/teal accents */
.light-theme {
    /* === Primary Colors === */
    --color-primary: #008080; /* Teal for headings, links, primary buttons */
    --color-secondary: #00a6a6; /* Lighter teal for active tabs, secondary buttons */
    --color-accent: #e8f5f5; /* Very light teal for hover states, accents */
    --color-text: #1a1a1a; /* Dark text for readability */

    /* === Neutral Colors === */
    --color-background: #ffffff; /* Pure white body background */
    --color-header-bg: #ffffff; /* White header background */
    --color-header-hover-bg: #f0f8f8; /* Very light teal for header button hover */
    --color-header-hover-text: #008080; /* Teal text for hover state */
    --color-menu-bg: #ffffff; /* White menu background */
    --color-chat-bg: #fafafa; /* Off-white chat area */
    --color-chat-header-bg: #f5f5f5; /* Light gray chat header */
    --color-chat-user-bg: #e8f5f5; /* Light teal for user messages */
    --color-note-bg: #ffffff; /* White notes background */
    --color-loader-bg: rgba(255, 255, 255, 0.95); /* White loader background */
    --color-border: #d0e0e0; /* Light teal-gray borders */
    --color-code-bg: #f5f8f8; /* Very light gray-teal for code blocks */
    --color-code-text: #1a1a1a; /* Dark text for code */
    --color-delete-btn: #d32f2f; /* Red for delete button */

    /* === Button Colors === */
    --color-button-bg: #008080; /* Teal for buttons */
    --color-button-text: #ffffff; /* White text for buttons */
    --color-button-hover-bg: #006666; /* Darker teal on hover */
    --color-button-hover-text: #ffffff; /* White text for hover state */

    /* === Active Button Colors === */
    --color-button-active-bg: #006666; /* Darker teal for active state */
    --color-button-active-text: #ffffff; /* White text for active state */

    /* === Text Colors === */
    --color-text-primary: #1a1a1a; /* Dark text for primary content */
    --color-text-secondary: #ffffff; /* White for text on dark backgrounds */
    --color-heading: var(--color-primary); /* Teal headings */
    --color-link: var(--color-primary); /* Teal links */
    --color-quote: #4a4a4a; /* Medium gray for blockquotes */
    --color-table-header: var(--color-primary); /* Teal table headers */
    --color-table-cell: #666666; /* Medium gray table cells */
    --color-button-text: #ffffff; /* White button text */

    /* === Interaction Colors === */
    --color-checkbox: #008080; /* Teal checkbox accent */
    --color-spinner: #008080; /* Teal spinner */

    /* === Additional Colors === */
    --color-sign-bg: #ffffff;
    --color-sign-heading: #008080;
    --color-sign-text: #666666;
    --color-mark-bg: #e8f5f5; /* Light teal for <mark> elements */
    --color-blockquote-border: var(--color-secondary); /* Teal border for blockquotes */

    /* === Navigation Link Colors === */
    --color-menu-link: var(--color-text-primary); /* Dark menu links */

    /* === Delete Hover Color === */
    --color-delete-hover-bg: #b71c1c; /* Darker red for delete button hover */

    /* === Table Header Background === */
    --color-table-header-bg: #f5f8f8; /* Very light gray-teal for table header background */

    /* === Action Colors === */
    --color-red: #d32f2f; /* Bright red */
    --color-darkred: #b71c1c; /* Darker red for hover */

    /* === Apply Button Colors === */
    --color-apply-btn: #4CAF50; /* Green for apply buttons */
    --color-apply-btn-hover: #45A049; /* Darker green for hover state */
}

/* E-ink Theme - High contrast black/white optimized for e-ink displays */
.eink-theme {
    /* === Primary Colors === */
    --color-primary: #000000; /* Pure black for primary elements */
    --color-secondary: #000000; /* Black for secondary elements */
    --color-accent: #ffffff; /* White for accents */
    --color-text: #000000; /* Black text */

    /* === Neutral Colors === */
    --color-background: #ffffff; /* Pure white background */
    --color-header-bg: #ffffff; /* White header background */
    --color-header-hover-bg: #f0f0f0; /* Very light gray for header button hover */
    --color-header-hover-text: #000000; /* Black text for hover state */
    --color-menu-bg: #ffffff; /* White menu background */
    --color-chat-bg: #ffffff; /* White chat area */
    --color-chat-header-bg: #f5f5f5; /* Very light gray chat header */
    --color-chat-user-bg: #f0f0f0; /* Light gray for user messages */
    --color-note-bg: #ffffff; /* White notes background */
    --color-loader-bg: rgba(255, 255, 255, 0.95); /* White loader background */
    --color-border: #000000; /* Pure black borders for maximum contrast */
    --color-code-bg: #f5f5f5; /* Very light gray for code blocks */
    --color-code-text: #000000; /* Black text for code */
    --color-delete-btn: #000000; /* Black for delete button (high contrast) */

    /* === Button Colors === */
    --color-button-bg: #000000; /* Black for buttons */
    --color-button-text: #ffffff; /* White text for buttons */
    --color-button-hover-bg: #333333; /* Dark gray on hover */
    --color-button-hover-text: #ffffff; /* White text for hover state */

    /* === Active Button Colors === */
    --color-button-active-bg: #000000; /* Black for active state */
    --color-button-active-text: #ffffff; /* White text for active state */

    /* === Text Colors === */
    --color-text-primary: #000000; /* Black for primary text */
    --color-text-secondary: #ffffff; /* White for text on dark backgrounds */
    --color-heading: #000000; /* Black headings */
    --color-link: #000000; /* Black links */
    --color-quote: #000000; /* Black for blockquotes */
    --color-table-header: #000000; /* Black table headers */
    --color-table-cell: #000000; /* Black table cells */
    --color-button-text: #ffffff; /* White button text */

    /* === Interaction Colors === */
    --color-checkbox: #000000; /* Black checkbox accent */
    --color-spinner: #000000; /* Black spinner */

    /* === Additional Colors === */
    --color-sign-bg: #ffffff;
    --color-sign-heading: #000000;
    --color-sign-text: #000000;
    --color-mark-bg: #f0f0f0; /* Light gray for <mark> elements */
    --color-blockquote-border: #000000; /* Black border for blockquotes */

    /* === Navigation Link Colors === */
    --color-menu-link: #000000; /* Black menu links */

    /* === Delete Hover Color === */
    --color-delete-hover-bg: #333333; /* Dark gray for delete button hover */

    /* === Table Header Background === */
    --color-table-header-bg: #f5f5f5; /* Very light gray for table header background */

    /* === Action Colors === */
    --color-red: #000000; /* Black for high contrast */
    --color-darkred: #333333; /* Dark gray for hover (slightly visible) */

    /* === Apply Button Colors === */
    --color-apply-btn: #000000; /* Black for apply buttons */
    --color-apply-btn-hover: #333333; /* Dark gray for hover state */
}