:root {
  /*************************************************************************************************
  * Core variables
  *************************************************************************************************/

  /* Fonts */
  --font-sans-serif: sans-serif;
  --font-serif: serif;
  --font-system: system-ui;
  --font-monospace: Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* Colors (most courtesy of http://clrs.cc/) */
  --color-white: white;
  --color-navy: #001f3f;
  --color-blue: #0074d9;
  --color-aqua: #7fdbff;
  --color-teal: #39cccc;
  --color-olive: #3d9970;
  --color-green: #2ecc40;
  --color-lime: #01ff70;
  --color-yellow: #ffdc00;
  --color-orange: #ff851b;
  --color-red: #ff4136;
  --color-maroon: #85144b;
  --color-fuchsia: #f012be;
  --color-purple: #b10dc9;
  --color-black: #111;
  --color-gray: #aaa;
  --color-silver: #ddd;

  /* States */
  --state-primary: var(--color-blue);
  --state-secondary: var(--color-gray);
  --state-success: var(--color-green);
  --state-info: var(--color-teal);
  --state-warning: var(--color-orange);
  --state-danger: var(--color-red);
  --state-light: var(--color-white);
  --state-dark: var(--color-black);

  /* Components */
  --component-bg-color: #f2f2f2;
  --component-border-color: #ddd;
  --component-border-radius: .25rem;
  --component-border-width: 1px;
  --component-focus-width: 2px;
  --component-padding-x: 1rem;
  --component-padding-y: 1rem;
  --component-speed: .1s;
  --component-box-shadow-inner: inset 0 1px 1px rgba(0, 0, 0, .05);
  --component-box-shadow-outer: 0 1px 0 rgba(0, 0, 0, .05);

  /*************************************************************************************************
  * Alerts
  *************************************************************************************************/

  --alert-border-radius: var(--component-border-radius);
  --alert-border-width: 1px;
  --alert-padding-x: var(--component-padding-x);
  --alert-padding-y: var(--component-padding-y);

  /* Default */
  --alert-bg-color: color(var(--state-primary) tint(75%));
  --alert-color: color(var(--state-primary) lightness(25%));
  --alert-border-color: color(var(--alert-bg-color) shade(5%));

  /* Secondary */
  --alert-bg-color-secondary: color(var(--state-secondary) tint(75%));
  --alert-color-secondary: color(var(--state-secondary) lightness(25%));
  --alert-border-color-secondary: color(var(--alert-bg-color-secondary) shade(5%));

  /* Success */
  --alert-bg-color-success: color(var(--state-success) tint(75%));
  --alert-color-success: color(var(--state-success) lightness(25%));
  --alert-border-color-success: color(var(--alert-bg-color-success) shade(5%));

  /* Info */
  --alert-bg-color-info: color(var(--state-info) tint(75%));
  --alert-color-info: color(var(--state-info) lightness(25%));
  --alert-border-color-info: color(var(--alert-bg-color-info) shade(5%));

  /* Warning */
  --alert-bg-color-warning: color(var(--state-warning) tint(75%));
  --alert-color-warning: color(var(--state-warning) lightness(25%));
  --alert-border-color-warning: color(var(--alert-bg-color-warning) shade(5%));

  /* Danger */
  --alert-bg-color-danger: color(var(--state-danger) tint(75%));
  --alert-color-danger: color(var(--state-danger) lightness(25%));
  --alert-border-color-danger: color(var(--alert-bg-color-danger) shade(5%));

  /* Light */
  --alert-bg-color-light: color(var(--state-light) tint(75%));
  --alert-color-light: color(var(--state-dark) lightness(50%));
  --alert-border-color-light: color(var(--alert-bg-color-light) shade(5%));

  /* Dark */
  --alert-bg-color-dark: color(var(--state-dark) tint(75%));
  --alert-color-dark: color(var(--state-light) lightness(25%));
  --alert-border-color-dark: color(var(--alert-bg-color-dark) shade(5%));

  /*************************************************************************************************
  * Badges
  *************************************************************************************************/

  --badge-font-size: .8em; /* ems for relative sizing */
  --badge-border-radius: 1em;  /* ems for relative sizing */
  --badge-focus-width: var(--component-focus-width);
  --badge-speed: var(--component-speed);

  /* Default */
  --badge-color: var(--color-white);
  --badge-bg-color: var(--state-primary);

  /* Secondary */
  --badge-color-secondary: var(--color-white);
  --badge-bg-color-secondary: var(--state-secondary);

  /* Success */
  --badge-color-success: var(--color-white);
  --badge-bg-color-success: var(--state-success);

  /* Info */
  --badge-color-info: var(--color-white);
  --badge-bg-color-info: var(--state-info);

  /* Warning */
  --badge-color-warning: var(--color-white);
  --badge-bg-color-warning: var(--state-warning);

  /* Danger */
  --badge-color-danger: var(--color-white);
  --badge-bg-color-danger: var(--state-danger);

  /* Light */
  --badge-color-light: var(--state-dark);
  --badge-bg-color-light: var(--state-light);

  /* Dark */
  --badge-color-dark: var(--state-light);
  --badge-bg-color-dark: var(--state-dark);

  /*************************************************************************************************
  * Buttons
  *************************************************************************************************/

  --button-height-xs: var(--input-height-xs);
  --button-height-sm: var(--input-height-sm);
  --button-height: var(--input-height);
  --button-height-lg: var(--input-height-lg);
  --button-height-xl: var(--input-height-xl);
  --button-font-size-xs: var(--input-font-size-xs);
  --button-font-size-sm: var(--input-font-size-sm);
  --button-font-size: var(--input-font-size);
  --button-font-size-lg: var(--input-font-size-lg);
  --button-font-size-xl: var(--input-font-size-xl);
  --button-font-family: var(--input-font-family);
  --button-font-weight: var(--input-font-weight);
  --button-border-radius: var(--component-border-radius);
  --button-border-width: var(--component-border-width);
  --button-focus-width: var(--component-focus-width);
  --button-speed: var(--component-speed);
  --button-loader-size: 1em;
  --button-loader-border-width: .15em;

  /* Default */
  --button-color: var(--color-white);
  --button-bg-color: var(--state-primary);

  /* Secondary */
  --button-color-secondary: var(--color-white);
  --button-bg-color-secondary: var(--state-secondary);

  /* Success */
  --button-color-success: var(--color-white);
  --button-bg-color-success: var(--state-success);

  /* Info */
  --button-color-info: var(--color-white);
  --button-bg-color-info: var(--state-info);

  /* Warning */
  --button-color-warning: var(--color-white);
  --button-bg-color-warning: var(--state-warning);

  /* Danger */
  --button-color-danger: var(--color-white);
  --button-bg-color-danger: var(--state-danger);

  /* Light */
  --button-color-light: var(--state-dark);
  --button-bg-color-light: color(var(--state-light) shade(10%));

  /* Dark */
  --button-color-dark: var(--state-light);
  --button-bg-color-dark: color(var(--state-dark) tint(10%));

  /*************************************************************************************************
  * Content
  *************************************************************************************************/

  --body-bg-color: var(--color-white);
  --body-color: var(--color-black);
  --body-color-muted: var(--color-gray);

  --font-family: var(--font-system);
  --font-size: 1rem; /* Most browsers use a default font size of 16px */
  --font-size-small: 80%;
  --font-weight-light: 300;
  --font-weight: 400;
  --font-weight-bold: 700;
  --line-height: 1.5;

  --code-font-size: 90%;
  --code-color: var(--color-black);
  --code-border-radius: var(--component-border-radius);
  --code-bg-color: var(--component-bg-color);
  --code-padding-x: calc(var(--font-size) * .4);
  --code-padding-y: calc(var(--font-size) * .2);

  --headings-font-family: var(--font-system);
  --headings-font-weight: var(--font-weight-light);
  --headings-line-height: 1.1;
  --headings-margin-bottom: .5rem;
  --headings-color: inherit;
  --headings-font-size-h1: 2.5rem;
  --headings-font-size-h2: 2rem;
  --headings-font-size-h3: 1.75rem;
  --headings-font-size-h4: 1.5rem;
  --headings-font-size-h5: 1.25rem;
  --headings-font-size-h6: 1rem;

  --hr-border-width: 1px;
  --hr-border-color: var(--component-border-color);
  --hr-margin-x: 0;
  --hr-margin-y: 2rem;

  --kbd-font-size: 90%;
  --kbd-color: var(--color-white);
  --kbd-border-radius: var(--component-border-radius);
  --kbd-bg-color: var(--color-black);
  --kbd-padding-x: calc(var(--font-size) * .4);
  --kbd-padding-y: calc(var(--font-size) * .2);

  --link-color: var(--state-primary);
  --link-text-decoration: none;
  --link-color-hover: var(--link-color);
  --link-text-decoration-hover: underline;

  --mark-color: inherit;
  --mark-bg-color: var(--color-yellow);
  --mark-padding-x: calc(var(--font-size) * .4);
  --mark-padding-y: calc(var(--font-size) * .2);

  --placeholder-color: var(--body-color-muted);

  --pre-color: var(--code-color);
  --pre-border-radius: var(--component-border-radius);
  --pre-bg-color: var(--code-bg-color);
  --pre-max-height: none;

  --selection-color: var(--color-white);
  --selection-bg-color: var(--state-primary);

  /*************************************************************************************************
  * Dropdowns
  *************************************************************************************************/

  --dropdown-min-width: 10rem;
  --dropdown-max-width: 25rem;
  --dropdown-max-height: none;
  --dropdown-border-color: var(--component-border-color);
  --dropdown-border-radius: var(--component-border-radius);
  --dropdown-border-width: var(--component-border-width);
  --dropdown-font-size: inherit;
  --dropdown-font-weight: inherit;
  --dropdown-color: var(--body-color);
  --dropdown-color-hover: var(--color-white);
  --dropdown-bg-color: var(--color-white);
  --dropdown-bg-color-hover: var(--state-primary);
  --dropdown-box-shadow: var(--component-box-shadow-outer);
  --dropdown-line-height: var(--line-height);
  --dropdown-padding-x: 1rem;
  --dropdown-padding-y: .25rem;
  --dropdown-offset-x: 0;
  --dropdown-offset-y: 1px;
  --dropdown-z-index: 100;

  --dropdown-caret-color: currentcolor;
  --dropdown-caret-size: .5em;
  --dropdown-caret-width: 2px;

  --dropdown-divider-color: var(--component-border-color);
  --dropdown-divider-width: var(--component-border-width);

  --dropdown-heading-font-size: var(--font-size-small);
  --dropdown-heading-font-weight: inherit;
  --dropdown-heading-color: var(--body-color-muted);

  /*************************************************************************************************
  * Forms
  *************************************************************************************************/

  --input-height-xs: 1.25rem;
  --input-height-sm: 1.75rem;
  --input-height: 2.25rem;
  --input-height-lg: 2.75rem;
  --input-height-xl: 3.25rem;
  --input-font-size-xs: .625rem;
  --input-font-size-sm: .875rem;
  --input-font-size: 1rem;
  --input-font-size-lg: 1.25rem;
  --input-font-size-xl: 1.5rem;
  --input-font-family: inherit;
  --input-font-weight: inherit;
  --input-color: var(--body-color);
  --input-border-color: var(--component-border-color);
  --input-border-width: 1px;
  --input-border-radius: var(--component-border-radius);
  --input-bg-color: var(--color-white);
  --input-box-shadow: var(--component-box-shadow-inner);
  --input-readonly-bg-color: var(--component-bg-color);
  --input-focus-color: var(--state-primary);
  --input-speed: var(--component-speed);

  --input-addon-bg-color: var(--component-bg-color);
  --input-addon-color: var(--body-color-muted);

  --input-hint-color: var(--body-color-muted);
  --input-hint-font-size: var(--font-size-small);

  --input-icon-width: 2em;
  --input-icon-offset: .5em;
  --input-icon-color: var(--state-secondary);

  --input-range-track-height: .5rem;
  --input-range-track-color: var(--component-bg-color);
  --input-range-track-box-shadow: var(--component-box-shadow-inner);
  --input-range-thumb-height: 1.25rem;
  --input-range-thumb-color: var(--state-primary);

  --input-invalid-color: var(--state-danger);
  --input-invalid-border-color: var(--state-danger);
  --input-valid-color: var(--state-success);
  --input-valid-border-color: var(--state-success);

  --fieldset-border-color: var(--component-border-color);
  --fieldset-border-width: var(--component-border-width);
  --fieldset-border-radius: var(--component-border-radius);
  --fieldset-padding-x: 2rem;
  --fieldset-padding-y: 1.5rem;

  --label-color: inherit;

  /*************************************************************************************************
  * Grid
  *************************************************************************************************/

  --container-max-width-sm: 540px;
  --container-max-width-md: 720px;
  --container-max-width-lg: 960px;
  --container-max-width-xl: 1140px;

  --grid-gutter-width: 2rem;

  /*************************************************************************************************
  * Loaders
  *************************************************************************************************/

  --loader-thickness: .2rem;
  --loader-thickness-xs: calc(var(--loader-thickness) / 2);
  --loader-thickness-sm: calc(var(--loader-thickness) / 1.5);
  --loader-thickness-lg: calc(var(--loader-thickness) * 1.5);
  --loader-thickness-xl: calc(var(--loader-thickness) * 2);
  --loader-size-xs: var(--input-height-xs);
  --loader-size-sm: var(--input-height-sm);
  --loader-size: var(--input-height);
  --loader-size-lg: var(--input-height-lg);
  --loader-size-xl: var(--input-height-xl);
  --loader-speed: 750ms;
  --loader-margin-x: .5em;
  --loader-margin-y: 0;

  /* Default */
  --loader-color: var(--state-primary);
  --loader-bg-color: color(var(--state-primary) lightness(90%));

  /* Secondary */
  --loader-color-secondary: var(--state-secondary);
  --loader-bg-color-secondary: color(var(--state-secondary) lightness(90%));

  /* Success */
  --loader-color-success: var(--state-success);
  --loader-bg-color-success: color(var(--state-success) lightness(90%));

  /* Info */
  --loader-color-info: var(--state-info);
  --loader-bg-color-info: color(var(--state-info) lightness(90%));

  /* Warning */
  --loader-color-warning: var(--state-warning);
  --loader-bg-color-warning: color(var(--state-warning) lightness(90%));

  /* Danger */
  --loader-color-danger: var(--state-danger);
  --loader-bg-color-danger: color(var(--state-danger) lightness(90%));

  /* Light */
  --loader-color-light: var(--state-light);
  --loader-bg-color-light: color(var(--state-light) lightness(90%));

  /* Dark */
  --loader-color-dark: var(--state-dark);
  --loader-bg-color-dark: color(var(--state-dark) lightness(90%));

  /*************************************************************************************************
  * Progress Bars
  *************************************************************************************************/

  --progress-height: var(--input-height);
  --progress-height-xs: var(--input-height-xs);
  --progress-height-sm: var(--input-height-sm);
  --progress-height-lg: var(--input-height-lg);
  --progress-height-xl: var(--input-height-xl);
  --progress-font-size: var(--input-font-size);
  --progress-font-size-xs: var(--input-font-size-xs);
  --progress-font-size-sm: var(--input-font-size-sm);
  --progress-font-size-lg: var(--input-font-size-lg);
  --progress-font-size-xl: var(--input-font-size-xl);
  --progress-color: var(--color-white);
  --progress-bg-color: var(--component-bg-color);
  --progress-bar-color: var(--state-primary);
  --progress-border-radius: var(--component-border-radius);
  --progress-box-shadow: var(--component-box-shadow-inner);
  --progress-speed: var(--component-speed);
  --progress-speed-indeterminate: 3s;

  /*************************************************************************************************
  * Switches
  *************************************************************************************************/

  --switch-height: calc(var(--input-height) * .75);
  --switch-height-xs: calc(var(--input-height-xs) * .75);
  --switch-height-sm: calc(var(--input-height-sm) * .75);
  --switch-height-lg: calc(var(--input-height-lg) * .75);
  --switch-height-xl: calc(var(--input-height-xl) * .75);
  --switch-font-size: var(--input-font-size);
  --switch-font-size-xs: var(--input-font-size-xs);
  --switch-font-size-sm: var(--input-font-size-sm);
  --switch-font-size-lg: var(--input-font-size-lg);
  --switch-font-size-xl: var(--input-font-size-xl);
  --switch-border-radius: var(--switch-height);
  --switch-thumb-border-radius: 50%;
  --switch-thumb-spacing: 2px;
  --switch-focus-width: var(--component-focus-width);
  --switch-speed: var(--component-speed);

  /* Default */
  --switch-color: var(--state-primary);
  --switch-bg-color: var(--component-border-color);
  --switch-thumb-color: var(--color-white);

  /* Secondary */
  --switch-color-secondary: var(--state-secondary);
  --switch-bg-color-secondary: var(--component-border-color);
  --switch-thumb-color-secondary: var(--color-white);

  /* Success */
  --switch-color-success: var(--state-success);
  --switch-bg-color-success: var(--component-border-color);
  --switch-thumb-color-success: var(--color-white);

  /* Info */
  --switch-color-info: var(--state-info);
  --switch-bg-color-info: var(--component-border-color);
  --switch-thumb-color-info: var(--color-white);

  /* Warning */
  --switch-color-warning: var(--state-warning);
  --switch-bg-color-warning: var(--component-border-color);
  --switch-thumb-color-warning: var(--color-white);

  /* Danger */
  --switch-color-danger: var(--state-danger);
  --switch-bg-color-danger: var(--component-border-color);
  --switch-thumb-color-danger: var(--color-white);

  /* Light */
  --switch-color-light: color(var(--state-light) shade(25%));
  --switch-bg-color-light: color(var(--state-light) shade(10%));
  --switch-thumb-color-light: var(--color-white);

  /* Dark */
  --switch-color-dark: color(var(--state-dark) tint(10%));
  --switch-bg-color-dark: color(var(--state-dark) tint(25%));
  --switch-thumb-color-dark: var(--color-white);

  /*************************************************************************************************
  * Tables
  *************************************************************************************************/

  --table-bg-color: var(--color-white);
  --table-border-color: var(--component-border-color);
  --table-border-width: var(--component-border-width);
  --table-header-bg-color: transparent;
  --table-spacing-x: .75rem;
  --table-spacing-y: .5rem;
  --table-hover-color: var(--color-white);
  --table-hover-bg-color: var(--state-primary);
  --table-stripe-bg-color: var(--component-bg-color);

  /*************************************************************************************************
  * Tabs
  *************************************************************************************************/

  --tab-bg-color: var(--body-bg-color);
  --tab-bg-color-hover: var(--body-bg-color);
  --tab-bg-color-active: var(--link-color);
  --tab-bg-color-disabled: var(--body-bg-color);
  --tab-border-radius: var(--component-border-radius);
  --tab-color: var(--link-color);
  --tab-color-hover: var(--link-color-hover);
  --tab-color-active: var(--color-white);
  --tab-color-disabled: var(--body-color-muted);
  --tab-padding-x: var(--component-padding-x);
  --tab-padding-y: calc(var(--component-padding-y) / 2);
  --tab-speed: var(--component-speed);

  --tab-pane-border-color: var(--component-border-color);
  --tab-pane-border-radius: var(--component-border-radius);
  --tab-pane-border-width: var(--component-border-width);
  --tab-pane-padding-x: var(--component-padding-x);
  --tab-pane-padding-y: var(--component-padding-y);

  /*************************************************************************************************
  * Utilities
  *************************************************************************************************/

  --spacing-xs: .5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 2.5rem;
}

/* Core breakpoints */
@custom-media --breakpoint-xs-up only screen and (min-width: 0);
@custom-media --breakpoint-sm-up only screen and (min-width: 576px);
@custom-media --breakpoint-md-up only screen and (min-width: 768px);
@custom-media --breakpoint-lg-up only screen and (min-width: 992px);
@custom-media --breakpoint-xl-up only screen and (min-width: 1200px);

@custom-media --breakpoint-xs-down only screen and (max-width: 575px);
@custom-media --breakpoint-sm-down only screen and (max-width: 767px);
@custom-media --breakpoint-md-down only screen and (max-width: 991px);
@custom-media --breakpoint-lg-down only screen and (max-width: 1199px);
@custom-media --breakpoint-xl-down only screen and (min-width: 0);

@custom-media --breakpoint-xs-only only screen and (min-width: 0) and (max-width: 575px);
@custom-media --breakpoint-sm-only only screen and (min-width: 576px) and (max-width: 767px);
@custom-media --breakpoint-md-only only screen and (min-width: 768px) and (max-width: 991px);
@custom-media --breakpoint-lg-only only screen and (min-width: 992px) and (max-width: 1199px);
@custom-media --breakpoint-xl-only only screen and (min-width: 1200px);