:root,
[data-bs-theme=light] {
    
    /* normal color */
    --bs-blue: #4f46e5;
    --bs-indigo: #6610f2;
    --bs-purple: #7c3aed;
    --bs-pink: #db2777;
    --bs-red: #dc2626;
    --bs-orange: #ea580c;
    --bs-yellow: #d97706;
    --bs-green: #059669;
    --bs-teal: #0d9488;
    --bs-cyan: #0891b2;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6b7280;
    --bs-gray-dark: #374151;
    --bs-gray-100: #f8fafc;
    --bs-gray-200: #f1f5f9;
    --bs-gray-300: #e2e8f0;
    --bs-gray-400: #cbd5e1;
    --bs-gray-500: #94a3b8;
    --bs-gray-600: #6b7280;
    --bs-gray-700: #4b5563;
    --bs-gray-800: #374151;
    --bs-gray-900: #1f2937;
    
    
    /* bootstrap main color */
    --bs-primary: #6610f2;
    --bs-secondary: #6b7280;
    --bs-success: #059669;
    --bs-info: #0891b2;
    --bs-warning: #d97706;
    --bs-danger: #dc2626;
    --bs-light: #f8fafc;
    --bs-dark: #1f2937;

    /* bootstrap emphasis color */
    --bs-primary-text-emphasis: #3a0a91;
    --bs-secondary-text-emphasis: #2d3038;
    --bs-success-text-emphasis: #034d38;
    --bs-info-text-emphasis: #044a5c;
    --bs-warning-text-emphasis: #573004;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #4b5563;
    --bs-dark-text-emphasis: #4b5563;

    /* bootstrap subtle color */
    --bs-primary-bg-subtle: #e8e0fc;
    --bs-secondary-bg-subtle: #e5e7eb;
    --bs-success-bg-subtle: #d1fae5;
    --bs-info-bg-subtle: #cffafe;
    --bs-warning-bg-subtle: #fef3c7;
    --bs-danger-bg-subtle: #fecaca;
    --bs-light-bg-subtle: #fcfdfe;
    --bs-dark-bg-subtle: #e2e8f0;

    /* border */
    --bs-primary-border-subtle: #b399f6;
    --bs-secondary-border-subtle: #c7ccd4;
    --bs-success-border-subtle: #a7f3d0;
    --bs-info-border-subtle: #a5f3fc;
    --bs-warning-border-subtle: #fcd34d;
    --bs-danger-border-subtle: #fca5a5;
    --bs-light-border-subtle: #f1f5f9;
    --bs-dark-border-subtle: #94a3b8;

    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #e2e8f0;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-color-subtle: #efefef;
    --bs-border-radius: 0.25rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;


    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;

    /* body color */
    --bs-body-color: #193e58;
    --bs-body-bg: #F4F4F5;
    --bs-emphasis-color: #000;
    --bs-secondary-color: rgba(31, 41, 55, 0.75);
    --bs-secondary-bg: #f1f5f9;
    --bs-tertiary-color: rgba(31, 41, 55, 0.5);
    --bs-tertiary-bg: #f8fafc;
    --bs-heading-color: inherit;

    --bs-link-color: #6610f2;
    --bs-link-color-rgb: 102, 16, 242;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #520dc2;
    --bs-link-hover-color-rgb: 82, 13, 194;
    --bs-code-color: #db2777;
    --bs-highlight-color: #1f2937;
    --bs-highlight-bg: #fef3c7;
    
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(102, 16, 242, 0.25);
    
    /* Form */
    --bs-form-valid-color: #059669;
    --bs-form-valid-border-color: #059669;
    --bs-form-invalid-color: #dc2626;
    --bs-form-invalid-border-color: #dc2626;
}

[data-bs-theme=dark] {
    color-scheme: dark;

    --bs-body-color: #E4E4E4;
    --bs-body-bg: #1b1d25;
    --bs-emphasis-color: #fefefe;
    --bs-secondary-color: rgba(226, 232, 240, 0.75);
    --bs-secondary-color-rgb: 226, 232, 240;
    --bs-secondary-bg: #1f232c;
    --bs-secondary-bg-rgb: 55, 65, 81;
    --bs-tertiary-color: rgba(226, 232, 240, 0.5);
    --bs-tertiary-color-rgb: 226, 232, 240;
    --bs-tertiary-bg: #222631;
    --bs-tertiary-bg-rgb: 45, 55, 72;
    --bs-primary-text-emphasis: #b399f6;
    --bs-secondary-text-emphasis: #a1a1aa;
    --bs-success-text-emphasis: #6ee7b7;
    --bs-info-text-emphasis: #67e8f9;
    --bs-warning-text-emphasis: #fcd34d;
    --bs-danger-text-emphasis: #fca5a5;
    --bs-light-text-emphasis: #f8fafc;
    --bs-dark-text-emphasis: #e2e8f0;
    --bs-primary-bg-subtle: #14082e;
    --bs-secondary-bg-subtle: #161717;
    --bs-success-bg-subtle: #021c14;
    --bs-info-bg-subtle: #03232c;
    --bs-warning-bg-subtle: #2e1e03;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #374151;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #3a0a91;
    --bs-secondary-border-subtle: #3f3f46;
    --bs-success-border-subtle: #064e3b;
    --bs-info-border-subtle: #0e7490;
    --bs-warning-border-subtle: #92400e;
    --bs-danger-border-subtle: #991b1b;
    --bs-light-border-subtle: #4b5563;
    --bs-dark-border-subtle: #374151;
    --bs-heading-color: inherit;
    --bs-link-color: #b399f6;
    --bs-link-hover-color: #c4b2fc;
    --bs-link-color-rgb: 179, 153, 246;
    --bs-link-hover-color-rgb: 196, 178, 252;
    --bs-code-color: #f0a6c8;
    --bs-highlight-color: #e2e8f0;
    --bs-highlight-bg: #92400e;

    --bs-border-color: #2d333f;
    --bs-border-color-translucent: #242424;
    --bs-border-color-subtle: #292e33;

    --bs-form-valid-color: #6ee7b7;
    --bs-form-valid-border-color: #6ee7b7;
    --bs-form-invalid-color: #fca5a5;
    --bs-form-invalid-border-color: #fca5a5;

    --bs-btn-hover-border-color: #B39CD0;
    
   /*  --bs-btn-color: #B39CD0;
    --bs-btn-border-color: #B39CD0;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #B39CD0;
    
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #B39CD0;
    --bs-btn-active-border-color: #B39CD0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #B39CD0;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #B39CD0; */

    

}