// /*------------------------------------*\
//     #CONFIG
// \*------------------------------------*/

// Define all the critical values for fluid typography and modular scale.
// You can adjust all of these variables by overriding them when loading
// this file.

/// Define your baseline grid. Everything sits on this vertical grid. Works best
/// with smaller values (i.e. smaller than one third of 1rem).
///
/// @type `rem` value or `false`
///
/// @example scss - Disable the baseline grid
///   $GLOBAL-BASELINE: false !default;
$GLOBAL-BASELINE: 0.25rem !default;

/// Define your optimal line-height (unit-less). The final line-height will be
/// calculated to sit exactly on the baseline grid and may be lower than this
/// defined value.
///
/// @type number
///
/// @example scss - Sets the global line-height to `1.35`
///   $GLOBAL-LINE-HEIGHT: 1.35 !default
$GLOBAL-LINE-HEIGHT: 1.5 !default;

/// Define the ratio with which the line-height is decreased relatively for
/// larger font-sizes. That is, the calculated line-height value is getting
/// smaller in ralation to the font-size, the bigger the font-size gets.
///
/// @type number
$GLOBAL-LINE-HEIGHT-RATIO: 1 !default;

// Initiate empty Sass map, so we can (map-)merge the contents with user
// adjustments of the map.
$CONFIG: () !default;
/// Hold all the relevant settings for Fluid Typography.
///
/// @prop {length (in `px`)} min-font-size [16px] - Defines the font-size at
///   `min-viewport`.
/// @prop {length (in `px`)} max-font-size [24px] - Defines the font-size at the
///   `max-viewport`.
/// @prop {length (in `px`)} min-viewport [480px] - Defines the minimum
///   breakpoint at which the font-size does not decrease any further.
/// @prop {length (in `px`)} max-viewport [1280px] - Defines the maximum
///   breakpoint at which the font-size does not increase any further.
/// @prop {number} ratio [1.1] - Defines the [Modular Scale](https://www.modularscale.com/)
///   ratio.
/// @prop {map} <breakpoint> - [OPTIONAL] Defines a breakpoint at
///   which the ratio can change. You can nest the new ratio declaration inside
///   of `<breakpoint>`. You can add as many breakpoints as you want.
/// @prop {list} scales - List all the Modular Scale entities for which you want to
///   generate the font-sizes for.
///
/// @example scss - Sets the min font-size at `320px` viewport width to `18px`, the max font-size at `1420px` viewport width to `22px`, the Modular Scale ratio to `1.2` and creates scale entities from `-1` up to `4`.
///   $CONFIG: (
///       min-font-size: 18px,
///       max-font-size: 22px,
///       min-viewport: 320px,
///       max-viewport: 1420px,
///       ratio: 1.2,
///       scales: (
///           4,
///           3,
///           2,
///           1,
///           0,
///           -1,
///       ),
///   ) !default;
///
/// @example scss - The same config as above, but with a larger ratio from `720px` viewport width upwards.
///   $CONFIG: (
///       min-font-size: 18px,
///       max-font-size: 22px,
///       min-viewport: 320px,
///       max-viewport: 1420px,
///       ratio: 1.2,
///       720px: (
///           ratio: 1.3,
///       ),
///       scales: (
///           4,
///           3,
///           2,
///           1,
///           0,
///           -1,
///       ),
///   ) !default;
///
/// @type map
$CONFIG: map-merge(
    (
        min-font-size: 15px,
        max-font-size: 20px,
        min-viewport: 480px,
        max-viewport: 1280px,
        ratio: 1.15,
        scales: (
            6,
            5,
            4,
            3,
            2,
            1,
            0,
            -1,
            -2,
        ),
    ),
    $CONFIG
);