@use "sass:map";
@use "sass:math";
@use "@styles/abstracts/functions" as fun;

//===========================================================================
// Ratios
//===========================================================================

/// Ratios map
/// @prop {String} keys - Keys are identifiers mapped to a given ratio
/// @prop {Map} value - Value is actual ratio
$ratios: (
  "minor-second": 1.067,
  "major-second": 1.125,
  "minor-third": 1.2,
  "major-third": 1.25,
  "perfect-fourth": 1.333,
  "augmented-fourth": 1.414,
  "perfect-fifth": 1.5,
  "golden-number": 1.618,
);

// I cannot declare the following function with others functions due to module
// loop. But, it will only be used in this file so it is not really a problem.

/// Get ratio
/// @param {String} $name - Ratio name.
/// @return {Integer} The ratio value.
@function get-ratio($name) {
  @return map.get($ratios, $name);
}

//===========================================================================
// Layout
//===========================================================================

/// Breakpoints map
/// @prop {String} keys - Keys are identifiers mapped to a given length
/// @prop {Map} values - Values are actual breakpoints expressed in pixels
$breakpoints: (
  "2xs": 500px,
  "xs": 600px,
  "sm": 800px,
  "md": 1280px,
  "lg": 1600px,
);

// I cannot declare the following function with others functions due to module
// loop. But, it will only be used in this file so it is not really a problem.

/// Get breakpoint
/// @param {String} $name - Breakpoint name.
/// @return {String} The breakpoint value.
@function get-breakpoint($breakpoint) {
  @if type-of($breakpoint) == "string" {
    @return map.get($breakpoints, $breakpoint);
  } @else {
    @error "`$breakpoint` must be a string.";
  }
}

//===========================================================================
// Fonts
//===========================================================================

/* stylelint-disable -- Fonts name are not keywords, lowercase is not needed. */
/// Regular font family
/// @type List
$font-family_primary: ("Inter", "Liberation Sans", Arial, sans-serif);

/// Alternative regular font family
/// @type List
$font-family_secondary: ("Kanit", "Liberation Sans", Arial, sans-serif);

/// Monospace font family
/// @type List
$font-family_mono: (
  "Cousine",
  "Liberation Mono",
  "DejaVu Sans Mono",
  "Courier New",
  monospace
);
/* stylelint-enable */

$line-height: get-ratio("golden-number");

$font-size_base: 16px;
$font-size_base-rem: fun.convert-px(16); // font-size_base without unit
$font-size_ratio: get-ratio("minor-third");
$font-size_levels: "sm", "md", "lg", "xl", "2xl", "3xl", "4xl";

// We start with small font-size, so it needs to be less than $font-size_base.
$font-size_current: math.div($font-size_base-rem, $font-size_ratio);

/// Font-sizes map ('sm', 'md', 'lg'...)
/// @prop {String} keys - Size as key is mapped to a given font-size
/// @prop {Map} value - Value is actual font-size
$font-sizes: ();

// We fill our font-sizes map.
/// Inspired by Stephanie Eckles.
/// @link https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale/
@each $level in $font-size_levels {
  $font-size_current: $font-size_current * $font-size_ratio;
  $font-sizes: map.merge(
    $font-sizes,
    (
      $level: $font-size_current,
    )
  );
}

// We cannot declare this function with others functions due to module loop.

/// Get font-size
/// @param {String} $name - Font-size ('sm', 'md', 'lg'...).
/// @return {Integer} The font-size value.
@function font-size($key) {
  @return map.get($font-sizes, $key);
}

//============================================================================
// Spacings
//============================================================================

$spacing_ratio: get-ratio("golden-number");
$spacing_base: $spacing_ratio * 1rem;

$spacing_levels: "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl";

// We start with 2xs spacing, so it needs to be less than the base.
$spacing_current: math.div($spacing_base, $spacing_ratio * 3);

/// Spacings map ('sm', 'md', 'lg'...)
/// @prop {String} keys - Size as key is mapped to a given spacing
/// @prop {Map} value - Value is actual spacing
$spacings: ();

/// We fill our spacings map.
@each $level in $spacing_levels {
  $spacing_current: $spacing_current * $spacing_ratio;
  $spacings: map.merge(
    $spacings,
    (
      $level: $spacing_current,
    )
  );
}

// We cannot declare this function with others functions due to module loop.

/// Get spacing.
/// @param {String} $name - Spacing size ('sm', 'md', 'lg'...).
/// @return {Integer} The spacing value.
@function spacing($key) {
  @return map.get($spacings, $key);
}

//============================================================================
// Colors
//============================================================================

$light-theme_black: hsl(207, 47%, 11%);
$light-theme_blue: hsl(206, 75%, 31%);
$light-theme_blue-o30: hsla(206, 75%, 31%, 0.3);
$light-theme_blue-bright: hsl(206, 77%, 36%);
$light-theme_blue-brighter: hsl(206, 80%, 47%);
$light-theme_blue-dark: hsl(206, 76%, 28%);
$light-theme_blue-darker: hsl(206, 60%, 20%);
$light-theme_grey: hsl(206, 15%, 80%);
$light-theme_grey-bright: hsl(206, 20%, 86%);
$light-theme_grey-brighter: hsl(206, 15%, 90%);
$light-theme_grey-dark: hsla(206, 30%, 30%);
$light-theme_grey-darker: hsla(206, 10%, 25%);
$light-theme_grey-darker-o70: hsla(206, 10%, 25%, 0.7);
$light-theme_grey-darker-o40: hsla(206, 10%, 25%, 0.4);
$light-theme_grey-darker-o20: hsla(206, 10%, 25%, 0.2);
$light-theme_white: hsl(206, 15%, 97%);
$light-theme_white-dark: hsl(206, 20%, 93%);
$light-theme_white-o90: hsl(206, 15%, 97%, 0.9);
$light-theme_orange: hsl(28, 91%, 22%);
$light-theme_red: hsl(1, 72%, 29%);
$light-theme_green: hsl(105, 90%, 16%);
$light-theme_magenta: hsl(322, 80%, 28%);
$light-theme_purple: hsl(282, 84%, 31%);
$light-theme_yellow: hsl(49, 90%, 16%);
$light-theme_cyan: hsl(187, 84%, 17%);

$dark-theme_black: hsl(208, 25%, 11%);
$dark-theme_black-o90: hsla(208, 25%, 11%, 0.9);
$dark-theme_black-bright: hsl(208, 21%, 15%);
$dark-theme_black-brighter: hsl(208, 25%, 17%);
$dark-theme_blue: hsl(200, 50%, 68%);
$dark-theme_blue-o30: hsla(200, 60%, 70%, 0.3);
$dark-theme_blue-bright: hsl(200, 55%, 70%);
$dark-theme_blue-brighter: hsl(200, 66%, 81%);
$dark-theme_blue-dark: hsl(200, 45%, 64%);
$dark-theme_blue-darker: hsl(200, 16%, 62%);
$dark-theme_grey: hsl(208, 10%, 70%);
$dark-theme_grey-dark: hsl(208, 20%, 25%);
$dark-theme_grey-dark-o70: hsla(208, 20%, 25%, 0.7);
$dark-theme_grey-dark-o40: hsla(208, 20%, 25%, 0.4);
$dark-theme_grey-dark-o20: hsla(208, 20%, 25%, 0.2);
$dark-theme_grey-darker: hsl(208, 18%, 20%);
$dark-theme_white: hsl(208, 25%, 92%);
$dark-theme_orange: hsl(35, 55%, 66%);
$dark-theme_red: hsl(2, 70%, 76%);
$dark-theme_green: hsl(100, 55%, 65%);
$dark-theme_magenta: hsl(318, 55%, 78%);
$dark-theme_purple: hsl(270, 60%, 78%);
$dark-theme_yellow: hsl(50, 60%, 65%);
$dark-theme_cyan: hsl(180, 60%, 68%);