/* Default Light Theme */
:root {
    /* Custom Light Mode Colors */
    --bg-color: #ffffff;
    --text-color: #111827;
    --content-bg-color: #f3f3f3;
    --input-focus-border-color: #285e8e;
    --card-bg: #f9fafb;
    --headline-bg-color: #b4d3ed80;
    --sub-headline-bg-color: #bbbbbb80;
    --border-color: #e5e7eb;
    --card-border-color: #67b1ff;
    --primary-color: #2563eb;
    --navbar-bg-color: #285E8E;
    --navbar-text-color: #DDDEDF;
    --navbar-border-color: #e7e7e7;
    --navbar-hover-text-color: #fff;
    --navbar-focus-text-color: #333;
    --navbar-focus-bg-color: #e7e7e7;
    --dropdown-bg-color: #fff;
    --dropdown-text-color: #333;
    --dropdown-border-color: #ccc;
    --dropdown-item-hover-text-color: #333;
    --dropdown-item-hover-bg-color: #e7e7e7;
    --panel-light-bg-color: #f8f8f8;
    --panel-gray-bg-color: #f3f3f3;
    --panel-border-color: #e3e3e3;
    /* Bootstrap Light Mode Colors */
    /* Core */
    --bg: #ffffff;
    --text: #212529;
    --muted-text: #777;
    /* Surface */
    --surface: #f5f5f5;
    --surface-alt: #ffffff;
    /* Border */
    --border: #dddddd;
    --border-light: #eeeeee;
    /* Brand */
    --primary: #337ab7;
    --success: #5cb85c;
    --info: #5bc0de;
    --warning: #f0ad4e;
    --danger: #d9534f;
    /* Inputs */
    --input-bg: #ffffff;
    --input-text: #555;
    --input-border: #ccc;
    --input-placeholder: #999;
    /* Table */
    --table-header-bg: #f9f9f9;
    --table-row-hover: #f5f5f5;
    /* Link */
    --link: #337ab7;
    --link-hover: #23527c;
    /* Navbar */
    --navbar-bg: #f8f8f8;
    --navbar-text: #777;
    --navbar-border: #e7e7e7;
}

/* Dark Theme */
[data-theme="dark"] {
    /* Custom Dark Mode Colors */
    --bg-color: #212121;
    --text-color: #e5e7eb;
    --content-bg-color: #333;
    --sub-content-bg-color: #444;
    --sub-content-border-color: #555;
    --input-focus-border-color: #626283;
    --card-bg: #1e293b;
    --headline-bg-color: #86868680;
    --sub-headline-bg-color: #a3a3a380;
    --border-color: #444;
    --card-border-color: #444;
    --navbar-bg-color: #333;
    --navbar-border-color: #444;
    --navbar-text-color: #e0e0e0;
    --navbar-hover-text-color: #fff;
    --navbar-focus-text-color: #fff;
    --navbar-focus-bg-color: #535353;
    --dropdown-bg-color: #444;
    --dropdown-text-color: #e0e0e0;
    --dropdown-border-color: #737373;
    --dropdown-item-hover-text-color: #fff;
    --dropdown-item-hover-bg-color: #555;
    --table-row-hover-bg-color: #bbbbbb80;
    --panel-light-bg-color: #333;
    --dark-red-bg-color: #8B0000;
    --dark-yellow-bg-color: #808000;
    --dark-green-bg-color: #006400;
    /* Bootstrap Dark Mode Colors */
    --bg: #212121;
    --text: #ffffde;
    --muted-text: #9ca3af;
    --surface: #1e293b;
    --surface-alt: #0b1220;
    --border: #334155;
    --border-light: #475569;
    --primary: #222;
    --success: #4ade80;
    --info: #67e8f9;
    --warning: #facc15;
    --danger: #f87171;
    --input-bg: #0b1220;
    --input-text: #e5e7eb;
    --input-border: #334155;
    --input-placeholder: #94a3b8;
    --table-header-bg: #1e293b;
    --table-row-hover: #273449;
    --link: #7dd3fc;
    --link-hover: #bae6fd;
    --navbar-bg: #020617;
    --navbar-text: #e5e7eb;
    --navbar-border: #334155;
}