:root {
  /**
   * text
   */
  --text-color: #444;
  --text-font: 14px/1.6 Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  --mono-font: Lucida Console, Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;

  /*
   * basic color
   */
  --red: hsl(5, 72%, 63%);
  --orange: hsl(25, 75%, 58%);
  --yellow: hsl(45, 88%, 57%);
  --green: hsl(120, 45%, 54%);
  --cyan: hsl(185, 50%, 60%);
  --blue: hsl(210, 70%, 67%);
  --indigo: hsl(235, 45%, 65%);
  --purple: hsl(259, 45%, 60%);
  --pink: hsl(309, 31%, 64%);
  --gray: hsl(208, 6%, 53%);
  --white: #fff;
  --dark: #444;
  --black: #000;

  /**
   * functional color names
   */
  --primary-color: var(--blue);
  --success-color: var(--green);
  --warning-color: var(--yellow);
  --danger-color: var(--red);

  /**
   * grid layout
   */
  --grid-gap: 0;
  --container-padding: 24px;
  --container-margin: 24px;
  --container-size-sm: 600px;
  --container-size-md: 800px;
  --container-size-lg: 960px;

  /**
   * spacing
   */
  --spacing-none: 0;
  --spacing-unit: 16px;
  --spacing-xs: calc(var(--spacing-unit) / 4);
  --spacing-sm: calc(var(--spacing-unit) / 2);
  --spacing-md: var(--spacing-unit);
  --spacing-lg: calc(var(--spacing-unit) * 2);
  --spacing-xl: calc(var(--spacing-unit) * 4);

  /**
   * custom media for responsiveness
   */
  @custom-media --xs-up (width > 0);
  @custom-media --sm-up (width > 600px);
  @custom-media --md-up (width > 960px);
  @custom-media --lg-up (width > 1200px);
  @custom-media --xl-up (width > 1920px);
  @custom-media --xs-only (width <= 600px);
  @custom-media --sm-only (width > 600px) and (width <= 960px);
  @custom-media --md-only (width > 960px) and (width <= 1200px);
  @custom-media --lg-only (width > 1200px) and (width <= 1920px);
  @custom-media --xl-only (width > 1920px);

  /**
   * form element
   */
  --focus-ring-opacity: 0.3;
  --form-font-xs: 12px;
  --form-font-sm: 12px;
  --form-font-md: 14px;
  --form-font-lg: 16px;
  --form-font-xl: 20px;
  --form-height-xs: 22px;
  --form-height-sm: 26px;
  --form-height-md: 32px;
  --form-height-lg: 40px;
  --form-height-xl: 48px;
  --form-width-shortest: 4em;
  --form-width-shorter: 6em;
  --form-width-short: 8em;
  --form-width-normal: 12em;
  --form-width-long: 16em;
  --form-width-longer: 24em;
  --form-width-longest: 32em;

  /**
   * button
   */
  --button-default-color: var(--gray);
  --button-lightness-normal: 60%;
  --button-lightness-hover: 50%;
  --button-lightness-active: 40%;
  --button-lightness-disabled: 80%;
  --button-flat-hover-lightness: 95%;

  /**
   * table
   */
  --table-border-color: #ddd;
  --table-cell-padding: 0.5em 1em;

  /**
   * tooltip
   * background & text color
   */
  --tooltip-bg-dark: rgba(0, 0, 0, 0.72);
  --tooltip-color-dark: #fff;
  --tooltip-bg-light: #fff;
  --tooltip-color-light: var(--text-color);

  /**
  * menu
  */
  --submenu-max-height: 20em;
}