@forward "colors";
@use "colors";

//
/// = Variables =
///
$columns: 12 !default;
$row-gap: 1.5rem;

///
/// Default font stack, size, line-height
///
$font-family: Arial, sans-serif;
$font-size: 1rem;
$line-height: 1.5;

///
/// Heading font stack, line-height
///
$font-family-heading: system-ui, sans-serif;
$line-height-heading: 1;

///
/// Regular padding. Used for components like buttons, cards, and primary nav items.
///
$v-space: 1rem;
$h-space: 1.5rem;
$padding: $v-space $h-space;

///
/// Thin padding. Used for components like breadcrumbs, radios, and within dropdowns.
///
$thin-v-space: .5rem;
$thin-h-space: 1rem;
$thin-padding: $thin-v-space $thin-h-space;


///
/// Media Query Breakpoints
///
$breakpoints: (
    sm: (width:      0, gap: 16px),
    md: (width:  625px, gap: 32px),
    lg: (width: 1121px, gap: 48px),
    xl: (width: 1393px, gap: 48px),
) !default;


///
/// Shadows
///
$low-shadow: 0 0px 0.5px rgba(0, 0, 0, 0.057), 0 0px 1.8px rgba(0, 0, 0, 0.083), 0 0px 8px rgba(0, 0, 0, 0.14);
$med-shadow: 0 0.5px 1.1px rgba(0, 0, 0, 0.057), 0 1.8px 3.6px rgba(0, 0, 0, 0.083), 0 8px 16px rgba(0, 0, 0, 0.14);
$high-shadow: 0 1.1px 2.1px rgba(0, 0, 0, 0.057), 0 3.6px 7.1px rgba(0, 0, 0, 0.083), 0 16px 32px rgba(0, 0, 0, 0.14);


///
/// Easings and Durations
///
$ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
$ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0);
$ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);

$fade-easing: $ease-out-quint;
$entrance-easing: $ease-out-quint;
$exit-easing: $ease-in-quint;

///
/// These are recommended durations for transitions. They are custom properties
/// so they can be set to 0 when a visitor prefers-reduced-motion.
///
/// Fast is for micro-animations such as fades.
///
$fast: 150ms;

///
/// Moderate is for mid-sized animations, such as mega menus and notifications.
///
$moderate: 250ms;

///
/// Slow is for animations meant for large animations such as page transitions
/// and background fades.
///
$slow: 400ms;