// Dark color mode variables
//
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.


// Cutom Variable 

$topbar-bg-dark:                           #0f111a;
$topbar-b-border-color-dark:               #171b27;
$topbar-nav-icon-bg-dark:                  #0f111a;
$topbar-nav-icon-color-dark:               #a1a8bd;
$topbar-box-shadow-dark:                    0 3px 4px rgba(142,134,171,.10);

//sidebar
$startbar-bg-navy-blue:                   #0a2555;
$startbar-bg-dark:                        #171b27;
$startbar-e-border-color-dark:              $gray-300;
$menu-icon-color-dark:                    #5e748b;
$menu-link-color-dark:                    #a1a8bd;
$menu-link-active-color-dark:             #ffffff;
$menu-link-hover-color-dark:              #ffffff;
$nav-link-disc-color-dark:                #8997bd;
$menu-label-color-dark:                   #a0a5b3;

// form
$label-color-dark:                        #9797a5;

$theme-white-color-dark:                  #2e2e31;

$light-mode-dark:                         #1e222d;
$dark-mode-dark:                            $gray-100;

$text-secondary-dark:                     #c3c3c3;
$border-secondary-dark:                   #333645;

$box-shadow-sm-dark:               0 2px 2px rgb(61,71,81,0.05);
//
// Global colors
//

// scss-docs-start sass-dark-mode-vars
// scss-docs-start theme-text-dark-variables
$primary-text-emphasis-dark:        tint-color($primary, 40%);
$secondary-text-emphasis-dark:      tint-color($secondary, 40%);
$success-text-emphasis-dark:        tint-color($success, 40%);
$info-text-emphasis-dark:           tint-color($info, 40%);
$warning-text-emphasis-dark:        tint-color($warning, 40%);
$danger-text-emphasis-dark:         tint-color($danger, 40%);
$light-text-emphasis-dark:          $gray-100;
$dark-text-emphasis-dark:           $gray-300;
// scss-docs-end theme-text-dark-variables

// scss-docs-start theme-bg-subtle-dark-variables
$primary-bg-subtle-dark:            rgba($primary, 20%);
$secondary-bg-subtle-dark:          rgba($secondary, 20%);
$success-bg-subtle-dark:            rgba($success, 20%);
$info-bg-subtle-dark:               rgba($info, 20%);
$warning-bg-subtle-dark:            rgba($warning, 20%);
$danger-bg-subtle-dark:             rgba($danger, 20%);
$light-bg-subtle-dark:              $gray-800;
$dark-bg-subtle-dark:               mix($gray-800, $black);
// scss-docs-end theme-bg-subtle-dark-variables

// scss-docs-start theme-border-subtle-dark-variables
$primary-border-subtle-dark:        shade-color($primary, 40%);
$secondary-border-subtle-dark:      shade-color($secondary, 40%);
$success-border-subtle-dark:        shade-color($success, 40%);
$info-border-subtle-dark:           shade-color($info, 40%);
$warning-border-subtle-dark:        shade-color($warning, 40%);
$danger-border-subtle-dark:         shade-color($danger, 40%);
$light-border-subtle-dark:          $gray-700;
$dark-border-subtle-dark:           $gray-800;
// scss-docs-end theme-border-subtle-dark-variables

$body-color-dark:                   $gray-300;
$body-bg-dark:                      #0f111a;

$body-secondary-color-dark:         #aab0b9; // text-muted  (only dark mode)
$body-secondary-bg-dark:            #131621;                   
$card-bg-dark:                      #131621;  // card-bg  (only dark mode)
$body-tertiary-color-dark:          rgba($body-color-dark, .5);
$body-tertiary-bg-dark:             #25282d;

$body-emphasis-color-dark:          $white;

$border-color-dark:                 #1c202b;
$border-color-dark-translucent:     rgba($white, .15);

$headings-color-dark:               #c8c8db;

$link-color-dark:                   tint-color($primary, 40%);
$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage);
$code-color-dark:                   tint-color($code-color, 40%);


//
// Forms
//

$form-select-indicator-color-dark:  $body-color-dark;
$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");

$form-switch-color-dark:            rgba($white, .25);
$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>");

// scss-docs-start form-validation-colors-dark
$form-valid-color-dark:             $green-300;
$form-valid-border-color-dark:      $green-300;
$form-invalid-color-dark:           $red-300;
$form-invalid-border-color-dark:    $red-300;
// scss-docs-end form-validation-colors-dark


//
// Accordion
//

$accordion-icon-color-dark:         $primary-text-emphasis-dark;
$accordion-icon-active-color-dark:  $primary-text-emphasis-dark;

$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
// scss-docs-end sass-dark-mode-vars


