:root {
    /* Base color */
    --main-color: #696fff;
    --error-color: #d25757;
    --success-color: #40d484;

    /* Neutral Colors */
    --neutral-100: #ffffff; /* Pure white */
    --neutral-200: #f5f5f5; /* Off-white */
    --neutral-250: #EFEFEF;
    --neutral-300: #e8e8e8; /* Light gray */
    --neutral-400: #d1d1d1; /* Soft gray */
    --neutral-500: #adadad; /* Medium gray */
    --neutral-600: #767676; /* Dark gray */
    --neutral-700: #404040; /* Charcoal */
    --neutral-800: #262626; /* Near black */
    --neutral-900: #121212; /* Soft black - better for screens */
    --neutral-950: #000000; /* Pure black */

    /* Scroll color */
    --scroll-color: var(--main-color);
    --scroll-outline: var(--neutral-500);

    /* Text color */
    --text-white: var(--neutral-100);
    --text-black: var(--neutral-800);

    /* Icon color */
    --icon-black: var(--neutral-800);
    --icon-white: var(--neutral-100);
    --icon-primary-background: var(--main-color);

    /* Main button */
    --primary-button-background: var(--main-color);
    --primary-button-text-color: var(--text-white);
    --primary-button-icon-color: var(--text-white);

    /* Badge Styling */
    --badge-background-main: var(--main-color);
}

html[data-theme="light"] {
    --body-bg: var(--neutral-100);

    /* Sidebar Colors */
    --sidebar-bg: var(--neutral-200);
    --sidebar-button-background: var(--neutral-300);
    --sidebar-button-icon-color: var(--neutral-600);
    --sidebar-button-text-color: var(--neutral-600);
    --sidebar-button-actived-color: var(--main-color);
    --sidebar-button-icon-actived-color: var(--main-color);
    --sidebar-separator-color: var(--neutral-400);
    --sidebar-border-color: var(--neutral-300);
    --sidebar-link-text-color: var(--neutral-700);

    /* Header Styling */
    --header-background: var(--neutral-100);
    --header-button-background: var(--neutral-200);
    --header-button-icon-color: var(--neutral-800);
    --header-button-text-color: var(--neutral-800);
    --header-button-background-hover: var(--main-color);

    /* Text Color */
    --text-primary: var(--neutral-800);
    --text-secondary: var(--neutral-600);

    /* Box Styling */
    --box-background-primary: var(--neutral-200);
    --box-background-secondary: var(--neutral-250);
    --box-title-color: var(--neutral-800);
    --box-icon-color: var(--neutral-500);
    --box-icon-strong-color: var(--neutral-500);
    --box-separator-color: var(--neutral-300);

    /* Table Styling */
    --table-header-background:var(--neutral-100);
    --table-header-hover-background:var(--neutral-300);
    --table-header-border-color:var(--neutral-300);
    --table-primary-text-color:var(--neutral-800);
    --table-secondary-text-color:var(--neutral-700);

    /* Modal Styling */
    --modal-background: var(--neutral-100);
    --modal-icon-color: var(--neutral-700);
    --modal-icon-bg: var(--neutral-300);
    --modal-box-background-primary: var(--neutral-300);
    --modal-box-background-secondary: var(--neutral-300);
    --modal-text-secondary: var(--neutral-700);

    /* Badge Styling */
    --badge-background-primary: var(--neutral-800);
    --badge-background-secondary: var(--neutral-600);
    --badge-text-primary-color: var(--neutral-300);
    --badge-text-primary-secondary: var(--neutral-200);

    /* Form Styling */
    --placeholder-input-background: var(--neutral-200);
    --placeholder-text-color: var(--neutral-800);
    --placeholder-input-border: var(--neutral-400);
    --label-text-color: var(--neutral-800);
}

html[data-theme="dark"] {
    --body-bg: var(--neutral-900);

    /* Sidebar Colors */
    --sidebar-bg: var(--neutral-800);
    --sidebar-button-background: var(--neutral-700);
    --sidebar-button-icon-color: var(--neutral-300);
    --sidebar-button-text-color: var(--neutral-400);
    --sidebar-button-actived-color: var(--main-color);
    --sidebar-button-icon-actived-color: var(--neutral-300);
    --sidebar-separator-color: var(--neutral-600);
    --sidebar-border-color: var(--neutral-700);
    --sidebar-link-text-color: var(--neutral-400);

    /* Header Styling */
    --header-background: var(--neutral-900);
    --header-button-background: var(--neutral-700);
    --header-button-icon-color: var(--neutral-300);
    --header-button-text-color: var(--neutral-300);
    --header-button-background-hover: var(--main-color);

    /* Text Color */
    --text-primary: var(--neutral-200);
    --text-secondary: var(--neutral-400);

    /* Box Styling */
    --box-background-primary: var(--neutral-800);
    --box-background-secondary: var(--neutral-700);
    --box-title-color: var(--neutral-300);
    --box-icon-color: var(--neutral-400);
    --box-separator-color: var(--neutral-600);

    /* Table Styling */
    --table-header-background:var(--neutral-700);
    --table-header-hover-background:var(--neutral-800);
    --table-header-border-color:var(--neutral-600);
    --table-primary-text-color:var(--neutral-300);
    --table-secondary-text-color:var(--neutral-400);

    /* Modal Styling */
    --modal-background: var(--neutral-800);
    --modal-icon-color: var(--neutral-700);
    --modal-icon-bg: var(--neutral-600);
    --modal-box-background-primary: var(--neutral-700);
    --modal-box-background-secondary: var(--neutral-600);
    --modal-text-secondary: var(--neutral-400);

    /* Badge Styling */
    --badge-background-primary: var(--neutral-800);
    --badge-background-secondary: var(--neutral-900);
    --badge-text-primary-color: var(--neutral-300);
    --badge-text-primary-secondary: var(--neutral-300);

    /* Form Styling */
    --placeholder-input-background: var(--neutral-900);
    --placeholder-text-color: var(--neutral-300);
    --placeholder-input-border: var(--neutral-700);
    --label-text-color: var(--neutral-300);
}