$SITE_CONFIG: (
  font-size-base: 20,
  modular-scale-ratio: 1.250,
);

@use "sass:math";
@use "s360-scss-toolkit" with ($config: $SITE_CONFIG);
@use "./mq";

// **************************************************
// SPACING

@function spacer($amount: 0) {
  @return s360-scss-toolkit.rem(s360-scss-toolkit.modular-scale($amount));
}

// **************************************************
// GAPS AND GRIDS

$grid-columns: 12;
$column-gap: spacer(0);

/// Converts a $count of columns into a fixed value when the container width is unknown.
///
/// @author Steven Keiser
/// @author Brian Milea
///
/// @access public
///
/// @param {number} $count
///   The number of columns.
///
/// @example
///   column-width(4);
///
/// @return {number}
///   The given $count converted to a calc().

@function column-width($count: 1) {
  @return calc((100vw - var(--safe-area-inline) - calc($column-gap * $grid-columns)) / #{ $grid-columns } * #{ $count } + #{ $column-gap * $count });
}

// **************************************************
// TEXT AND LAYOUT

$max-line-length: 80ch;
$text-line-height: 1.6;
$small-header-mq: mq.$mq-512;

// **************************************************
// UI

$site-brand-logo-size: s360-scss-toolkit.rem(140);
$site-mini-logo-size: s360-scss-toolkit.rem(30);

$cta-border-radius: 0 1em 1em 1em / 0 1em 0 1em;
