// Both SASS and CSS Variables are declared here
// Stick with CSS Variables for colors, font stack and other variables that are going to be used (live variables) in actual CSS you are writing
// Use SASS variables for things that get generated at build time such as breakpoints or pre-generated utility classes

@function hexToRGB($hexColor) {
  @return red($hexColor), green($hexColor), blue($hexColor);
}

// Don't try to be fancy with naming like "primary", "secondary", "tertiary" etc.
// We all know how to count better compared to coming up with 10 "intuitive" names for colors
// Colors that are used for errors or represent fully white/black or something really precise can have a name other than a number, but other colors should use numeric name
$color-map: (
  "1": #00253f,
  "2": #b9cdd7,
  "3": #e6edf1,
  "4": #005591,
  "5": #007ab9,
  "6": #00a0e1,
  "7": #00a0e166,
  "8": #00a0e10d,
  "white": #fff,
  "black": #000,
  "error": #e1000f,
  "success": #009b3c,
);

$breakpoint-xs: 360px; // small phones
$breakpoint-s: 767px; // phones
$breakpoint-m: 1023px; // tablets and large phones
$breakpoint-l: 1366px; // small laptops
$breakpoint-xl: 1600px; // larger laptops

// Code below will generate CSS Variables of all colors from $color-map and it will generate them as HEX and as RGB so they can be used in functions like rgba()
// Generates variablies like --color-2 and --color-2-rgb
:root {
  @each $name, $color in $color-map {
    --color-#{$name}: #{$color};
    --color-#{$name}-rgb: #{hexToRGB($color)};
  }

  --font-stack-primary: "LindeDaxGlobal";
  --transition-duration: 0.15s;
}

/// Asset URL builder
/// @access private
/// @param {String} $type - Asset type, matching folder name
/// @param {String} $file - Asset file name, including extension
/// @return {URL} - A `url()` function leading to the asset

$asset-base-path: "../../assets" !default;

@function asset($type, $file) {
  @return url($asset-base-path + "/" + $type + "s/" + $file);
}