/* variables */

/* should match --hiq-unitless-upper-font-range with px unit */
@custom-media --hiq-lower-font-range (min-width: 460px);
@custom-media --hiq-upper-font-range (min-width: 900px);

:root {
  /* theme variables */

  /* gray palette */
  --hiq-color-gray-1: hsl(220, 10%, 5%);
  --hiq-color-gray-2: hsl(220, 10%, 10%);
  --hiq-color-gray-3: hsl(220, 10%, 20%);
  --hiq-color-gray-4: hsl(220, 10%, 40%);
  --hiq-color-gray-5: hsl(220, 10%, 60%);
  --hiq-color-gray-6: hsl(220, 10%, 90%);
  --hiq-color-gray-7: hsl(220, 10%, 95%);
  --hiq-color-gray-8: hsl(220, 10%, 98%);

  /* semantic palette */
  --hiq-color-primary: hsl(210, 100%, 42%);
  --hiq-color-success: hsl(158, 73%, 48%);
  --hiq-color-warning: hsl(46, 97%, 64%);
  --hiq-color-danger: hsl(352, 95%, 61%);

  /* global applied colors */
  --hiq-html-background-color: hsl(0, 0%, 100%);
  --hiq-body-background-color: hsl(0, 0%, 100%);
  --hiq-disabled-border-color: var(--hiq-color-gray-6);
  --hiq-disabled-background-color: var(--hiq-color-gray-7);
  --hiq-disabled-text-color: var(--hiq-color-gray-5);
  --hiq-border-color: var(--hiq-color-gray-6);

  /* layout variables */

  /* containers */
  --hiq-max-container-width: 74rem;
  --hiq-container-horizontal-gap: 2rem;

  /* spacing */
  --hiq-block-element-margin-bottom: 1rem;

  /* border & outline */
  --hiq-border-radius: .2rem;
  --hiq-outline-width: .2rem;
  --hiq-outline-color: hsl(210, 100%, 85%);

  /* transitions */
  --hiq-speed: .1s;
  --hiq-easing: ease-out;

  /* typography variables */

  /* global typography variables */
  --hiq-text-rendering: optimizeLegibility;
  --hiq-letter-spacing-base: 0;

  /* font families */
  /* stylelint-disable value-keyword-case */
  --hiq-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --hiq-font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
  /* stylelint-enable value-keyword-case */

  /* responsive sizing */

  /* unitless base font size variables in px */
  --hiq-unitless-min-font-size: 16;
  --hiq-unitless-max-font-size: 16;

  /* unitless viewport widths in px when min/max font sizes will apply */
  --hiq-unitless-lower-font-range: 460;
  --hiq-unitless-upper-font-range: 900;

  /* font sizes */
  --hiq-font-size-1: 2.5rem;
  --hiq-font-size-2: 2rem;
  --hiq-font-size-3: 1.75rem;
  --hiq-font-size-4: 1.5rem;
  --hiq-font-size-5: 1rem;
  --hiq-font-size-6: .875rem;
  --hiq-font-size-base: var(--hiq-font-size-5);
  --hiq-font-size-large: var(--hiq-font-size-4);
  --hiq-font-size-small: var(--hiq-font-size-6);

  /* base unitless line heights */
  --hiq-line-height-base: 1.5;
  --hiq-heading-line-height: 1.2;

  /* font weights */
  --hiq-font-weight-light: 300;
  --hiq-font-weight-normal: 400;
  --hiq-font-weight-medium: 500;
  --hiq-font-weight-semibold: 600;
  --hiq-font-weight-bold: 700;

  /* applied font weights */
  --hiq-font-weight-base: var(--hiq-font-weight-normal);
  --hiq-heading-font-weight: var(--hiq-font-weight-medium);
  --hiq-description-list-title-font-weight: var(--hiq-font-weight-semibold);

  /* global text color */
  --hiq-text-color: var(--hiq-color-gray-2);

  /* inline text elements */
  --hiq-mark-color: hsl(50, 81%, 94%);
  --hiq-deleted-color: hsl(331, 93%, 67%);
  --hiq-inserted-color: hsl(210, 100%, 95%);

  /* user selection */
  --hiq-selection-color: hsl(210, 100%, 90%);

  /* lists */
  --hiq-list-margin-left: 1rem;
  --hiq-unordered-list-style: disc;

  /* blockquotes */
  --hiq-blockquote-font-size: var(--hiq-font-size-4);
  --hiq-blockquote-line-height: var(--hiq-heading-line-height);
  --hiq-blockquote-citation-color: var(--hiq-color-gray-5);

  /* horizontal rules */
  --hiq-horizontal-rule-height: 1px;
  --hiq-horizontal-rule-color: var(--hiq-color-primary);

  /* links */
  --hiq-link-color: var(--hiq-color-primary);
  --hiq-link-hover-color: hsl(210, 100%, 40%);
  --hiq-link-active-color: hsl(210, 100%, 40%);
  --hiq-link-text-decoration: none;

  /* button variables */
  --hiq-button-vertical-padding: .4rem;
  --hiq-button-horizontal-padding: .75rem;
  --hiq-button-small-vertical-padding: .25rem;
  --hiq-button-small-horizontal-padding: .4rem;
  --hiq-button-border-width: 1px;
  --hiq-button-border-radius: var(--hiq-border-radius);
  --hiq-button-font-weight: var(--hiq-font-weight-medium);

  /* static colors */
  --hiq-button-border-color: var(--hiq-color-primary);
  --hiq-button-background-color: var(--hiq-color-primary);
  --hiq-button-text-color: hsl(0, 0%, 100%);

  /* hover colors */
  --hiq-button-hover-border-color: hsl(210, 100%, 40%);
  --hiq-button-hover-background-color: hsl(210, 100%, 40%);
  --hiq-button-hover-text-color: hsl(0, 0%, 100%);

  /* active colors */
  --hiq-button-active-border-color: hsl(210, 100%, 30%);
  --hiq-button-active-background-color: hsl(210, 100%, 30%);
  --hiq-button-active-text-color: hsl(0, 0%, 100%);

  /* code element variables */

  /* code */
  --hiq-code-padding-vertical: .25rem;
  --hiq-code-padding-horizontal: .5rem;
  --hiq-code-border-color: var(--hiq-color-gray-6);
  --hiq-code-font-size: var(--hiq-font-size-small);
  --hiq-code-background-color: var(--hiq-color-gray-7);
  --hiq-code-text-color: var(--hiq-text-color);

  /* pre */
  --hiq-pre-padding-vertical: 1.25rem;
  --hiq-pre-padding-horizontal: 1.5rem;
  --hiq-pre-border-color: var(--hiq-color-gray-6);
  --hiq-pre-background-color: transparent;
  --hiq-pre-text-color: var(--hiq-color-gray-4);

  /* kbd */
  --hiq-kbd-padding-vertical: .2rem;
  --hiq-kbd-padding-horizontal: .4rem;
  --hiq-kbd-border-color: var(--hiq-color-gray-6);
  --hiq-nested-kbd-font-weight: var(--hiq-font-weight-medium);
  --hiq-kbd-background-color: transparent;
  --hiq-kbd-text-color: var(--hiq-text-color);

  /* media/embed variables */

  --hiq-figcaption-margin-top: .5rem;
  --hiq-figcaption-font-weight: var(--hiq-font-weight-normal);
  --hiq-figcaption-text-color: var(--hiq-color-gray-5);

  /* table variables */

  --hiq-table-head-border-width: var(--hiq-table-cell-border-width);
  --hiq-table-foot-border-width: var(--hiq-table-cell-border-width);
  --hiq-table-caption-padding-vertical: .5rem;
  --hiq-table-caption-text-color: var(--hiq-color-gray-5);
  --hiq-table-caption-font-weight: var(--hiq-font-weight-semibold);
  --hiq-table-cell-padding-vertical: .5rem;
  --hiq-table-cell-padding-horizontal: .75rem;
  --hiq-table-cell-border-width: 1px;
  --hiq-table-cell-border-color: var(--hiq-color-gray-6);
  --hiq-table-cell-background-color: hsl(0, 0%, 100%);
  --hiq-table-heading-background-color: var(--hiq-color-gray-7);
  --hiq-table-heading-text-color: var(--hiq-color-gray-4);
  --hiq-table-heading-font-weight: var(--hiq-font-weight-medium);

  /* forms/inputs variables */

  /* fieldsets */
  --hiq-fieldset-padding-vertical: 0;
  --hiq-fieldset-padding-horizontal: 0;
  --hiq-fieldset-border-width: 0;
  --hiq-fieldset-border-color: transparent;

  /* legends */
  --hiq-legend-margin-bottom: var(--hiq-block-element-margin-bottom);
  --hiq-legend-font-weight: var(--hiq-font-weight-semibold);

  /* labels */
  --hiq-label-margin-bottom: .5rem;
  --hiq-label-font-weight: var(--hiq-font-weight-semibold);

  /* input validation */
  --hiq-input-invalid-border-color: var(--hiq-color-danger);
  --hiq-input-valid-border-color: var(--hiq-color-success);

  /* text inputs */
  --hiq-input-height: 2.5rem;
  --hiq-input-padding-vertical: 0;
  --hiq-input-padding-horizontal: .75rem;
  --hiq-input-border-width: 1px;
  --hiq-input-border-radius: var(--hiq-border-radius);

  /* static input colors */
  --hiq-input-border-color: var(--hiq-color-gray-6);
  --hiq-input-background-color: transparent;
  --hiq-input-text-color: var(--hiq-text-color);
  --hiq-input-placeholder-color: var(--hiq-color-gray-4);

  /* hover input colors */
  --hiq-input-hover-border-color: var(--hiq-input-border-color);
  --hiq-input-hover-background-color: var(--hiq-input-background-color);
  --hiq-input-hover-text-color: var(--hiq-input-text-color);

  /* focus input colors */
  --hiq-input-focus-border-color: var(--hiq-input-border-color);
  --hiq-input-focus-background-color: var(--hiq-input-background-color);
  --hiq-input-focus-text-color: var(--hiq-input-text-color);

  /* textareas */
  --hiq-textarea-padding-vertical: .5rem;
  --hiq-textarea-padding-horizontal: .75rem;

  /* selects */
  --hiq-select-background-image: url("data:image/svg+xml,%3Csvg width='30' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 16L0 0h30z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
  --hiq-select-background-position: right 1rem center;
  --hiq-select-background-color: transparent;
  --hiq-select-background-size: .75rem;
  --hiq-select-multiple-checked-background-color: var(--hiq-color-primary);
  --hiq-select-multiple-padding-vertical: .75rem;

  /* checkboxes */
  --hiq-checkbox-margin-bottom: .5rem;
  --hiq-checkbox-label-padding-horizontal: 2rem;
  --hiq-checkbox-label-font-weight: var(--hiq-font-weight-normal);
  --hiq-checkbox-width: 1rem;
  --hiq-checkbox-height: 1rem;
  --hiq-checkbox-border-width: 1px;
  --hiq-checkbox-border-color: transparent;
  --hiq-checkbox-border-radius: var(--hiq-border-radius);
  --hiq-checkbox-background-color: var(--hiq-color-gray-6);
  --hiq-checkbox-hover-background-color: var(--hiq-color-gray-5);
  --hiq-checkbox-focus-background-color: var(--hiq-color-gray-5);
  --hiq-checkbox-checked-border-color: var(--hiq-color-primary);
  --hiq-checkbox-checked-background-color: var(--hiq-color-primary);
  --hiq-checkbox-check-width: .25rem;
  --hiq-checkbox-check-height: .5rem;
  --hiq-checkbox-check-border-width: 2px;
  --hiq-checkbox-check-color: hsl(0, 0%, 100%);
  --hiq-checkbox-indeterminate-width: .5rem;

  /* radio buttons */
  --hiq-radio-margin-bottom: .125rem;
  --hiq-radio-label-padding-horizontal: 1.5em;
  --hiq-radio-label-font-weight: var(--hiq-font-weight-normal);
  --hiq-radio-width: 1.2rem;
  --hiq-radio-height: 1.2rem;
  --hiq-radio-border-radius: 50%;
  --hiq-radio-background-color: var(--hiq-color-gray-6);
  --hiq-radio-checked-border-color: var(--hiq-color-primary);
  --hiq-radio-checked-background-color: var(--hiq-color-primary);
  --hiq-radio-check-background-color: hsl(0, 0%, 100%);
  --hiq-radio-background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='%23fff'/></svg>");

  /* range inputs */
  --hiq-range-input-thumb-width: 1.5rem;
  --hiq-range-input-thumb-height: 1.5rem;
  --hiq-range-input-thumb-border-radius: 50%;
  --hiq-range-input-thumb-background-color: var(--hiq-color-primary);
  --hiq-range-input-thumb-disabled-background-color: var(--hiq-color-gray-6);
  --hiq-range-input-track-height: .5rem;
  --hiq-range-input-track-border-radius: var(--hiq-border-radius);
  --hiq-range-input-track-background-color: var(--hiq-color-gray-6);

  /* progress/meter variables */

  /* meters */
  --hiq-meter-background-color: var(--hiq-color-gray-6);
  --hiq-meter-strong-color: var(--hiq-color-success);
  --hiq-meter-good-color: var(--hiq-color-warning);
  --hiq-meter-weak-color: var(--hiq-color-danger);

  /* progress */
  --hiq-progress-height: 1rem;
  --hiq-progress-background-color: var(--hiq-color-gray-6);
  --hiq-progress-filled-color: var(--hiq-color-primary);

  /* breadcrumbs */
  --hiq-breadcrumbs-background-color: var(--hiq-color-gray-7);

  /* dropdown */
  --hiq-dropdown-border-color: var(--hiq-border-color);
  --hiq-dropdown-background-color: hsl(0, 0%, 100%);
  --hiq-dropdown-header-color: hsl(210, 9%, 55%);
  --hiq-dropdown-item-hover-background-color: var(--hiq-color-gray-8);

  /* tabs */
  --hiq-tabs-background-color: hsl(0, 0%, 100%);

  /* modal */
  --hiq-modal-background-color: hsl(0, 0%, 100%);

  /* close */
  --hiq-btn-close-width: 1.5rem;
  --hiq-btn-close-height: 1.5rem;
  --hiq-btn-close-color: var(--hiq-text-color);
  --hiq-btn-close-hover-color: var(--hiq-text-color);

  /* tooltip */
  --hiq-tooltip-background-color: hsl(0, 0%, 100%);
  --hiq-tooltip-border-color: var(--hiq-color-gray-4);
  --hiq-tooltip-color: var(--hiq-text-color);
  --hiq-tooltip-padding: .5rem;

  /* alert */
  --hiq-alert-padding: 18px 15px;
  --hiq-alert-border-width: 1px;
  --hiq-alert-primary-text: #24292e;
  --hiq-alert-primary-bg: #dbedff;
  --hiq-alert-primary-border: rgba(4, 66, 137, .2);
  --hiq-alert-info-text: #24292e;
  --hiq-alert-info-bg: #dbfdff;
  --hiq-alert-info-border: rgba(4, 66, 137, .2);
  --hiq-alert-warning-text: #24292e;
  --hiq-alert-warning-bg: #fffbdd;
  --hiq-alert-warning-border: rgba(176, 136, 0, .2);
  --hiq-alert-danger-text: #24292e;
  --hiq-alert-danger-bg: #ffe3e6;
  --hiq-alert-danger-border: rgba(158, 28, 35, .2);
  --hiq-alert-success-text: #24292e;
  --hiq-alert-success-bg: #dcffe4;
  --hiq-alert-success-border: rgba(23, 111, 44, .2);

  /* Custom variables */
  --hiq-grid-gutter: 1rem;
  --hiq-header-background-color: hsl(0, 0%, 100%);
  --hiq-footer-background-color: var(--hiq-color-gray-8);
  --hiq-footer-text-color: var(--hiq-text-color);
  --hiq-sidebar-border-color: var(--hiq-border-color);
}

:root.is-dark {
  color-scheme: dark;

  --hiq-dark-1: hsl(216, 28%, 7%);
  --hiq-dark-2: hsl(215, 21%, 11%);
  --hiq-html-background-color: var(--hiq-dark-1);
  --hiq-body-background-color: var(--hiq-dark-1);
  --hiq-text-color: hsl(212, 9%, 58%);
  --hiq-link-color: hsl(210, 100%, 62%);
  --hiq-border-color: var(--hiq-color-gray-4);
  --hiq-outline-color: hsl(210, 53%, 36%);
  --hiq-selection-color: var(--hiq-color-gray-2);
  --hiq-header-background-color: hsl(215, 21%, 11%);
  --hiq-footer-background-color: hsl(215, 21%, 11%);
  --hiq-disabled-border-color: var(--hiq-color-gray-3);
  --hiq-disabled-background-color: var(--hiq-color-gray-2);

  /* selects */
  --hiq-select-background-image: url("data:image/svg+xml,%3Csvg width='30' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 16L0 0h30z' fill='%23e3e5e8' fill-rule='evenodd'/%3E%3C/svg%3E");
  --hiq-select-option-background-color: hsl(216, 28%, 7%);

  /* inputs */
  --hiq-input-border-color: var(--hiq-color-gray-3);
  --hiq-input-placeholder-color: var(--hiq-color-gray-5);

  /* breadcrumbs */
  --hiq-breadcrumbs-background-color: var(--hiq-header-background-color);

  /* tabs */
  --hiq-tabs-background-color: hsl(215, 21%, 11%);

  /* modal */
  --hiq-modal-background-color: hsl(215, 21%, 11%);

  /* alert */
  --hiq-alert-primary-text: #79c0ff;
  --hiq-alert-primary-bg: rgba(56, 139, 253, .1);
  --hiq-alert-primary-border: rgba(56, 139, 253, .4);
  --hiq-alert-info-text: #79c0ff;
  --hiq-alert-info-bg: rgba(82, 227, 251, .1);
  --hiq-alert-info-border: rgba(56, 207, 253, .4);
  --hiq-alert-warning-text: #e3b341;
  --hiq-alert-warning-bg: rgba(187, 128, 9, .1);
  --hiq-alert-warning-border: rgba(187, 128, 9, .4);
  --hiq-alert-danger-text: #ff7b72;
  --hiq-alert-danger-bg: rgba(248, 81, 73, .1);
  --hiq-alert-danger-border: rgba(248, 81, 73, .4);
  --hiq-alert-success-text: #56d364;
  --hiq-alert-success-bg: rgba(46, 160, 67, .1);
  --hiq-alert-success-border: rgba(46, 160, 67, .4);

  /* tooltip */
  --hiq-tooltip-background-color: var(--hiq-dark-2);
  --hiq-tooltip-border-color: var(--hiq-border-color);

  /* dropdown */
  --hiq-dropdown-background-color: hsl(216, 28%, 7%);
  --hiq-dropdown-item-hover-background-color: hsl(215, 21%, 11%);

  /* table variables */
  --hiq-table-caption-text-color: var(--hiq-color-gray-6);
  --hiq-table-cell-border-color: var(--hiq-border-color);
  --hiq-table-cell-background-color: hsl(216, 28%, 7%);
  --hiq-table-heading-background-color: hsl(215, 21%, 11%);
  --hiq-table-heading-text-color: var(--hiq-text-color);
}
