html[data-theme="light"],
html[data-theme="auto"],
:root {
    /* ================================
       Layout and Sizing
    =================================== */
    --landscape-width: max(300px, 15vw);
    --portrait-width: min(250px, 100vw);
    --nav-height: max(2vh, 60px) !important;
    --header-height: var(--nav-height);
    --inner-min-height: calc(100vh - var(--header-height) - 2em);
    /* Z-Index */
    --leaflet-pane-z-index: 400;
    --highest-z-index: 9999;
    /* ================================
       Topbar
    =================================== */
    --topbar-background: #092249;
    --topbar-text-color: #ffffff;
    --topbar-border-bottom: none;
    /* ================================
       Sidebar
    =================================== */
    --sidebar-background: #092249;
    --sidebar-text-color: #ffffff;
    --sidebar-width-closed: 40px;
    --sidebar-width-open: max(240px, 18%);
    --sidebar-transition: width 0.75s;
    --sidebar-item-height: 50px;
    /* ================================
       Color Palette
    =================================== */
    /* Main branding color */
    --color-primary: #092249;
    /* Accent (secondary highlight) */
    --color-secondary: #5d90cc;
    /* Third color for elements */
    --color-tertiary: #ededed;
    --color-secondary-low-opa: color-mix(in srgb, var(--color-secondary) 100%, white 0%); /* Lightened secondary color */
    --color-alterative: #000053; /* Alternative color for elements */
    --color-muted: #d2d2d2; /* Muted elements */
    --color-highlight: #167f02; /* Primary highlight */
    --color-highlight-opacity: #167f0299; /* Highlight transparent */
    --color-success: #bbcf00; /* Success positive green */
    --color-success-dark: #97a709; /* Darker success green */
    --color-success-light: #bacf0077; /* Light transparent green */
    /* ================================
       Backgrounds
    =================================== */
    --background-default: #ffffff;
    --background-surface: var(--background-default);
    /* ================================
       Text Colors
    =================================== */
    /* Main readable text */
    --text-primary: #000000;
    /* Text color on hover */
    --text-primary-hover: #ffffff;
    /* Muted / subtext */
    --text-secondary: #f4f3f3;
    /* Muted text on hover */
    --text-secondary-hover: #ffffff;
    /* Alternative text color for dark backgrounds */
    --text-alternative: #ffffff;
    /* Alternative text color on hover */
    --text-alternative-hover: #ffffff;
    --text-dark: #2c2c2c; /* Darker text for light backgrounds */
    --text-dark-hover: #000053; /* Dark text on hover */
    --btn-text-color: #000000;
    --btn-text-color-light: #ffffff;
    --btn-text-color-muted: #d5d5d5; /* Button text color for muted backgrounds */
    --btn-text-primary-color: #ffffff;
    /* Button text color for secondary backgrounds */
    --btn-text-secondary-color: #f0efef;
    /* Button text color for tertiary backgrounds */
    --btn-text-tertiary-color: #000000;
    /* invert text color for dark backgrounds */
    --btn-group-background: #ffffff;
    --bs-tertiary-bg: var(--color-tertiary, #ffffff);
    /* Bootstrap 5 overrides */
    --bs-link-color: var(--btn-text-color);
    /* ================================
       Buttons
    =================================== */
    --button-background: var(--color-primary);
    --button-hover-background: var(--text-primary-hover, #ffffff);
    --button-border: solid 2px var(--color-muted);
    --button-disabled-background: var(--color-muted);
    --input-group-label-bg-color: var(--bs-tertiary-bg, #f3f3f3);
    /* ================================
       Cards, Boxes, Containers
    =================================== */
    --cta-border-color: #d4d4d4;
    --cta-border: solid 2px var(--cta-border-color);
    --card-border-radius: 5px !important;
    --box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    /* ================================
       Typography
    =================================== */
    --font-family-base: "Plus Jakarta Sans", sans-serif;
    --font-size-large: max(1.2rem, calc(6px + 0.5vw));
    --font-size-normal: max(1rem, calc(4px + 0.5vw));
    --font-size-small: max(0.8rem, calc(2px + 0.5vw));
    --font-size-smaller: max(0.7rem, calc(2px + 0.25vw));
    /* ================================
       Timing / Transitions
    =================================== */
    --transition-duration: 0.5s;
    /* ================================
       Special Derived / Mix Colors
    =================================== */
    --color-secondary-light: color-mix(
            in srgb,
            var(--color-secondary) 100%,
            white 0%
    );
    /* ================================
       Miscellaneous
      =================================== */
    --cd-logo: url("/media/public/themes/images/twinetic.svg");
    --cd-logo-width: 10rem;
}
.navbar {
    --bs-navbar-color: var(--topbar-text-color) !important;
}
.btn-top-navbar {
    background: transparent !important;
    color: var(--topbar-text-color) !important;
}
/* ================================
   Dark Mode
  =================================== */
html[data-theme="dark"] {
    --background-default: #2d3236;
    --background-surface: var(--background-default);
    --input-group-label-bg-color: var(--bs-tertiary-bg, #2b3035);
    --cta-border: solid 1px var(--cta-border-color);
    --color-primary: #0d182b; /* Main branding color */
    --color-secondary: #375477; /* Accent (secondary highlight) */
    --text-primary: #ffffff;
    --btn-text-primary-color: #ffffff;
    --text-primary-hover: #ffffff;
    --text-secondary: #b2b2b2;
    --text-secondary-hover: #d2d2d2;
    --text-dark: #ffffff;
    --text-dark-hover: #ffffff;
    --btn-text-color: #ffffff;
    --btn-text-color-light: #000000;
    --btn-group-background: var(--color-primary)
}
@media (prefers-color-scheme: dark) {
    /* ================================
   Dark Mode
  =================================== */
    html[data-theme="dark"],
    html[data-theme="auto"] {
        --background-default: #2d3236;
        --background-surface: var(--background-default);
        --input-group-label-bg-color: var(--bs-tertiary-bg, #2b3035);
        --cta-border: solid 1px var(--cta-border-color);
        --color-primary: #252930; /* Main branding color */
        --color-secondary: #375477; /* Accent (secondary highlight) */
        --text-primary: #ffffff;
        --btn-text-primary-color: #ffffff;
        --text-primary-hover: #ffffff;
        --text-secondary: #b2b2b2;
        --text-secondary-hover: #d2d2d2;
        --text-dark: #ffffff;
        --text-dark-hover: #ffffff;
        --btn-text-color: #ffffff;
        --btn-text-color-light: #000000;
        --btn-group-background: var(--color-primary)
    }
}