@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 {
  --bg-core-primary: #{$bg-core-primary}; // body-background;
  --bg-core-primary-lighten: hsl(225, 68%, 90%); // lighten
  --bg-core-primary-darken: hsl(225, 68%, 75%); // darken;
  --bg-core-start: #{$bg-core-primary};
  --bg-core-end: #{$bg-core-end};

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

  --bg-core-primary-lighter: hsl(225, 68%, 90%); //hover
  --border-core: #{$border-core}; //border
  --element-bg-core: #{$element-bg-core}; // elements-background
  --element-fg-core: #{$element-fg-core}; // elements-foreground
}

.pink,
:root:has(pink:checked) {
  --bg-core-primary: hsl(310 50% 90%);
  --bg-core-primary-lighten: hsl(310 50% 95%); //lighten
  --bg-core-primary-darken: hsl(310 50% 85%); //darken
  --element-bg-core: hsl(310 50% 100% / 50%);
  --text-core: hsl(310 50% 15%);
  --border-core: hsl(310 50% 90%);
}

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

  --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: hsl(0 0% 27% / 100%); //border
  --element-bg-core: hsl(0 0% 13% / 100%); // elements-background
  --element-fg-core: hsl(0 0% 20% / 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;

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

//color palette
$theme-colors: (
  //"core":       $bg-core-primary,
  "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;

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

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