/* 主題顏色樣式表 */
:root {
  --grey-50: #e1e7ea;
  --grey-100: #e5e8eb;
  --grey-200: #d1d8db;
  --grey-300: #aebbc1;
  --grey-400: #84959f;
  --grey-500: #6a7f8a;
  --grey-600: #515f69;
  --grey-700: #465058;
  --grey-800: #3e454c;
  --grey-900: #212529;

  --widget-color-white-text: #fff;
  --widget-color-text: #000;
  --widget-color-btn: var(--widget-color-primary20);
  --widget-color-bg: #fff;
  --widget-color-light-bg: #e6e6e6;
  --widget-color-light-extralight: #f5f4f5;
  --widget-color-onPrimary: var(--widget-color-primary20);
  --widget-color-onPrimaryContainer: #fff;
  --widget-color-primaryContainer: var(--widget-color-tertiary30);
  --widget-color-secondary: var(--primary-500);

  --widget-color-hover-gray: #eee;
  --widget-color-active-select: var(--widget-color-tertiary80);

  --widget-switch-unchecked-bg: var(--grey-100);
  --widget-switch-checked-bg: var(--primary-300);
  --widget-color-slider-bg: var( --widget-color-primary80);

  --widget-color-radio: var(--primary-500);
  --widget-color-visible-border: #444;
}

.theme-green {
  --primary-50: #f7f9ec;
  --primary-100: #ebf0d7;
  --primary-200: #d8e3b3;
  --primary-300: #bfd086;
  --primary-400: #a6bc5f;
  --primary-500: #88a141;
  --primary-600: #6a8030;
  --primary-700: #516229;
  --primary-800: #434f25;
  --primary-900: #394423;
  --primary-950: #1d240f;

  --widget-color-primary10: #1d240f;
  --widget-color-primary20: #434f25;
  --widget-color-primary30: #6a8030;
  --widget-color-primary40: #a6bc5f;
  --widget-color-primary80: #a6bc5f;
  --widget-color-primary90: #f7f9ec;
  --widget-color-tertiary20: #394423;
  --widget-color-tertiary30: #434f25;
  --widget-color-tertiary40: #88a141;
  --widget-color-tertiary80: #bfd086;
  --widget-color-tertiary90: #ebf0d7;
}

.dark {
  --widget-color-onPrimary: var(--primary-100);
  --widget-color-onPrimaryContainer: var(--grey-900);
  --widget-color-primaryContainer: var(--widget-color-tertiary90);

  --widget-color-white-text: #fff;
  --widget-color-text: #fff;
  --widget-color-bg: var(--grey-900);
  --widget-color-light-bg: var(--grey-600);
  --widget-color-light-extralight: var(--grey-800);
  --widget-color-gray-50: var(--grey-300);
  --widget-color-gray-60: var(--grey-300);

  --widget-switch-unchecked-bg: var(--widget-color-tertiary90);
  --widget-switch-checked-bg: var(--widget-color-tertiary40);

  --widget-color-text-light: #ddd;
  --widget-color-border-light: #444;
  --widget-color-details-bg: var(--widget-color-primary10);

  --widget-color-hover-gray: #444;
  --widget-color-active-select: var(--widget-color-tertiary30);
  --widget-color-slider-bg: var(--widget-color-primary80);

  --widget-color-radio: var(--primary-300);
  --widget-color-visible-border: #ddd;

  --widget-color-warning-text: #faa;
}

.theme-blue {
  --primary-50: #f0f5fe;
  --primary-100: #dee7fb;
  --primary-200: #c4d7f9;
  --primary-300: #9cbef4;
  --primary-400: #6d9aed;
  --primary-500: #4b78e6;
  --primary-600: #2d53d8;
  --primary-700: #2d48c8;
  --primary-800: #2b3ca2;
  --primary-900: #273781;
  --primary-950: #1c234f;

  --widget-color-primary10: #1c234f;
  --widget-color-primary20: #2b3ca2;
  --widget-color-primary30: #2d53d8;
  --widget-color-primary40: #6d9aed;
  --widget-color-primary80: #6d9aed;
  --widget-color-primary90: #f0f5fe;
  --widget-color-tertiary20: #273781;
  --widget-color-tertiary30: #2d53d8;
  --widget-color-tertiary40: #4b78e6;
  --widget-color-tertiary80: #9cbef4;
  --widget-color-tertiary90: #dee7fb;
}

.theme-grey {
  --primary-50: #f6f7f9;
  --primary-100: #ededf1;
  --primary-200: #d7d9e0;
  --primary-300: #b4b8c5;
  --primary-400: #8a91a6;
  --primary-500: #6c738b;
  --primary-600: #575d73;
  --primary-700: #474b5d;
  --primary-800: #3d414f;
  --primary-900: #363944;
  --primary-950: #24252d;

  --widget-color-primary10: #24252d;
  --widget-color-primary20: #3d414f;
  --widget-color-primary30: #575d73;
  --widget-color-primary40: #8a91a6;
  --widget-color-primary80: #8a91a6;
  --widget-color-primary90: #ededf1;
  --widget-color-tertiary20: #3d414f;
  --widget-color-tertiary30: #575d73;
  --widget-color-tertiary40: #6c738b;
  --widget-color-tertiary80: #b4b8c5;
  --widget-color-tertiary90: #f6f7f9;
}

.theme-orange {
  --primary-50: #fcf7f0;
  --primary-100: #f9ebdb;
  --primary-200: #f2d4b6;
  --primary-300: #e9b688;
  --primary-400: #df9058;
  --primary-500: #d8753a;
  --primary-600: #c95c2d;
  --primary-700: #a74727;
  --primary-800: #863b26;
  --primary-900: #6c3222;
  --primary-950: #3a1710;

  --widget-color-primary10: #3a1710;
  --widget-color-primary20: #863b26;
  --widget-color-primary30: #c95c2d;
  --widget-color-primary40: #d8753a;
  --widget-color-primary80: #d8753a;
  --widget-color-primary90: #f9ebdb;
  --widget-color-tertiary20: #3a1710;
  --widget-color-tertiary30: #a74727;
  --widget-color-tertiary40: #df9058;
  --widget-color-tertiary80: #f2d4b6;
  --widget-color-tertiary90: #fcf7f0;
}

.theme-purple {
  --primary-50: #eef1ff;
  --primary-100: #e1e6fe;
  --primary-200: #c8d1fd;
  --primary-300: #a7b1fa;
  --primary-400: #8489f5;
  --primary-500: #6966ee;
  --primary-600: #594ae1;
  --primary-700: #4c3bc7;
  --primary-800: #4034a5;
  --primary-900: #37307f;
  --primary-950: #211c4a;

  --widget-color-primary10: #37307f;
  --widget-color-primary20: #4034a5;
  --widget-color-primary30: #4c3bc7;
  --widget-color-primary40: #6966ee;
  --widget-color-primary80: #6966ee;
  --widget-color-primary90: #e1e6fe;
  --widget-color-tertiary20: #211c4a;
  --widget-color-tertiary30: #4034a5;
  --widget-color-tertiary40: #4c3bc7;
  --widget-color-tertiary80: #8489f5;
  --widget-color-tertiary90: #eef1ff;
}