@import './partials/_ratios.sss'

/**
  * Misc
  */
$transition: 300ms

/**
  * Page
  */
$max-width: 80vw


/**
  * Fonts
  */
$sans: 'helvetica', 'calibri', 'sans-serif'
$serif: 'georgia', 'serif'
$mono: 'input', 'consolas','monospace'


/**
  * Modular Scale
  */
$base: 0.5em
$scale: $golden

$ms-0: calc($base)
$ms-1: calc($ms-0 * $scale)
$ms-2: calc($ms-1 * $scale)
$ms-3: calc($ms-2 * $scale)
$ms-4: calc($ms-3 * $scale)
$ms-5: calc($ms-4 * $scale)
$ms-6: calc($ms-5 * $scale)
$ms-7: calc($ms-6 * $scale)
$ms-8: calc($ms-7 * $scale)
$ms-9: calc($ms-8 * $scale)

/**
  * Color Scale
  */
$cbase: 0.5
$cs-0: calc($cbase)
$cs-1: calc($cs-0 * $scale)
$cs-2: calc($cs-1 * $scale)
$cs-3: calc($cs-2 * $scale)
$cs-4: calc($cs-3 * $scale)
$cs-5: calc($cs-4 * $scale)


/** 
  * Named Breakpoints
  */
@custom-media --tiny-viewport (min-width: 375px)
@custom-media --small-viewport (min-width: 480px)
@custom-media --medium-viewport (min-width: 768px)
@custom-media --large-viewport (min-width: 960px)
@custom-media --extra-large-viewport (min-width: 1080px)
@custom-media --huge-viewport (min-width: 1200px)
@custom-media --ultra-viewport (min-width: 1440px)