@use 'sass:math';

/* ==========================================================================
   Design System
   Variables
   ========================================================================== */

//
// Theme variables
//

// Color variables

// body
$text: var(--black);

// a
$link-text: var(--pacific);
$link-underline: var(--pacific);
$link-text-visited: var(--teal);
$link-underline-visited: var(--teal);
$link-text-hover: var(--pacific-dark);
$link-underline-hover: var(--pacific-dark);
$link-text-active: var(--navy);
$link-underline-active: var(--navy);

// table
$table-head-text: $text;
$table-head-bg: var(--gray-5);
$table-border: var(--gray);

// code
$code-text: $text;
$code-bg: var(--gray-5);

// Sizing variables

$base-font-size: 16;
$base-font-size-px: 16px;
$base-line-height-px: 22px;
$base-line-height: math.div($base-line-height-px, $base-font-size-px);
$size-xl: 48px; // Super-size

$size-i: 34px; // h1-size
$size-ii: 26px; // h2-size
$size-iii: 22px; // h3-size
$size-iv: 18px; // h4-size
$size-v: 14px; // h5-site
$size-vi: 12px; // h6-size
$size-code: 13px; // Custom size only for Mono code blocks

// Icon variables

// Icons' SVG viewbox are a consistent 19px (h) x variable (w).
// The height matches the 19px rendered canvas of text set in Avenir Next
// sized at 16px (19/16 = 1.1875).
$cf-icon-height: 1.1875em;

// Button sizing variables

$btn-font-size: $base-font-size-px;
$btn-border-radius-size: 4px;
$btn-v-padding: 8px;
$btn-h-padding: 14px;

// Grid variables

$grid-wrapper-width: 1230px;
$grid-gutter-width: 30px;
$grid-total-columns: 12;

// Layout variables

// .block
$block-bg: var(--gray-5);
$block-border: var(--gray-40);
$block-border-top: $block-border;
$block-border-right: $block-border;
$block-border-bottom: $block-border;
$block-border-left: $block-border;

// .content__main
$content-main-border: var(--gray-40);

// Form variables

// .a-text-input borders
$input-border: var(--gray-60);
$input-border-hover: var(--pacific);
$input-border-focused: var(--pacific);
$input-border-error: var(--red);
$input-border-error-hover: var(--red-dark);
$input-border-warning: var(--gold);
$input-border-warning-hover: var(--gold-dark);
$input-border-success: var(--green);
$input-border-success-hover: var(--green-dark);

// .a-text-input backgrounds
$input-bg: var(--white);
$input-bg-selected: var(--pacific);
$input-bg-disabled: var(--gray-10);
$input-bg-disabled-selected: var(--gray-40);

// .a-text-input text
$input-text: var(--black);
$input-text-disabled: var(--gray-dark);
$input-text-placeholder: var(--gray-dark);

// .a-text-input icons
$input-icon: var(--gray);
$input-icon-success: var(--green);
$input-icon-warning: var(--gold);
$input-icon-error: var(--red);

// .a-select
$select-border: $input-border;
$select-icon-bg: var(--gray-10);
$select-text-disabled: $input-text-disabled;

// .m-form-field
$form-field-input-border: $input-border;
$form-field-input-border-disabled: var(--gray-60);
$form-field-inset: var(--white);

// .m-form-field--lg-target
$form-field-input-lg-target-bg: var(--gray-10);
$form-field-input-lg-target-bg-selected: var(--pacific-20);
$form-field-input-lg-target-bg-disabled: var(--gray-20);
$form-field-input-lg-target-border: var(--pacific);

// .a-label__helper
$label-helper: var(--gray-dark);

// .a-range borders
$range-border: var(--gray-40);
$range-border-focused: var(--pacific);

// .a-range backgrounds
$range-bg: var(--gray-10);
$range-bg-track: var(--gray-80);
$range-bg-focused: var(--pacific-20);

// Sizing variables

// .a-select
$select-height: 35px;

// Featured Content Module sizing variables.
$fcm-visual-width: 270px;
$fcm-min-height: 220px;