@use "sass:list";
@use "sass:math";
@use "../core/function";
@use "../core/variable";

:root {
  /**
   * Background color.
   */
  --_global--background-color: transparent;

  /**
   * Border radius.
   */
  --_global--border-radius: 3px;

  /**
   * Color: black.
   */
  $_color-black: #111;
  --_color-black: #{ $_color-black };

  /**
   * Color: gray.
   */
  $_color-gray: #999;
  --_color-gray: #{ $_color-gray };
  --_dark-color-gray: #{ function.dark($_color-gray) };
  --_darker-color-gray: #{ function.darker($_color-gray) };
  --_darkest-color-gray: #{ function.darkest($_color-gray) };
  --_light-color-gray: #{ function.light($_color-gray) };
  --_lighter-color-gray: #{ function.lighter($_color-gray) };
  --_lightest-color-gray: #{ function.lightest($_color-gray) };

  /**
   * Color: text.
   */
  $_color-text: #333;
  --_color-text: #{ $_color-text };
  --_dark-color-text: #{ function.dark($_color-text) };
  --_darker-color-text: #{ function.darker($_color-text) };
  --_darkest-color-text: #{ function.darkest($_color-text) };
  --_light-color-text: #{ function.light($_color-text) };
  --_lighter-color-text: #{ function.lighter($_color-text) };
  --_lightest-color-text: #{ function.lightest($_color-text) };

  /**
   * Color: white.
   */
  $_color-white: #fff;
  --_color-white: #{ $_color-white };

  /**
   * Color: red.
   */
  $_color-red: #e74c3c;
  --_color-red: #{ $_color-red };

  /**
   * Container gutter.
   */
  --_global--container-margin: var(--_s1);

  /**
   * Container max width.
   */
  --_global--container-max-width: 1280px;

  /**
   * List item indent.
   */
  --_list-item-indent: 1.5em;

  /**
   * Border color for form controls.
   */
  --_form-control-border-color: var(--_light-color-gray);
  --_form-control-border-color-hover: var(--_color-gray);
  --_form-control-border-color-focus: #85b7d9;

  /**
   * Transition properties.
   */
  --_global--transition-duration: .2s;
  --_global--transition-function-timing: ease-out;
  --_global--transition-delay: 0s;

  /**
   * Half leading. em. but no unit.
   */
  --_half-leading: 0.3;

  /**
   * Base line height. em. but no unit.
   */
  --_global--line-height: calc(1 + var(--_half-leading) * 2);

  /**
   * Font family.
   */
  --_base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; // @deprecated
  --_global--font-family: var(--_base-font-family);

  /**
   * Font size (px).
   */
  --_base-font-size-px: 16px; // @deprecated
  --_global--font-size-px: var(--_base-font-size-px);

  /**
   * Scaling factor for margin.
   */
  --_margin-scale: 1;

  /**
   * Scaling factor for h1 margin top.
   */
  --_h1-margin-top: 0;

  /**
   * Scaling factor for h1 margin bottom.
   */
  --_h1-margin-bottom: 1;

  /**
   * Scaling factor for h2 margin top.
   */
  --_h2-margin-top: 2;

  /**
   * Scaling factor for h2 margin bottom.
   */
  --_h2-margin-bottom: 1;

  /**
   * Scaling factor for h3 margin top.
   */
  --_h3-margin-top: 1.5;

  /**
   * Scaling factor for h3 margin bottom.
   */
  --_h3-margin-bottom: 1;

  /**
   * Scaling factor for h4 margin top.
   */
  --_h4-margin-top: 1.25;

  /**
   * Scaling factor for h4 margin bottom.
   */
  --_h4-margin-bottom: 1;

  /**
   * Scaling factor for h5 margin top.
   */
  --_h5-margin-top: 1;

  /**
   * Scaling factor for h5 margin bottom.
   */
  --_h5-margin-bottom: .5;

  /**
   * Scaling factor for h6 margin top.
   */
  --_h6-margin-top: 1;

  /**
   * Scaling factor for h6 margin bottom.
   */
  --_h6-margin-bottom: .5;

  /**
   * Base value for spaces. no unit.
   */
  --_space-unitless: var(--_global--line-height);
  --_space: calc(var(--_global--line-height) * 1rem);

  /**
   * z-index for page effect.
   */
  --_page-effect-z-index: 1000000;

  /**
   * Reference value for harmonic sequences.
   */
  --_harmonic-sequence-base: 8;
  --_min-harmonic-sequence-base: 9;
  --_max-harmonic-sequence-base: var(--_harmonic-sequence-base);

  /**
   * The line-height slope. If smaller, the line-height is adjusted to a smaller value as the font size increases.
   *
   * A =(1, 1.6) // 1rem / 1.6
   * B =(4, 1.1) // 4rem / 1.1
   * y = -0.1666666666667x + 1.7666666666667 // y = line-height, x = Font size ratio
   *
   * @see https://www.geogebra.org/graphing?lang=ja
   */
  --_line-height-slope: -0.16666;

  /**
   * Font size level.
   * It is not recommended to override this value with :root in order to have the size determined based on 0.
   */
  --_font-size-level: 0;

  /**
   * A set of variables used to generate space variations.
   */
  $quotient: math.div(variable.$min-breakpoint, variable.$max-breakpoint);

  /**
   * Function for quiescing fluid spaces.
   */
  @function _generate-fluid-spacing($min, $max) {
    $slope: calc((#{ $max } - #{ $min }) / (#{ variable.$max-breakpoint - variable.$min-breakpoint }));
    $yAxis: calc(#{ -1 * variable.$min-breakpoint } * #{ $slope } + #{ $min });
    $preferredValue: calc(#{ $yAxis } * 1rem + #{ $slope } * 100vw);
    @return clamp(#{ $min } * 1rem, #{ $preferredValue }, #{ $max } * 1rem);
  }

  /**
   * Modular scales for spaces.
   */
  --_ms-2: calc(var(--_space-unitless) / 3 * #{ list.nth(variable.$fibonacci-sequence, 1) });
  --_ms-1: calc(var(--_space-unitless) / 3 * #{ list.nth(variable.$fibonacci-sequence, 2) });
  --_ms0: 0rem;
  --_ms1: calc(var(--_space-unitless) / 3 * #{ list.nth(variable.$fibonacci-sequence, 3) });
  --_ms2: calc(var(--_space-unitless) / 3 * #{ list.nth(variable.$fibonacci-sequence, 4) });
  --_ms3: calc(var(--_space-unitless) / 3 * #{ list.nth(variable.$fibonacci-sequence, 5) });
  --_ms4: calc(var(--_space-unitless) / 3 * #{ list.nth(variable.$fibonacci-sequence, 6) });
  --_ms5: calc(var(--_space-unitless) / 3 * #{ list.nth(variable.$fibonacci-sequence, 7) });
  --_ms6: calc(var(--_space-unitless) / 3 * #{ list.nth(variable.$fibonacci-sequence, 8) });
  --_ms7: calc(var(--_space-unitless) / 3 * #{ list.nth(variable.$fibonacci-sequence, 9) });

  /**
   * Modular scales for spaces. rem.
   */
  --_s-2: calc(var(--_ms-2) * 1rem);
  --_s-1: calc(var(--_ms-1) * 1rem);
  --_s0: 0rem;
  --_s1: calc(var(--_ms1) * 1rem);
  --_s2: #{ _generate-fluid-spacing(calc(var(--_ms1) + var(--_ms2) * #{ $quotient }), var(--_ms2)) };
  --_s3: #{ _generate-fluid-spacing(calc(var(--_ms1) + var(--_ms3) * #{ $quotient }), var(--_ms3)) };
  --_s4: #{ _generate-fluid-spacing(calc(var(--_ms1) + var(--_ms4) * #{ $quotient }), var(--_ms4)) };
  --_s5: #{ _generate-fluid-spacing(calc(var(--_ms1) + var(--_ms5) * #{ $quotient }), var(--_ms5)) };
  --_s6: #{ _generate-fluid-spacing(calc(var(--_ms1) + var(--_ms6) * #{ $quotient }), var(--_ms6)) };
  --_s7: #{ _generate-fluid-spacing(calc(var(--_ms1) + var(--_ms7) * #{ $quotient }), var(--_ms7)) };

  /**
   * Modular scales for margins. rem.
   */
  --_margin-2: calc(var(--_s-2) * var(--_margin-scale));
  --_margin-1: calc(var(--_s-1) * var(--_margin-scale));
  --_margin0: 0rem;
  --_margin1: calc(var(--_s1) * var(--_margin-scale));
  --_margin2: calc(var(--_s2) * var(--_margin-scale));
  --_margin3: calc(var(--_s3) * var(--_margin-scale));
  --_margin4: calc(var(--_s4) * var(--_margin-scale));
  --_margin5: calc(var(--_s5) * var(--_margin-scale));
  --_margin6: calc(var(--_s6) * var(--_margin-scale));
  --_margin7: calc(var(--_s7) * var(--_margin-scale));

  /**
   * Modular scales for paddings. rem.
   */
  --_padding-2: var(--_s-2);
  --_padding-1: var(--_s-1);
  --_padding0: 0rem;
  --_padding1: var(--_s1);
  --_padding2: var(--_s2);
  --_padding3: var(--_s3);
  --_padding4: var(--_s4);
  --_padding5: var(--_s5);
  --_padding6: var(--_s6);
  --_padding7: var(--_s7);
}

* {
  /**
   * Font size formula.
   */
  --_font-size: #{ variable.$font-size };

  /**
   * Line height formula.
   */
  --_line-height: #{ variable.$line-height };

  /**
   * Fluid font size formula.
   */
  --_fluid-font-size: #{ variable.$fluid-font-size };

  box-sizing: border-box;

  &:before,
  &:after {
    box-sizing: inherit;
  }
}