@use 'sass:color';
@use 'sass:list';
@use 'sass:math';
@use 'sass:map';
@use '../theme.scss' as *;

:root {
  --bgc: #{map.get($grays, 'gray-0')};
  --txt: #{map.get($grays, 'gray-95')};
  --brd: #{map.get($grays, 'gray-20')};
  --suf: #{map.get($grays, 'gray-5')};
  --hover-suf: #{map.get($grays, 'gray-10')};

  --base-color: #{map.get($grays, 'gray-10')};
  --base-hover-color: #{map.get($grays, 'gray-15')};

  --primary: #{$primary};
  --secondary: #{$secondary};

  --success: #{$success};
  --info: #{$info};
  --error: #{$danger};
  --warning: #{$attention};
  --importance: #{$importance};

  --depth-bg: #{map.get($grays, 'gray-0')};
  --depth-bs: 0 0 16px 2px rgba(0, 0, 0, 0.16);

  --mobile-p: #{map.get($breakpoints, 'xs')};
  --mobile-l: #{map.get($breakpoints, 'sm')};
  --tablet: #{map.get($breakpoints, 'md')};
  --desktop: #{map.get($breakpoints, 'lg')};
  --desktop-l: #{map.get($breakpoints, 'xl')};
}

// @media (prefers-color-scheme: dark) {
// }
:root {
  &.dark {
    --bgc: #{map.get($grays, 'gray-90')};
    --txt: #{map.get($grays, 'gray-5')};
    --brd: #{map.get($grays, 'gray-70')};
    --suf: #{map.get($grays, 'gray-40')};
    --hover-suf: #{map.get($grays, 'gray-50')};

    --base-color: #{map.get($grays, 'gray-80')};
    --base-hover-color: #{map.get($grays, 'gray-70')};

    --depth-bg: #{map.get($grays, 'gray-0')};
  }
}

@each $color, $value in $stateColors {
  $lightValue: color.adjust(list.nth($value, 1), $lightness: 35%);
  :root {
    --be-#{$color}-color: #{$value};
    --be-#{$color}-light: #{$lightValue};
  }
}
@each $color, $value in $colors {
  $lightValue: color.adjust(list.nth($value, 1), $lightness: 35%);
  :root {
    --be-#{$color}-color: #{$value};
    --be-#{$color}-light: #{$lightValue};
  }
}
// @each $color, $value in $colors2 {
//   $lightValue: color.adjust(list.nth( $value, 1), $lightness: 35%);
//   :root {
//     --be-#{$color}-sub-color:  #{$value};
//     --be-#{$color}-sub-light:  #{$lightValue};
//   }
// }

@function color-contrast($bg, $fg) {
  $luminance1: luminance($fg) + 0.05;
  $luminance2: luminance($bg) + 0.05;
  $ratio: $luminance1 / $luminance2;

  @if $luminance2 > $luminance1 {
    $ratio: 1 / $ratio;
  }

  $ratio: math.round($ratio * 100) / 100;

  @return $ratio;
}

@function check-contrast($bg, $fg, $account) {
  @debug $account;
  $result: color-contrast($bg, $fg) < $account;
  @debug $result;
  @return $result;
}

@function luminance($color) {
  $red: list.nth(linear-rgb($color), 1);
  $green: list.nth(linear-rgb($color), 2);
  $blue: list.nth(linear-rgb($color), 3);

  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
}

@function linear-rgb($color) {
  $r: color.red($color) / 255;
  $g: color.green($color) / 255;
  $b: color.blue($color) / 255;

  $r: if($r <= 0.03928, $r / 12.92, pow(($r + 0.055) / 1.055, 2.4));
  $g: if($g <= 0.03928, $g / 12.92, pow(($g + 0.055) / 1.055, 2.4));
  $b: if($b <= 0.03928, $b / 12.92, pow(($b + 0.055) / 1.055, 2.4));

  @return ($r, $g, $b);
}