//
// THE COYOTE DESIGN SYSTEM
// This is a simple Sass-based implementation of the specs in doc_assets/
// It uses the concepts from https://maintainablecss.com/ extensively.
//

// VARIABLES
// Color scheme (derived from Material UI: https://www.materialui.co/colors)
$background: #FFFFFF
$border: #B0BEC5
$border-light: lighten($border, 16%)
$input: #EEEEEE
$highlight: lighten($input, 3%)
$placeholder: #616161
$text: #525252
$text-dark: #212121
$text-light: $background
$tint: #005A9E
$tint-background: lighten($tint, 65%)

$status: (aside: #673AB7, danger: #B71C1C, error: #B71C1C, info: $tint, neutral: $placeholder, okay: #4CAF50, partial: #F57C00, success: #4CAF50, warning: darken(#FDD835, 20%))

// Typography
$font-family-mono: "Space Mono", "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace
$font-family-text: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif
$font-size: 16px
$font-size-control: $font-size - 2px
$font-size-small: round($font-size / 1.5)
$line-height-ratio: 1.35
$line-height: round($font-size * $line-height-ratio)
$gutter: round($line-height / 2)
$h1-size: round($font-size * $line-height-ratio * $line-height-ratio)
$h2-size: round($font-size * $line-height-ratio)
$heading-line-height: $h1-size + $gutter

// Spacing
$list-padding: $gutter * 2
$input-padding: $gutter / 1.5
$nav-height: 5 * $gutter

// COMPONENTS
// Selectors
$text-inputs: "input[type=color], input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=file], input[type=month], input[type=number], input[type=password], input[type=research], input[type=search], input[type=tel], input[type=text], input[type=url], input[type=week]"
$controls: "#{$text-inputs}, select, textarea"

// Inputs
$border-radius: 4px
$input-height: 40px
$checkbox-size: $gutter * 2
$checkbox-strike-area: $list-padding + $checkbox-size + $input-padding

// Shadows
$focus-shadow-opacity: 0.5
$focus-shadow-size: 0 0 0 3px
$focus-shadow-color: rgba($tint, $focus-shadow-opacity)
$focus-shadow: $focus-shadow-color $focus-shadow-size
$focus-shadow-inset: inset $focus-shadow-color $focus-shadow-size
$shadow-level-1: rgba($text, 0.3) 0 2px 5px
$shadow-level-2: rgba($text, 0.3) 0 3px 8px

// Layering
$z-index-content: 0
$z-index-modal: 100

// ANIMATIONS
$swift: cubic-bezier(0.4, 0, 0.2, 1)
$swifter: cubic-bezier(0.4, 0, 0, 1)
$heavy: cubic-bezier(0.7, 0, 0.6, 1)
$swift-in: cubic-bezier(0, 0, 0.2, 1)
$swift-out: cubic-bezier(0.4, 0, 1, 1)

// MEDIA QUERIES
$breakpoint-xl-screen: 1280px
$breakpoint-large-screen: 1025px
$breakpoint-medium-screen: $breakpoint-large-screen - 1px
$breakpoint-small-screen: 768px
$breakpoint-tiny-screen: 480px

// Import all of the mixins we need to build our site
@import lib/*

// Import universal app styles
@import app/*

// Each component lives in its own Sass file in the components/ subdirectory.
// Let's import them all!
@import components/*

// Import semantic elements of the app
@import elements/*
