1 files changed, 103 insertions, 0 deletions
diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss
new file mode 100644
index 0000000..a8a22a8
--- /dev/null
+++ b/src/scss/abstracts/_variables.scss
@@ -0,0 +1,103 @@
+@use "sass:math";
+@use "../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,
+);
+
+// Cannot declare the following function in partials due to module loop.
+// Also, it will only be used in this file so it is not 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: (
+  "xs": fun.convert-px(568, "em"),
+  "sm": fun.convert-px(768, "em"),
+  "md": fun.convert-px(1024, "em"),
+  "lg": fun.convert-px(1200, "em"),
+  "xl": fun.convert-px(1600, "em"),
+  "2xl": fun.convert-px(1920, "em"),
+);
+
+//===========================================================================
+// 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);
+
+$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_sm: $font-size_base-rem * math.pow($font-size_ratio, -1);
+$font-size_md: $font-size_base-rem * math.pow($font-size_ratio, 0);
+$font-size_lg: $font-size_base-rem * math.pow($font-size_ratio, 1);
+$font-size_xl: $font-size_base-rem * math.pow($font-size_ratio, 2);
+$font-size_2xl: $font-size_base-rem * math.pow($font-size_ratio, 3);
+$font-size_3xl: $font-size_base-rem * math.pow($font-size_ratio, 4);
+
+//============================================================================
+// Spacings
+//============================================================================
+
+$spacing_ratio: get-ratio("golden-number");
+$spacing_base: $spacing_ratio * 1rem;
+
+$spacing_3xs: math.div($spacing_base, 4);
+$spacing_2xs: math.div($spacing_base, 3);
+$spacing_xs: math.div($spacing_base, 2);
+$spacing_sm: math.div($spacing_base, 1.5);
+$spacing_md: $spacing_base;
+$spacing_lg: $spacing_base * 1.5;
+
+//============================================================================
+// Colors
+//============================================================================
+
+$color_black-squeeze: hsl(212, 55%, 97%);
+$color_catskill-white: hsl(212, 53%, 92%);
+$color_link-water: hsl(212, 51%, 87%);
+$color_geyser: hsl(212, 27%, 83%);
+$color_gull-gray: hsl(212, 15%, 66%);
+$color_pale-sky: hsl(212, 13%, 46%);
+$color_nile-blue: hsl(212, 47%, 19%);
+$color_firefly: hsl(212, 45%, 11%);
+$color_chambray: hsl(212, 45%, 40%);
+$color_chathams-blue: hsl(212, 65%, 28%);
+$color_chathams-blue-light: hsl(212, 90%, 30%);
+$color_chathams-blue-light-opacity-25: hsla(212, 90%, 30%, 0.25);
+$color_chathams-blue-dark: hsl(212, 70%, 25%);