@use "sass:math";

//theme colors
//$bg-core-primary: hsl(225, 68%, 85%); // body-background;
//$bg-core-start: $bg-core-primary;
$bg-core-end: #fafafa;

$text-core-hc: #212121; //title
$text-core: #525252; //text
$text-core-lc: #7d7d80; //metadata
$text-core-vc: #969699; //ikona-text

//$border-core: lighten($bg-core-primary, 7%); //border
$element-bg-core: rgba(255, 255, 255, 0.5); // elements-background
$element-fg-core: rgba(255, 255, 255, 0.25); // elements-foreground







:root,
:root:has(.light:checked)  {
$blue-50:  #f2f4fd;
$blue-100: #e5eafa;
$blue-200: #cbd6f5;
$blue-300: #b2c1f1;
$blue-300a: #b2c1f190;
$blue-400: #98adec;
$blue-500: #7e98e7;
$blue-600: #657ab9;
$blue-700: #4c5b8b;
$blue-800: #323d5c;
$blue-900: #191e2e;

  --bg-core-primary: #{$blue-300}; // body-background;
  --bg-core-primary-a: #{$blue-300a}; // body-background;

  --bg-core-primary-light: #{$blue-50}; // light
  --bg-core-primary-lighten: #{$blue-200}; // lighten
  --bg-core-primary-darken: #{$blue-400}; // darken;
  --bg-core-primary-dark: #{$blue-600}; // dark;
  --bg-core-start: #{$blue-300}; // body-background
  --bg-core-end: #{$bg-core-end}; // body-background

  --text-core-hc: #{$text-core-hc}; //title
  --text-core: #{$blue-800}; //text 
  --text-core-lc: #{$text-core-lc}; //metadata
  --text-core-vc: #{$text-core-vc}; //ikona-text

  --border-core-lighten:#{$blue-100}; //border-lighten
  --border-core: #{$blue-200}; //border
  --element-bg-core: #{$element-bg-core}; // elements-background
  --element-fg-core: #{$element-fg-core}; // elements-foreground

  --accent-color: #ffdad9;
  --accent-color-hover: #fbc5c3;
}


.pink,
:root:has(.pink:checked) {
$violet-50:  #f0eef6;
$violet-100: #e1dced;
$violet-200: #c2b9db;
$violet-300: #a496c8;
$violet-400: #8573b6;
$violet-500: #6750a4;
$violet-600: #524083;
$violet-700: #3e3062;
$violet-800: #151021;
$violet-900: #212529;

  --bg-core-primary: #{$violet-300}; // body-background;
  --bg-core-primary-light: #{$violet-50}; // light
  --bg-core-primary-lighten: #{$violet-200}; // lighten
  --bg-core-primary-darken: #{$violet-400}; // darken;
  --bg-core-primary-dark: #{$violet-600}; // dark;
  --bg-core-start: #{$violet-200}; // body-background
  --bg-core-end: #{$bg-core-end}; // body-background

  --text-core-hc: #{$text-core-hc}; //title
  --text-core: #{$violet-800}; //text
  --text-core-lc: #{$text-core-lc}; //metadata
  --text-core-vc: #{$text-core-vc}; //ikona-text

  --border-core-lighten:#{$violet-100}; //border-lighten
  --border-core: #{$violet-200}; //border
  --element-bg-core: #{$element-bg-core}; // elements-background
  --element-fg-core: #{$element-fg-core}; // elements-foreground

  --accent-color: #ffdad9;
  --accent-color-hover: #fbc5c3;
  }

  .green,
  :root:has(.green:checked) {
  $green-50:  #f8fef4;
  $green-100: #f0f3e8;
  $green-200: #ebefe2;
  $green-300: #e5eadc;
  $green-400: #e3e9da;
  $green-500: #dfe6d5;
  $green-600: #bdcbb0;
  $green-700: #a1b095;
  $green-800: #4a613c;
  $green-900: #25311e;
  
    --bg-core-primary: #{$green-600}; // body-background;
    --bg-core-primary-light: #{$green-100}; // light
    --bg-core-primary-lighten: #{$green-500}; // lighten
    --bg-core-primary-darken: #{$green-700}; // darken;
    --bg-core-primary-dark: #{$green-800}; // dark;
    --bg-core-start: #{$green-300}; // body-background
    --bg-core-end: #{$bg-core-end}; // body-background
  
    --text-core-hc: #{$text-core-hc}; //title
    --text-core: #{$green-900}; //text
    --text-core-lc: #{$text-core-lc}; //metadata
    --text-core-vc: #{$text-core-vc}; //ikona-text
  
    --border-core-lighten:#{$green-300}; //border-lighten
    --border-core: #{$green-400}; //border
    --element-bg-core: #{$element-bg-core}; // elements-background
    --element-fg-core: #{$element-fg-core}; // elements-foreground
  
    --accent-color: #dbe971;
    --accent-color-hover: #cbcc58;
    }

.dark,
:root:has(.dark:checked)  {
  --bg-core-primary: hsl(0 0% 10% / 100%); // body-background;
  --bg-core-primary-light: hsl(0 0% 15% / 100%); // light
  --bg-core-primary-lighten: hsl(0 0% 17% / 100%); // lighten
  --bg-core-primary-darken:  hsl(0 0% 7% / 100%); // darken;
  --bg-core-primary-dark: hsl(0 0% 5% / 100%); // dark;
  --bg-core-start: hsl(0 0% 10% / 100%); // body-background
  --bg-core-end: hsl(0 0% 15% / 100%); // body-background

  --text-core-hc: hsl(0 0% 97% / 100%); //title
  --text-core: hsl(0 0% 73% / 100%); //text
  --text-core-lc: hsl(0 0% 53% / 100%); //metadata
  --text-core-vc: hsl(0 0% 60% / 100%); //ikona-text

  --border-core-lighten:hsl(0 0% 17% / 100%); //border-lighten
  --border-core: hsl(0 0% 20% / 100%); //border
  --element-bg-core: hsl(0 0% 13% / 100%); // elements-background
  --element-fg-core: hsl(0 0% 15% / 100%); // elements-foreground
}

//  colors
// $blue: #0d6efd;
// $indigo: #6610f2;
// $purple: #6f42c1;
// $pink: #d63384;
// $red: #dc3545;
// $orange: #fd7e14;
// $yellow: #ffc107;
// $green: #00c851; //#198754;
// $teal: #20c997;
// $cyan: #0dcaf0;

$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;

$blue: #0dbcf0c4;
$red: #ff7f78;
$yellow: #ffb480;
$green: #80d89e;
$cyan: #729fe9;



$primary: $blue;
$secondary: $gray-400;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-300;
$dark: $gray-900;

//color palette
$theme-colors: (
 // "core": $core,
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark,
  "white": $white,
  "black": $black
);

//spacing
$base-spacing: 0.25;
$base-padding: #{$base-spacing}rem;
$base-margin: #{$base-spacing}rem;

//font-sizes
$base-font-size: 1rem !default;
$font-size-sm: $base-font-size * 0.85 !default;
$font-size-md: $base-font-size * 1.25 !default;
$font-size-lg: $base-font-size * 1.5 !default;
$font-size-xl: $base-font-size * 2 !default;

$h1-size: $base-font-size * 3 !default;
$h2-size: $base-font-size * 2.5 !default;
$h3-size: $base-font-size * 2 !default;
$h4-size: $base-font-size * 1.5 !default;
$h5-size: $base-font-size * 1.25 !default;
$h6-size: $base-font-size !default;

//font-weight
$font-weight-300: 300; //light
$font-weight-400: normal; // regular
$font-weight-600: 600; // semibold
$font-weight-700: bold; // bold
$font-weight-800: 800; // extra bold

//border-radius
$base-border-radius: 0.3rem;
$border-radius-sm: math.div($base-border-radius, 2);
$border-radius-lg: $base-border-radius * 2;
$border-radius-pill: 100vw;

// box-shadow
$base-box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 10%) !default;

// transition
$transition: all 0.15s ease-in-out;

//z-index
$tooltip-zindex:896;
$appbar-zindex: 897;
$sidebar-zindex: 899;
$sidebar-right-zindex: 898;
$backdrop-zindex: 999;
$dropdown-zindex: 10000; 
$modal-zindex: 10000; 
$snackbar-zindex: 10001; 
$top-loading-bar-zindex: 10002; 

