// Typography // ------------------------------------------- $font-size-base: 16px; $font-size-small: 14px; $font-size-smaller: 12px; $font-size-big: 18px; $font-size-bigger: 22px; $font-size-huge: 28px; $font-family-base: "PT Sans", Arial, sans-serif; $line-height-base: 20 / 16; // Colors // ------------------------------------------- $color-black: #000; $color-white: #fff; $color-blue: #00c6ff; $color-red: #ff3f49; $color-red-light: #ff878d; $color-grey: #666; $color-grey-input: #949494; $color-grey-dark: #333; $color-grey-medium: #888; $color-grey-light: #ccc; $color-grey-lighter: #ddd; $color-grey-lighterer: #f4f4f4; $color-grey-lightest: #f9f9f9; $color-grey-dark-alpha: rgba(0, 0, 0, 0.80); // Semantic Colors // ------------------------------------------- $color-bg: $color-white; $color-bg-dark: $color-grey-lighterer; $color-text: $color-grey-dark; $color-text-light: $color-grey-medium; $color-main: $color-blue; $color-main-text: $color-white; $color-error: $color-red; $color-error-area: $color-red-light; $color-error-text: $color-white; $color-border-light: $color-grey-lighter; $color-touch-active: rgba(0, 0, 0, 0.1); // Breakpoints // ------------------------------------------- $screen-xs-max: 419px; $screen-sm-min: 420px; $screen-sm-max: 699px; $screen-md-min: 700px; $screen-md-max: 1099px; $screen-lg-min: 1100px;