:root {
  --color-primary: #54094E;
  --color-primary-dark: #361333;
  --color-primary-800: #661C60;
  --color-primary-600: #7C3477;
  --color-primary-400: #BA7EB4;
  --color-primary-200: #E5CAE2;
  --color-primary-light: #F2EAF2;

  --color-danger: #CA045A;
  --color-danger-400: #DD7468;
  --color-danger-200: #E8A097;
  --color-danger-light: #F4CCC7;

  --color-success: #62AB48;
  --color-success-200: #C0DDB6;
  --color-success-light: #E0EEDA;

  --color-warning: #C89633;
  --color-warning-200: #E9D5AD;
  --color-warning-light: #FAF5EB;

  --color-info: #C09A76;
  --color-info-200: #E6D7C8;
  --color-info-light: #F2EBE4;

  --color-gray-900: #2d2d2d;
  --color-gray-800: #4d4d4d;
  --color-gray-700: #6f6f6f;
  --color-gray-600: #909090;
  --color-gray-500: #b6b6b6;
  --color-gray-400: #dadada;
  --color-gray-300: #ececec;
  --color-gray-200: #f6f6f6;
  --color-gray-light: #f9f9f9;

  --color-white: #fff;
  --color-black: #000;

  --color-body: #151515;
  --color-title: var(--color-white);
  --color-font: var(--color-black);
  --color-font-secondary: var(--color-gray-300);
  --color-border: var(--color-gray-800);
  /* border 深色模式 800 淺色模式 300 
     hover 深色模式 black 淺色模式 light*/
  --color-body-hover: var(--color-black);
  --color-link: var(--color-primary-600);
  --color-link-hover: var(--color-primary-light);
  --color-link-disable: var(--color-gray-500);
  --color-btn-counter: var(--color-primary);
  --color-btn-counter-hover: var(--color-primary-dark);
  --color-btn-counter-disable: var(--color-gray-500);

  --color-header-bg: var(--color-black);
  --color-header-bg-hover: var(--color-gray-800);
  --color-header-text: var(--color-gray-light);

  --color-footer-bg: var(--color-black);
  --color-footer-text: var(--color-gray-light);

  --color-icon: var(--color-gray-400);

  --color-card-bg: var(--color-gray-300);
  --color-card-font: var(--color-black);
  --color-card-font-secondary: var(--color-gray-800);
  --color-card-hover: var(--color-gray-200);
  --color-card-highlight: var(--color-gray-light);

  --color-search-panel: var(--color-gray-800);
  --color-search-panel-unselect: var(--color-black);
  --color-search-panel-font: var(--color-white);

  --color-font-price-amount: var(--color-black);
  --color-font-price-info: var(--color-gray-700);

  /* ---------- form-control ---------- */
  /* default */
  --color-form-control: var(--color-gray-300);
  --color-form-control-font: var(--color-font);
  /* focus */
  --color-form-control-border-focus: var(--color-gray-600);
  /* disable */
  --color-form-control-disable: var(--color-gray-300);
  --color-form-control-border-disable: var(--color-gray-400);

  /* ---------- calendar ---------- */
  --color-calendar-head-bg: var(--color-gray-800);
  --color-calendar-head-font: var(--color-white);
  --color-calendar-head-font-disable: var(--color-gray-600);
  --color-calendar-week-bg: var(--color-white);
  --color-calendar-week-border: var(--color-gray-500);
  --color-calendar-week-font: var(--color-black);
  --color-calendar-day-bg: var(--color-gray-300);
  --color-calendar-date-font: var(--color-black);
  --color-calendar-date-bg: var(--color-white);
  --color-calendar-date-border: var(--color-white);
  --color-calendar-date-availbility-font: var(--color-black);
  --color-calendar-date-rate-font: var(--color-black);
  --color-calendar-date-rate-font-disable: var(--color-gray-700);
  /* 可預訂 avalible */
  --color-calendar-date-bg-avalible: var(--color-white);
  --color-calendar-date-bg-avalible-hover: var(--color-primary-light);
  --color-calendar-date-availbility-font-avalible: var(--color-primary);
  --color-calendar-date-rate-font-avalible: var(--color-black);
  /* 候補訂房 waiting */
  --color-calendar-date-bg-waiting: var(--color-calendar-date-bg);
  --color-calendar-date-bg-waiting-hover: var(--color-primary-light);
  --color-calendar-date-availbility-font-waiting: var(--color-danger);
  --color-calendar-date-rate-font-waiting: var(--color-calendar-date-rate-font);
  /* 已客滿 fully */
  --color-calendar-date-bg-fully: var(--color-gray-200);
  --color-calendar-date-availbility-font-fully: var(--color-gray-500);
  --color-calendar-date-rate-font-fully: var(--color-gray-600);
  /* 不適用 unsuitable */
  --color-calendar-date-bg-unsuitable: var(--color-gray-200);
  --color-calendar-date-availbility-font-unsuitable: var(--color-gray-500);
  --color-calendar-date-rate-font-unsuitable: var(--color-gray-600);
  /* 不在專案效期內 expired */
  --color-calendar-date-bg-expired: var(--color-gray-200);
  --color-calendar-date-availbility-font-expired: var(--color-gray-500);
  --color-calendar-date-rate-font-expired: var(--color-gray-600);
  /* 已過期 before*/
  --color-calendar-date-bg-before: var(--color-gray-200);
  --color-calendar-date-availbility-font-before: var(--color-gray-500);

/* ---------- shadow ---------- */
  --color-shadow-primary: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
  --color-shadow-secondary: 0 6px 12px 0 rgba(0, 0, 0, 0.6);
}