:root {

    /* ================================
       Brand Primary (Main Color)
    ================================== */

    --color-primary: #ed6c00;
    --color-primary-hover: #d76100;
    --color-primary-active: #bd5500;
    --color-primary-light: #f5ad70;
    --color-primary-soft: #fff1e5;
    --color-primary-dark: #9c4600;

    /* RGB */
    --color-primary-rgb: 237, 108, 0;


    /* ================================
       Neutral / Gray System
    ================================== */

    --color-black: #000000;
    --color-dark: #2c3e50;
    --color-text: #333333;
    --color-text-secondary: #6c757d;
    --color-text-muted: #9aa0a6;

    --color-gray-100: #f8f9fa;
    --color-gray-200: #eef1f4;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;

    --color-white: #ffffff;


    /* ================================
       Background System
    ================================== */

    --color-bg-body: #f8f9fa;
    --color-bg-card: #ffffff;
    --color-bg-soft: #fff1e5;
    --color-bg-sidebar: #2c3e50;
    --color-bg-header: #ffffff;


    /* ================================
       Status Colors
    ================================== */

    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ed6c00;
    --color-info: #17a2b8;

    --color-success-light: #e6f4ea;
    --color-danger-light: #fdecea;
    --color-info-light: #e8f7fa;


    /* ================================
       Border
    ================================== */

    --color-border: #dee2e6;
    --color-border-soft: #eef1f4;
    --color-border-strong: #ced4da;


    /* ================================
       Shadow System
    ================================== */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);


    /* ================================
       Button System
    ================================== */

    --btn-primary-bg: var(--color-primary);
    --btn-primary-border: var(--color-primary);
    --btn-primary-hover-bg: var(--color-primary-hover);
    --btn-primary-active-bg: var(--color-primary-active);

    --btn-secondary-bg: var(--color-gray-600);
    --btn-secondary-hover-bg: var(--color-gray-700);

    --btn-success-bg: var(--color-success);
    --btn-danger-bg: var(--color-danger);

    --form-focus-border-color: var(--color-primary);


    /* ================================
       Table System
    ================================== */

    --table-bg: #ffffff;
    --table-header-bg: #fff1e5;
    --table-border-color: var(--color-border);
    --table-hover-bg: rgba(237, 108, 0, 0.06);


    /* ================================
       Badge System
    ================================== */

    --badge-primary-bg: var(--color-primary);
    --badge-success-bg: var(--color-success);
    --badge-danger-bg: var(--color-danger);
    --badge-info-bg: var(--color-info);

    /* ================================
     Primary Subtle
  ================================== */

    --color-primary-bg-subtle: #fff1e5;
    --color-primary-border-subtle: #f5ad70;
    --color-primary-text-emphasis: #9c4600;


    /* ================================
       Success Subtle
    ================================== */

    --color-success-bg-subtle: #e6f4ea;
    --color-success-border-subtle: #b7e1c1;
    --color-success-text-emphasis: #1e7e34;


    /* ================================
       Danger Subtle
    ================================== */

    --color-danger-bg-subtle: #fdecea;
    --color-danger-border-subtle: #f5c6cb;
    --color-danger-text-emphasis: #a71d2a;


    /* ================================
       Warning Subtle
    ================================== */

    --color-warning-bg-subtle: #fff1e5;
    --color-warning-border-subtle: #f5ad70;
    --color-warning-text-emphasis: #9c4600;


    /* ================================
       Info Subtle
    ================================== */

    --color-info-bg-subtle: #e8f7fa;
    --color-info-border-subtle: #bee5eb;
    --color-info-text-emphasis: #117a8b;


    /* ================================
       Gray Subtle
    ================================== */

    --color-gray-bg-subtle: #f8f9fa;
    --color-gray-border-subtle: #dee2e6;
    --color-gray-text-emphasis: #495057;

    /* ================================
       Bootstrap Override
    ================================== */

    --bs-primary: #ed6c00;
    --bs-primary-rgb: 237, 108, 0;

    --bs-link-color: #d76100;
    --bs-link-hover-color: #bd5500;

    --bs-body-bg: #f8f9fa;
    --bs-body-color: #333333;

    --bs-border-color: #dee2e6;

    --bs-primary-bg-subtle: #fff1e5;
    --bs-primary-border-subtle: #f5ad70;
    --bs-primary-text-emphasis: #9c4600;
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-color: var(--color-primary-dark);
    --bs-dropdown-link-hover-bg: var(--color-primary-soft);
    --bs-dropdown-link-active-color: #ffffff;
    --bs-dropdown-link-active-bg: var(--color-primary);
    --bs-dropdown-header-color: var(--color-text-secondary);
    --bs-nav-pills-link-active-color: #ffffff;
    --bs-nav-pills-link-active-bg: var(--color-primary);
    --bs-nav-tabs-link-active-color: var(--color-primary-dark);
    --bs-nav-tabs-link-active-bg: #ffffff;
    --bs-nav-tabs-link-active-border-color: var(--color-primary-light) var(--color-primary-light) #ffffff;

    --bs-success-bg-subtle: #e6f4ea;
    --bs-success-border-subtle: #b7e1c1;
    --bs-success-text-emphasis: #1e7e34;

    --bs-danger-bg-subtle: #fdecea;
    --bs-danger-border-subtle: #f5c6cb;
    --bs-danger-text-emphasis: #a71d2a;

    --bs-warning-bg-subtle: #fff1e5;
    --bs-warning-border-subtle: #f5ad70;
    --bs-warning-text-emphasis: #9c4600;

    --bs-info-bg-subtle: #e8f7fa;
    --bs-info-border-subtle: #bee5eb;
    --bs-info-text-emphasis: #117a8b;

    --bs-tertiary-bg: #ecf0f5;
}

/* ================================
   Dark Mode
================================== */

[data-bs-theme="dark"] {

    /* ================================
       Brand Primary
    ================================== */

    --color-primary: #ed6c00;
    --color-primary-hover: #ff8d2f;
    --color-primary-active: #d76100;
    --color-primary-light: #5d2b00;
    --color-primary-soft: #341700;
    --color-primary-dark: #ffba85;

    --color-primary-rgb: 237, 108, 0;


    /* ================================
       Background System
    ================================== */

    --color-bg-body: #121212;
    --color-bg-card: #1e1e1e;
    --color-bg-soft: #341700;
    --color-bg-sidebar: #0f1720;
    --color-bg-header: #1b1b1b;


    /* ================================
       Text System
    ================================== */

    --color-text: #e9ecef;
    --color-text-secondary: #adb5bd;
    --color-text-muted: #868e96;

    --color-white: #ffffff;
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-color: var(--color-primary-dark);
    --bs-dropdown-link-hover-bg: var(--color-primary-soft);
    --bs-dropdown-link-active-color: #121212;
    --bs-dropdown-link-active-bg: var(--color-primary);
    --bs-dropdown-header-color: var(--color-text-secondary);
    --bs-nav-pills-link-active-color: #121212;
    --bs-nav-pills-link-active-bg: var(--color-primary);
    --bs-nav-tabs-link-active-color: var(--color-primary-dark);
    --bs-nav-tabs-link-active-bg: var(--color-bg-card);
    --bs-nav-tabs-link-active-border-color: var(--color-primary-light) var(--color-primary-light) var(--color-bg-card);


    /* ================================
       Gray System
    ================================== */

    --color-gray-100: #1a1a1a;
    --color-gray-200: #2a2a2a;
    --color-gray-300: #3a3a3a;
    --color-gray-400: #4a4a4a;
    --color-gray-500: #6c757d;
    --color-gray-600: #868e96;
    --color-gray-700: #adb5bd;
    --color-gray-800: #ced4da;
    --color-gray-900: #f8f9fa;


    /* ================================
       Border
    ================================== */

    --color-border: #2c2c2c;
    --color-border-soft: #1f1f1f;
    --color-border-strong: #3a3a3a;


    /* ================================
       Status Colors
    ================================== */

    --color-success: #2ecc71;
    --color-danger: #ff6b6b;
    --color-warning: #ed6c00;
    --color-info: #4dabf7;

    --color-success-bg-subtle: #0e2a1b;
    --color-danger-bg-subtle: #2b1212;
    --color-warning-bg-subtle: #341700;
    --color-info-bg-subtle: #0e2330;

    --color-success-text-emphasis: #2ecc71;
    --color-danger-text-emphasis: #ff6b6b;
    --color-warning-text-emphasis: #ffba85;
    --color-info-text-emphasis: #4dabf7;

    --form-focus-border-color: var(--color-primary);

    --btn-secondary-bg: var(--color-gray-500);
    --btn-secondary-hover-bg: var(--color-gray-600);


    /* ================================
       Shadow
    ================================== */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);


    /* ================================
       Bootstrap Override
    ================================== */

    --bs-body-bg: #121212;
    --bs-body-color: #e9ecef;

    --bs-primary: #ed6c00;
    --bs-primary-rgb: 237, 108, 0;

    --bs-border-color: #2c2c2c;

    --bs-primary-bg-subtle: #341700;
    --bs-primary-border-subtle: #5d2b00;
    --bs-primary-text-emphasis: #ffba85;

    --bs-success-bg-subtle: #0e2a1b;
    --bs-danger-bg-subtle: #2b1212;
    --bs-warning-bg-subtle: #341700;
    --bs-info-bg-subtle: #0e2330;
}

/* ================================
   Component Override
================================== */

.btn-primary {
    --bs-btn-bg: var(--btn-primary-bg);
    --bs-btn-border-color: var(--btn-primary-border);
    --bs-btn-hover-bg: var(--btn-primary-hover-bg);
    --bs-btn-hover-border-color: var(--btn-primary-hover-bg);
    --bs-btn-active-bg: var(--btn-primary-active-bg);
    --bs-btn-active-border-color: var(--btn-primary-active-bg);
}

.btn-secondary {
    --bs-btn-bg: var(--btn-secondary-bg);
    --bs-btn-border-color: var(--btn-secondary-bg);
    --bs-btn-hover-bg: var(--btn-secondary-hover-bg);
    --bs-btn-hover-border-color: var(--btn-secondary-hover-bg);
    --bs-btn-active-bg: var(--btn-secondary-hover-bg);
    --bs-btn-active-border-color: var(--btn-secondary-hover-bg);
}

.btn-success {
    --bs-btn-bg: var(--btn-success-bg);
    --bs-btn-border-color: var(--btn-success-bg);
}

.btn-danger {
    --bs-btn-bg: var(--btn-danger-bg);
    --bs-btn-border-color: var(--btn-danger-bg);
}

.btn-outline-primary {
    --bs-btn-color: var(--btn-primary-bg);
    --bs-btn-border-color: var(--btn-primary-border);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--btn-primary-hover-bg);
    --bs-btn-hover-border-color: var(--btn-primary-hover-bg);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--btn-primary-active-bg);
    --bs-btn-active-border-color: var(--btn-primary-active-bg);
}

.btn-outline-secondary {
    --bs-btn-color: var(--btn-secondary-bg);
    --bs-btn-border-color: var(--btn-secondary-bg);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--btn-secondary-hover-bg);
    --bs-btn-hover-border-color: var(--btn-secondary-hover-bg);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--btn-secondary-hover-bg);
    --bs-btn-active-border-color: var(--btn-secondary-hover-bg);
}

.btn-outline-success {
    --bs-btn-color: var(--btn-success-bg);
    --bs-btn-border-color: var(--btn-success-bg);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--btn-success-bg);
    --bs-btn-hover-border-color: var(--btn-success-bg);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--btn-success-bg);
    --bs-btn-active-border-color: var(--btn-success-bg);
}

.btn-outline-danger {
    --bs-btn-color: var(--btn-danger-bg);
    --bs-btn-border-color: var(--btn-danger-bg);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--btn-danger-bg);
    --bs-btn-hover-border-color: var(--btn-danger-bg);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--btn-danger-bg);
    --bs-btn-active-border-color: var(--btn-danger-bg);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.toast.text-bg-primary,
.toast.text-bg-secondary,
.toast.text-bg-success,
.toast.text-bg-danger,
.toast.text-bg-warning,
.toast.text-bg-info {
    background-image: none;
}

.toast.text-bg-primary {
    color: var(--bs-primary-text-emphasis) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary-border-subtle) !important;
}

.toast.text-bg-secondary {
    color: var(--color-gray-text-emphasis) !important;
    background-color: var(--color-gray-bg-subtle) !important;
    border-color: var(--color-gray-border-subtle) !important;
}

.toast.text-bg-success {
    color: var(--bs-success-text-emphasis) !important;
    background-color: var(--bs-success-bg-subtle) !important;
    border-color: var(--bs-success-border-subtle) !important;
}

.toast.text-bg-danger {
    color: var(--bs-danger-text-emphasis) !important;
    background-color: var(--bs-danger-bg-subtle) !important;
    border-color: var(--bs-danger-border-subtle) !important;
}

.toast.text-bg-warning {
    color: var(--bs-warning-text-emphasis) !important;
    background-color: var(--bs-warning-bg-subtle) !important;
    border-color: var(--bs-warning-border-subtle) !important;
}

.toast.text-bg-info {
    color: var(--bs-info-text-emphasis) !important;
    background-color: var(--bs-info-bg-subtle) !important;
    border-color: var(--bs-info-border-subtle) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--form-focus-border-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
}

.form-check-input {
    border-color: var(--color-border-strong);
}

.form-check-input:focus {
    border-color: var(--form-focus-border-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}