// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

// Color system
$black: #263238;
$crowdin-primary-green-600: #43a047;
$crowdin-primary-green-400: #66bb6a;
$crowdin-primary-green-700: #388e3c;
$crowdin-primary-green-on-dark: #4eb753;
$crowdin-primary-green-600-01: rgba($crowdin-primary-green-600, .1);
$crowdin-primary-green-600-02: rgba($crowdin-primary-green-600, .2);
$crowdin-primary-dark: $black;
$crowdin-primary-dark-01: rgba($crowdin-primary-dark, .1);
$crowdin-primary-blue-gray: #eceff1;
$crowdin-primary-blue-gray-100: #cfd8dc;
$crowdin-primary-blue-gray-300: #90A4AE;
$crowdin-primary-blue-gray-300-01: rgba($crowdin-primary-blue-gray-300, .1);
$crowdin-primary-blue-gray-300-02: rgba($crowdin-primary-blue-gray-300, .2);
$crowdin-primary-blue-gray-05: rgba($crowdin-primary-blue-gray, .5);
$search-input-bg: rgba($crowdin-primary-blue-gray, .3);
$crowdin-dark: $black;
$crowdin-gray: $black;
$crowdin-gray-005: rgba($crowdin-gray, .05);
$crowdin-gray-01: rgba($crowdin-gray, .1);
$crowdin-gray-03: rgba($crowdin-gray, .3);
$crowdin-gray-087: rgba($crowdin-gray, .87);
$crowdin-gray-054: rgba($crowdin-gray, .54);
$crowdin-gray: #282c34;
$white: #ffffff;
$white-012: rgba($white, .12);
$white-054: rgba($white, .54);
$white-087: rgba($white, .87);
$crowdin-primary-red: #db3552;
$crowdin-primary-red-700: #d32f2f;
$crowdin-red-on-dark: #ef233c;
$crowdin-primary-blue-500: #2196f3;
$crowdin-primary-blue-600: #1e88e5;
$crowdin-primary-violet: #222f63;
$crowdin-primary-blue-50: #e1f5fe;
$crowdin-primary-brown-500: #795548;
$crowdin-primary-amber-50: #fff8e1;

$api-green-alert: #00aa13;
$api-red-alert: #e53935;

$primary: $crowdin-primary-green-600 !default;
$info:  $crowdin-primary-blue-500 !default;
$dark: $black !default;
$green:   #28a745 !default;

$theme-colors: (
    primary: $crowdin-primary-green-600,
    secondary: $crowdin-primary-blue-gray-100,
    info: $info,
    success: $green,
    dark: $dark
);

//Fonts
$font-family-sans-serif: 'Noto Sans KR', sans-serif;
$font-family-title: 'Poppins', sans-serif;

$font-family-base: $font-family-sans-serif;

$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-11: .6875*$font-size-base;
$font-size-18: 1.125*$font-size-base;

$h1-font-size: 1.912 * $font-size-base;
$h2-font-size: 1.616 * $font-size-base;
$h3-font-size: 1.471 * $font-size-base;
$h4-font-size: 1.3 * $font-size-base;
$h5-font-size: 1.243 * $font-size-base;
$h6-font-size: 1.132 * $font-size-base;

$headings-font-weight: 400;
$headings-line-height: 1.2;
$headings-color: $crowdin-primary-dark;

// Spacing
$spacer-xs: 1rem;
$spacer: 1.5rem;
$spacer-xl: $spacer * 4;

// Body
$body-bg: $white;
$body-color: $crowdin-gray-087;
$text-muted: $crowdin-gray-054!default;

// Links
// Style anchor elements.
$link-color: $crowdin-primary-green-400;
$link-decoration: none;
$link-hover-color: $crowdin-primary-green-400;
$link-hover-decoration: underline;

// Components
// Define common padding and border radius sizes and more.
$border-width: 1px;
$border-radius: .25rem;
$border-radius-lg: .5rem;
$border-radius-sm: .25rem;

$crowdin-primary-box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
$box-shadow: $crowdin-primary-box-shadow;
$component-active-color: $white !default;

$transition-base: all .2s ease-in-out;
$transition-fade: opacity .15s linear;
$transition-collapse: height .35s ease;

// Buttons + Forms
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$input-btn-padding-y: .625rem;
$input-btn-padding-x: 1.5rem;
$input-btn-padding-y-sm: .375rem;
$btn-padding-y-sm: $input-btn-padding-y-sm;
$btn-padding-x-sm: 1rem;
$input-btn-font-family: $font-family-sans-serif;
$input-btn-font-size: .875rem;
$input-btn-line-height: 1.75;
$input-btn-border-width: $border-width !default;

// Buttons
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-padding-y: $input-btn-padding-y;
$btn-padding-x: $input-btn-padding-x;
$btn-font-family: $input-btn-font-family;
$btn-font-size: $input-btn-font-size;
$btn-line-height: $input-btn-line-height;
$btn-font-weight: 500;
$btn-border-width: .125rem;
$input-btn-focus-box-shadow: none;
$btn-box-shadow: none;
$btn-disabled-opacity: 1;
$btn-active-box-shadow: none;
$btn-focus-box-shadow: none !important;
$btn-link-disabled-color: $crowdin-gray-03;

// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius;
$btn-border-radius-lg: $border-radius-lg;
$btn-border-radius-sm: $border-radius-sm;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

// Forms
$input-padding-y: $input-btn-padding-y;
$input-padding-x: 1rem;
$input-font-size: 1rem;
$input-line-height: 1.75;
$input-bg: $white;
$input-disabled-bg: $crowdin-primary-blue-gray;
$input-border-color: rgba($black, .12) !default;
$input-box-shadow: none;
$input-focus-border-color: $crowdin-primary-green-600;
$input-focus-box-shadow: none;
$input-placeholder-color: $crowdin-gray-03;
$input-height: calc(#{$input-line-height}rem + #{$input-padding-y * 2});
