// Copyright 2018-Present Okta, Inc.

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at

// http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// Typography
$body-font-family: 'Whyte', '-apple-system',  'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
$mono-font-family: 'Inconsolata', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

$base-font-size: 14px; // 1rem @ 14px
$scale-ratio: 1.1487;
$base-line-height: 1.7142857;
$title-line-height: 1.3;
$max-line-length: 32em;

// Establish Type Scale
$size-title-1: ms(5);
$size-title-2: ms(4);
$size-title-3: ms(3);
$size-title-4: ms(2);
$size-title-5: ms(1);
$size-title-6: ms(0);

$size-body-sentence: ms(1);
$size-body-base: ms(0);
$size-body-caption: ms(-1);

// Semantic Variables
$color-primary-light: cv('blue', '300');
$color-primary-base: cv('blue', '500');
$color-primary-dark: cv('blue', '900');

$color-danger-light: cv('red', '300');
$color-danger-base: cv('red', '500');
$color-danger-dark: cv('red', '900');

// TODO: color-caution-base and color-success-base not documented
$color-caution-base: cv('yellow', '500');
$color-success-base: cv('green', '500');

// Background
$color-danger-base-disabled: cv('red', '300');

// Outlines
$focus-ring-primary: $color-primary-light;
$focus-ring-danger: $color-danger-light;

// Text Color
$text-body: cv('gray', '900');
$text-heading: cv('gray', '900');
$text-sub: cv('gray', '600');
$text-code: cv('gray', '900');
$text-danger: $color-danger-base;
$text-danger-disabled: $color-danger-light;

// Space
$spacing-m: ms(0) * $base-line-height;
$spacing-l: $spacing-m * 2;
$spacing-xl: $spacing-l * 2;
$spacing-s: $spacing-m / 2;
$spacing-xs: $spacing-s / 2;

// Input disabled
$bg-input-disabled: cv('gray', '000');
$border-input-disabled: cv('gray', '200');

// TODO: Sort the rest out, these come from a now defunct variables.scss file.
//       need to be documented

// Spacing Variables
$spacing-m-em: 1em * $base-line-height;
$spacing-l-em: $spacing-m-em * 2;
$spacing-xl-em: $spacing-l-em * 2;
$spacing-s-em: $spacing-m-em / 2;
$spacing-xs-em: $spacing-s-em / 2;

// Animation/Transition Baselines

$base-duration: 100ms;
$base-timing: linear;

// Borders
$border-color-ui: cv('gray', '500');
$border-color-display: cv('gray', '200');
$base-border-radius: 4px;