:root {
    /*Primary*/
    --primary: #0C96CA;
    --color-primary-100: #01070A;
    --color-primary-200: #02151D;
    --color-primary-300: #032430;
    --color-primary-400: #043243;
    --color-primary-500: #054056;
    --color-primary-600: #074F6A;
    --color-primary-700: #085D7D;
    --color-primary-800: #096B90;
    --color-primary-900: #0A79A3;
    /* Base */
    --color-primary-1000: #0B88B6;
    --color-primary-1100: #0C96CA;
    --color-primary-1200: #0EA4DD;
    --color-primary-1300: #0FB2F0;
    --color-primary-1400: #22B9F1;
    --color-primary-1500: #35BFF2;
    --color-primary-1600: #49C5F4;
    --color-primary-1700: #5CCBF5;
    --color-primary-1800: #6FD1F6;
    --color-primary-1900: #82D7F7;
    --color-primary-2000: #95DDF8;
    --color-primary-2100: #A9E3FA;
    --color-primary-2200: #BCEAFB;
    --color-primary-2300: #CFF0FC;
    --color-primary-2400: #E2F6FD;
    --color-primary-2500: #F5FCFE;

    --neutral-25: #fdfdfd;
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e9eaeb;
    --neutral-300: #d5d7da;
    --neutral-400: #a4a7ae;
    --neutral-500: #717680;
    --neutral-600: #535862;
    --neutral-700: #414651;
    --neutral-800: #252b37;
    --neutral-900: #181c26;
    --neutral-950: #0a0d12;

    --background-container: #FFFFFF;
    --background-hover: #c5e7ff;

    --logo-icon-color: var(--primary);

    --primary-color-hover-item: var(--background);
    --primary-border-hover-item: var(--background);
    --primary-box-shadow-hover-item: var(--background);
    --primary-background-hover-item: var(--background);

    --primary-color-selected-item: var(--background);
    --primary-border-selected-item: var(--background);
    --primary-box-shadow-selected-item: var(--background);
    --primary-background-selected-item: var(--background);

    --popup-color: var(--neutral-700);
    --popup-background-color: var(--background);
    --popup-background-hover-color: var(--background);
    --popup-box-shadow-color: rgba(37, 85, 139, 0.15);

    --backdrop-background-color: rgba(0, 0, 0, 0.4);

    --modal-card-background-color: var(--background);
    --modal-card-color: var(--neutral-500);
    --modal-card-header-color: var(--neutral-950);
    --modal-card-icon-color: var(--neutral-950);
    --modal-card-box-shadow-color: var(--backdrop-background-color);
    --modal-card-border-color: var(--background);
    --modal-card-header-icon-color: var(--neutral-25);
    --modal-card-footer-icon-color: var(--neutral-25);

    --label-background-color: var(--background);
    --label-color: var(--background);
    --label-box-shadow-color: var(--background);
    --label-border-color: var(--background);

    --button-background-color: var(--primary);
    --button-background-hover-color: var(--background);
    --button-color: var(--background);
    --button-icon-color: var(--background);

    --datalist-item-selected-background-color: var(--color-primary-1200);
    --datalist-item-selected-border-background-color: var(--color-primary-1200);
    --datalist-item-hover-background-color: var(--background-hover);
    --datalist-item-hover-color: var(--background-container);
    --datalist-item-selected-color: var(--color-primary-1200);

    --datalist-item-background-color: transparent;
    --datalist-item-border-background-color: var(--color-primary-1200);
    --datalist-item-color: var(--color-primary-1200);

    --datalist-item-hover-background-color: var(--color-primary-2200);
    --datalist-item-hover-border-background-color: var(--color-primary-2200);
    --datalist-item-hover-color: var(--color-primary-1200);

    --datalist-item-selected-background-color: var(--color-primary-1200);
    --datalist-item-selected-border-background-color: var(--color-primary-1200);
    --datalist-item-selected-color: var(--background-container);

    --datalist-item-disabled-background-color: var(--neutral-400);
    --datalist-item-sdisabled-border-background-color: var(--neutral-400);
    --datalist-item-disabled-color: var(--neutral-700);


    --menu-icons-color: var(--background);
    --menu-divider-background-color: var(--neutral-300);

    --menu-parent-background-color: var(--background);
    --menu-parent-background-hover-color: var(--background);
    --menu-parent-color: var(--color-primary-500);
    --menu-parent-icon-color: var(--background);

    --menu-item-background-color: var(--primary);
    --menu-item-background-hover-color: var(--color-primary-1500);
    --menu-item-color: var(--color-primary-500);
    --menu-item-icon-color: var(--neutral-700);

    --messagebox-background-color: var(--background);
    --messagebox-background-hover-color: var(--background);
    --messagebox-color: var(--neutral-950);
    --messagebox-icon-color: var(--background);
    --messagebox-box-shadow-color: var(--background);

    --toast-background-color: var(--background);
    --toast-color: var(--neutral-950);
    --toast-box-shadow-color: rgba(0, 0, 0, 0.2);

    --toast-border-success-color: var(--color-positive);
    --toast-border-error-color: var(--color-error);
    --toast-border-warning-color: var(--color-warning);
    --toast-border-info-color: var(--primary);

    --toast-glow-success-color: var(--color-positive);
    --toast-glow-error-color: var(--color-error);
    --toast-glow-warning-color: var(--color-warning);
    --toast-glow-info-color: var(--primary);

    --messagebox-border-success-color: var(--color-positive);
    --messagebox-border-error-color: var(--color-error);
    --messagebox-border-warning-color: var(--color-warning);
    --messagebox-border-info-color: var(--primary);

    --messagebox-glow-success-color: var(--color-positive);
    --messagebox-glow-error-color: var(--color-error);
    --messagebox-glow-warning-color: var(--color-warning);
    --messagebox-glow-info-color: var(--primary);

    --messagebox-background-validation-shape-color: var(--neutral-950);

    --messagebox-background-button-success-color: var(--color-positive);
    --messagebox-background-button-error-color: var(--color-error);
    --messagebox-background-button-warning-color: var(--color-warning);
    --messagebox-background-button-info-color: var(--primary);

    --messagebox-border-button-success-color: var(--positive);
    --messagebox-border-button-error-color: var(--background);
    --messagebox-border-button-warning-color: var(--color-warning);
    --messagebox-border-button-info-color: var(--primary);

    --messagebox-button-success-color: var(--neutral-300);
    --messagebox-button-error-color: var(--neutral-300);
    --messagebox-button-warning-color: var(--background);
    --messagebox-button-info-color: var(--neutral-300);

    --overflow-content-background-color: var(--background);
    --overflow-conten-box-shadow-color: rgba(0, 0, 0, 0.4);
    --overflow-backdrop-background-color: transparent;
    --overflow-item-background-color: var(--background);
    --overflow-item-background-hover-color: var(--color-primary-1900);
    --overflow-item-color: var(--color-primary-500);
    --overflow-item-icon-color: var(--color-primary-400);

    --logout-label-color: var(--color-error);
    --logout-icon-color: var(--color-error);

    --paginationbox-background-color: transparent;
    --paginationbox-item-background-color: transparent;
    --paginationbox-item-background-selected-color: var(--primary);
    --paginationbox-item-background-hover-color: var(--background-hover);
    --paginationbox-item-color: var(--neutral-700);

    --tab-header-background-color: transparent;
    --tab-header-border-color: var(--color-primary-1500);

    --tab-wrapper-background-color: transparent;
    --tab-wrapper-color: var(--neutral-700);
    --tab-wrapper-background-hover-color: var(--color-primary-2000);
    --tab-wrapper-hover-color: black;
    --tab-wrapper-background-selected-color: var(--primary);
    --tab-wrapper-selected-color: var(--background);
    --tab-right-button-color: var(--primary);
    --tab-left-button-color: var(--primary);
    --tab-close-button-color: var(--primary);
    --tab-close-button-selected-color: var(--color-primary-1900);
    --tab-close-all-button-color: var(--primary);
    --tab-list-button-color: var(--primary);

    --tab-background-color: var(--background);
    --tab-color: var(--background);
    --tab-seperator-color: var(--background);

    --tab-item-background-color: var(--background);
    --tab-item-color: var(--background);

    --tab-list-background-color: var(--background);
    --tab-list-border-color: var(--background);
    --tab-list-color: var(--background);

    --tab-list-item-background-color: var(--background);
    --tab-list-item-color: var(--color-primary-500);
    --tab-list-item-background-hover-color: var(--color-primary-2000);
    --tab-list-item-hover-color: var(--color-primary-500);
    --tab-list-item-background-selected-color: var(--color-primary-1500);
    --tab-list-item-selected-color: var(--color-primary-500);

    --scrollbar-background-color: transparent;
    --scrollbar-color: var(--primary);

    --home-background-color: var(--color-primary-2400);
    --home-side-background-color: var(--background-container);
    --sidemenu-footer-color: var(--neutral-700);
    --sidemenu-header-color: var(--primary);

    --topbar-background-color: transparent;
    --topbar-icon-color: var(--color-primary-600);
    --topbar-grid-color: var(--neutral-950);
    --topbar-grid-button-hover-background-color: var(--background-hover);
    --topbar-grid-button-icon-hover-color: var(--primary);
    /*--topbar-grid-button-icon-color: var(--neutral-600);*/

    --seperator-background-color: var(--neutral-300);

    --card-background-color: var(--background);
    --card-box-shadow-color: var(--neutral-200);
    --card-color: var(--neutral-600);
    --card-icon-color: var(--neutral-600);

    --statuscard-background-color: var(--background);
    --statuscard-box-shadow-color: rgba(48, 78, 142, 0.12);
    --statuscard-color: var(--primary);
    --statuscard-icon-color: var(--primary);

    --chart-title-background-color: transparent;
    --chart-title-color: var(--text-color);
    --chart-icon-color: var(--neutral-300);
    --chart-title-icon-color: var(--primary);

    --status-box-shadow-color: rgba(48, 78, 142, 0.12);

    --input-background-color: var(--background);
    --icon-color: var(--color-primary-400);
    --grid-icon-color: var(--color-primary-400);
    --context-background-color: var(--background);
    --context-background-hover-color: var(--background);
    --context-background-border-color: var(--background);
    --context-background-box-shadow-color: var(--background);

    --text-color: #000000;
    --text-color-reverse: #ffffff;
    --background: #ffffff;
    /* Text */
    --color-on-primary: #ffffff;
    --color-on-background: #001a47;
    --color-on-primary-fixed: #014478;
    /* Status colors */
    --color-error: #ba1a1a;
    --color-error-tint: #ffdad6;
    --color-warning: #e8b931;
    --color-warning-tint: #fff1c2;
    --color-positive: #14ae5c;
    --color-positive-tint: #cff7d3;
    --color-red: #ef4444;
    /* Secondary & accents */
    --color-secondary: #93cbd8;
    --color-hover-item: #e9f9ff;
    /* Background / surface */
    --color-background: #d6e7ee;
    --color-background-tint: #e6f1f5;
    --color-surface-dim: #ededed;
    --color-table-header: #c5e7ff;
    --color-table-hover: #ebf7ff;
    /* Dark theme helpers (examples) */
    --dark-surface-0: #000000;
    --dark-surface-10: #1e1e1e;
    --dark-surface-20: #353535;
}

[data-theme='dark'] {
    /* Base backgrounds */
    --background: #0f111a;
    --background-container: #212330;
    --input-field: #2a2d3d;
    --background-hover: #3b3e50;
    --text-color: #ffffff;
    --text-color-reverse: #000000;

    /* Surfaces */
    --color-background: #12141e;
    --color-background-tint: #181b26;
    --color-surface-dim: #1d1f2a;
    --color-table-header: #202535;
    --color-table-hover: #2a3042;

    /* Popup, modal, backdrop */
    --modal-card-background-color: var(--input-field);
    --modal-card-color: var(--neutral-300);
    --modal-card-header-color: var(--neutral-300);
    --modal-card-icon-color: var(--neutral-300);
    --modal-card-header-icon-color: var(--neutral-300);
    --modal-card-footer-icon-color: var(--neutral-300);

    --modal-card-box-shadow-color: var(--backdrop-background-color);
    --modal-card-border-color: var(--background);

    --card-background-color: var(--background-container);
    --card-box-shadow-color: rgba(48, 78, 142, 0.12);
    --card-icon-color: var(--neutral-300);
    --card-color: var(--neutral-300);

    --grid-icon-color: var(--color-primary-100);

    --statuscard-background-color: var(--background-container);
    --statuscard-box-shadow-color: rgba(48, 78, 142, 0.12);
    --statuscard-color: var(--color-primary-1900);
    --statuscard-icon-color: var(--color-primary-1900);

    /* Buttons */
    --button-background-color: var(--primary);
    --button-background-hover-color: var(--color-primary-1200);
    --button-color: var(--color-on-primary);
    --button-icon-color: var(--text-color);

    /* Menu */
    --menu-icons-color: var(--background);
    --menu-divider-background-color: var(--background-hover);

    --menu-parent-background-color: var(--background);
    --menu-parent-background-hover-color: var(--background);
    --menu-parent-color: var(--neutral-400);
    --menu-parent-icon-color: var(--background);

    --menu-item-background-color: var(--primary);
    --menu-item-background-hover-color: var(--color-primary-700);
    --menu-item-color: var(--neutral-300);
    --menu-item-icon-color: var(--neutral-300);
    /* Inputs */
    --input-background-color: var(--neutral-100);
    --icon-color: var(--neutral-900);

    --home-background-color: #171923;
    --home-side-background-color: var(--background-container);

    /* Status */
    --color-error: #BA1A1A;
    --color-error-tint: #FFDAD6;
    --color-warning: #facc15;
    --color-warning-tint: #3b320d;
    --color-positive: #22c55e;
    --color-positive-tint: #112618;

    /* Scrollbar */
    --scrollbar-color: var(--color-primary-700);
    --scrollbar-background-color: transparent;

    --tab-header-background-color: transparent;
    --tab-header-border-color: var(--color-primary-1500);

    --tab-wrapper-background-color: transparent;
    --tab-wrapper-color: var(--neutral-50);
    --tab-wrapper-background-hover-color: var(--color-primary-2000);
    --tab-wrapper-hover-color: black;
    --tab-wrapper-background-selected-color: var(--primary);
    --tab-wrapper-selected-color: var(--neutral-25);
    --tab-right-button-color: var(--primary);
    --tab-left-button-color: var(--primary);
    --tab-close-button-color: var(--primary);
    --tab-close-button-hover-color: var(--neutral-950);
    --tab-close-button-selected-color: var(--color-primary-800);
    --tab-close-all-button-color: var(--primary);
    --tab-list-button-color: var(--primary);

    --tab-background-color: var(--background);
    --tab-color: var(--background);
    --tab-seperator-color: var(--background);

    --tab-item-background-color: var(--background);
    --tab-item-color: var(--background);

    --tab-list-background-color: var(--background-container);
    --tab-list-border-color: var(--background);
    --tab-list-color: var(--background);

    --tab-list-item-background-color: transparent;
    --tab-list-item-color: var(--neutral-300);
    --tab-list-item-background-hover-color: var(--color-primary-2000);
    --tab-list-item-hover-color: var(--color-primary-500);
    --tab-list-item-background-selected-color: var(--color-primary-1500);
    --tab-list-item-selected-color: var(--color-primary-500);

    --chart-title-background-color: transparent;
    --chart-title-color: var(--neutral-300);
    --chart-icon-color: var(--neutral-300);
    --chart-title-icon-color: var(--primary);
    --topbar-icon-color: var(--neutral-300);

    --overflow-content-background-color: var(--input-field);
    --overflow-conten-box-shadow-color: rgba(0, 0, 0, 0.4);
    --overflow-backdrop-background-color: transparent;
    --overflow-item-background-color: transparent;
    --overflow-item-background-hover-color: var(--background-hover);
    --overflow-item-color: var(--neutral-300);
    --overflow-item-icon-color: var(--neutral-300);

    --popup-color: var(--neutral-300);
    --popup-background-color: var(--input-field);
    --popup-background-hover-color: var(--background);
    --popup-box-shadow-color: rgba(37, 85, 139, 0.15);

    --topbar-grid-button-background-color: var(--input-field);
    --topbar-grid-button-hover-background-color: var(--background-hover);
    --topbar-grid-color: var(--neutral-25);
    --topbar-grid-button-icon-hover-color: var(--primary);
    --topbar-grid-button-icon-color: var(--neutral-300);
    --sidemenu-footer-color: #8c91aa;
    --sidemenu-header-color: var(--primary);

    --logout-label-color: var(--color-error-tint);
    --logout-icon-color: var(--color-error-tint);

    --messagebox-background-color: #303343;
    --messagebox-background-hover-color: var(--background);
    --messagebox-color: var(--neutral-300);

    --toast-background-color: var(--input-field);
    --toast-color: var(--neutral-300);
    --toast-box-shadow-color: rgba(0, 0, 0, 0.2);

    --paginationbox-background-color: transparent;
    --paginationbox-item-background-color: var(--input-field);
    --paginationbox-item-background-hover-color: var(--background-hover);
    --paginationbox-item-color: var(--neutral-300);


}


/* Example utility classes to use the palette */
.bg-primary {
    background-color: var(--primary);
    color: var(--color-on-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
    color: var(--color-on-primary);
}

.text-primary {
    color: var(--primary);
}

.text-on-background {
    color: var(--color-on-background);
}

.bg-surface-dim {
    background-color: var(--color-surface-dim);
}

.table-header {
    background-color: var(--color-table-header);
}

.table-row:hover {
    background-color: var(--color-table-hover);
}

/* Status */
.text-error {
    color: var(--color-error);
}

.bg-error-tint {
    background-color: var(--color-error-tint);
}

.text-warning {
    color: var(--color-warning);
}

.bg-warning-tint {
    background-color: var(--color-warning-tint);
}

.text-positive {
    color: var(--color-positive);
}

.bg-positive-tint {
    background-color: var(--color-positive-tint);
}

/* Dark theme class example */
.theme-dark {
    background-color: var(--dark-surface-0);
    color: var(--neutral-25);
}

/* Small helpers for consistent spacing in demos */
.palette-swatch {
    display: inline-block;
    width: 120px;
    height: 40px;
    border-radius: 4px;
    margin: 6px 8px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.palette-label {
    display: block;
    font-size: 12px;
    margin-top: 6px;
    color: var(--neutral-700);
}


html[data-theme-loading] {
    opacity: 0;
    transition: opacity 0.3s ease;
}

html:not([data-theme-loading]) {
    opacity: 1;
}