/**
 * Vars
 */

// Vars stored in JSON for sharing with JS
json('vars/breakpoints.json')
json('vars/dimensions.json')
json('vars/colors.json')

// Whitespace
gutter = 60px
gutter-mobile = 20px
max-w-s = 750px + gutter * 2
max-w-m = 1060px + gutter * 2
max-w-l = 1280px + gutter * 2
max-w-xl = 1440px
max-w-full = 2560px

// Header config
header-z = 10

// Button sizing
btn-desktop-h = 40px
btn-mobile-h = 36px
btn-small-h = 30px
btn-pad-h = 30px
btn-pad-h-min = 30px
btn-pad-h-small = 20px

// Input sizing
input-h = btn-desktop-h
input-h-min = btn-mobile-h

// Typography
body-font-size = 16px
body-font-size-min = 14px
body-line-height = 1.5

// Spacing
spacing-xl = 120px
spacing-xl-min = spacing-xl * 0.5
spacing-l = 90px
spacing-l-min = spacing-l * 0.6
spacing-m = 45px
spacing-m-min = spacing-m * 0.7
spacing-s = 30px
spacing-s-min = spacing-s * 0.8
spacing-xs = 15px
spacing-xs-min = spacing-xs * 0.9
spacing-xxs = 8px
spacing-xxs-min = spacing-xxs * 0.9

// UI
card-radius = 5px

// Animation
base-speed = 200ms

/**
 * Vendor
 */

// The Bukwild shared stylus library
support-for-ie = false // Don't generate px values with rem function
body-font-size = 16px
@import '~bukwild-stylus-library'

/**
 * Functions
 */

// Shorthand for setting font styles with fixed font size
fixed-font(style, size = null, color = null)

	// Style switch statement
	if style == 'body'
		font-family ui-sans-serif, system-ui, sans-serif
		letter-spacing -0.01em
		font-weight 400
	else if style == 'code'
		font-family ui-monospace, monospace
		font-weight 400

	// Set size and color if provided
	if size
		font-size size
	if color
		color color

// Shorthand for setting font styles with fluid font-size
fluid-font(style,
	max-size = null,
	min-size = null,
	color = null,
	max-break = null,
	min-break = 375)

	// Set font-family and other configs
	fixed-font style, null, color

	// Set font-size
	fluid font-size, max-size, min-size, max-break, min-break

// Style guide styles. The line-height fractions are based on the brand
// style guidelines
style-h1()
	fluid-font 'body', 72, 50
	line-height 1.1
style-h2()
	fluid-font 'body', 48, 30
	line-height 1.2
style-h3()
	fluid-font 'body', 30, 24
	line-height 1.3
style-h4()
	fluid-font 'body', 22, 20
	line-height 1.3
style-h5()
	fluid-font 'body', 18, 16
	line-height 1.3
style-body()
	fluid-font 'body', body-font-size, body-font-size-min
	line-height body-line-height

// Shorthand for making fluid spacing
fluid-space(property, size, negative = false)
	mod = negative ? -1 : 1
	fluid property,
		mod * lookup('spacing-'+size),
		mod * lookup('spacing-'+size+'-min')

// separate header media queries
// because header breaks at a unique width
when-desktop-header()
	@media(min-width header-break + 1px)
		{block}
when-mobile-header()
	@media(max-width header-break)
		{block}