// Syncfusion Variables:
// https://ej2.syncfusion.com/angular/documentation/appearance/theme/#bootstrap

// ============================================
// UOF Colors
$u-colors: (
  or-50: #feebe5,
  or-100: #fed7ca,
  or-200: #ffc2af,
  or-300: #ffae93,
  or-400: #fe9a78,
  or-500: #ff845b,
  or-550: #f9743d,
  or-600: #ff6128,
  or-650: #ff4810,
  or-700: #ee3800,
  or-800: #c11500,
  or-900: #8d1300,
  or-1000: #550d00,

  gb-50: #fafbff,
  gb-100: #e3e7f3,
  gb-200: #d1d7e7,
  gb-300: #b3bace,
  gb-400: #97a1b7,
  gb-500: #79839c,
  gb-600: #616c82,
  gb-700: #485369,
  gb-750: #3d455a,
  gb-800: #2e3444,
  gb-900: #1c2230,
  gb-1000: #0c1019,

  bk-50: #f2f2f2,
  bk-100: #e6e6e6,
  bk-150: #d9d9d9,
  bk-200: #cccccc,
  bk-300: #b3b3b3,
  bk-400: #999999,
  bk-500: #808080,
  bk-600: #666666,
  bk-700: #4d4d4d,
  bk-800: #333333,
  bk-900: #1a1a1a,
  bk-1000: #000000,

  gr-50: #f7f8fb,
  gr-100: #f5f6fa,
  gr-200: #f1f2f7,
  gr-300: #e4e8f1,
  gr-400: #dbdee7,
  gr-500: #cfd2d9,
  gr-600: #c2c7cd,
  gr-700: #b6b9c0,
  gr-800: #aaadb4,
  gr-900: #a0a1a6,
  gr-1000: #87888c,

  red-25: #fff5f5,
  red-50: #ffe5e5,
  red-100: #ffcacb,
  red-200: #ffcacb,
  red-300: #ff9396,
  red-400: #ff777c,
  red-500: #ff4e57,
  red-600: #ff2f3d,
  red-700: #f3162a,
  red-800: #de0720,
  red-900: #c4000b,
  red-1000: #800000,

  gn-50: #d7ffe4,
  gn-100: #b8f9cd,
  gn-200: #98f3b5,
  gn-300: #84e8a3,
  gn-400: #6ddc90,
  gn-500: #5cd385,
  gn-600: #4dc576,
  gn-700: #33ab5c,
  gn-800: #238f48,
  gn-900: #177738,
  gn-1000: #0d5b28,

  bl-25: #f6faff,
  bl-50: #eaf2ff,
  bl-75: #dfebff,
  bl-100: #d5e5fe,
  bl-200: #b5d0fd,
  bl-300: #9abefc,
  bl-400: #7aa9fc,
  bl-500: #6199f8,
  bl-600: #4389fa,
  bl-700: #2578fa,
  bl-750: #0062f0,
  bl-800: #0059db,
  bl-900: #0041bd,
  bl-1000: #002e90,

  // 跟上面色卡不是同一個色彩軸線上的顏色
  // Green
  x-gn1: #77d3bc,
  x-gn2: #27b700,
  x-gn3: #a2c5c8,
  x-gn4: #63ffa3,
  x-gn5: #00bc82,
  x-gn6: #2ca078,

  // Blue
  x-bl1: #66a4ff,
  x-bl2: #5a78b1,
  x-bl3: #8da9ea,
  x-bl4: #3c6eff,
  x-bl5: #62d0ff,
  x-bl6: #a9bae4,
  x-bl7: #b8c4e4,
  x-bl8: #17285a,
  x-bl9: #0c1739,
  x-bl10: #1f2e5d,
  x-bl11: #3a5b99,

  // Purple
  x-p1: #a5a0fc,
  x-p2: #694785,
  x-p3: #c08aff,

  // Gray
  x-gr1: #8798ac,
  x-gr2: #bababa,
  x-gr3: #565656,

  // Brown
  x-br1: #a46b20,
  x-br2: #6b563b,
  x-br3: #aa8d73,

  // Red
  x-re1: #e24141,

  // Pink
  x-pk1: #ee86c0,

  // Yellow
  x-yl1: #ffe66b,
  x-yl2: #fffbea,
  x-yl3: #e8c125,
  x-yl4: #bc980c,

  // Orange
  x-or1: #ffb16b,

  w-50: #ffffff,
);

// UOF Text
$u-text: (
  h1: 50,
  h2: 45,
  h3: 40,

  t1: 35,
  t2: 30,
  t3: 25,

  st1: 20,
  st2: 18,
  st3: 17,

  b1: 16,
  b2: 15,
  b3: 14,

  s1: 13,
  s2: 12,
);

// UOF Text Color
$u-text-color: (
  d: map-get($u-colors, bk-1000),
  1: map-get($u-colors, bk-800),
  2: map-get($u-colors, bk-600),
  3: map-get($u-colors, bk-500),
  4: map-get($u-colors, bk-400),
  5: map-get($u-colors, bk-200),
  w: #ffffff,
  gb: map-get($u-colors, gb-750),
  b5: map-get($u-colors, bl-500),
  b: map-get($u-colors, bl-700),
  pr: map-get($u-colors, or-650),
  al: map-get($u-colors, red-700),
  er: map-get($u-colors, red-900),
  x-gn2: map-get($u-colors, x-gn2),
  x-gn4: map-get($u-colors, x-gn4),
  x-gn5: map-get($u-colors, x-gn5),
  x-gn6: map-get($u-colors, x-gn6),
  x-bl2: map-get($u-colors, x-bl2),
  x-bl6: map-get($u-colors, x-bl6),
  x-bl11: map-get($u-colors, x-bl11),
  x-p2: map-get($u-colors, x-p2),
  x-br1: map-get($u-colors, x-br1),
  x-br2: map-get($u-colors, x-br2),
  x-re1: map-get($u-colors, x-re1),
  x-yl4: map-get($u-colors, x-yl4),
  bl-1000: map-get($u-colors, bl-1000),
);

// UOF Text Weight
$u-text-weight: (
  l: 300,
  r: 400,
  m: 500,
);

$font-size-standard: 10;

// Bootstrap Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
) !default;

// $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;

// Bootstrap Grid Syatem
//
// Set the number of columns and specify the width of the gutters.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

$gutters: $spacers !default;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
) !default;

$enable-grid-classes: true;

// UOF Variables
$font-family:
  '微軟正黑體',
  -apple-system,
  'Segoe UI',
  'PingFang SC',
  Arial;
$font-size-base: 10px;
$text-color-base: map-get($u-colors, bk-800);

$layout-gutter: 8px;
$layout-header-height: 55px;

$primary: map-get($u-colors, bl-500);
$primary-color: map-get($u-colors, or-550);
$secondary-color: map-get($u-colors, gb-800);
$info-color: map-get($u-colors, bl-500);
$success-color: map-get($u-colors, gn-600);
$error-color: map-get($u-colors, red-700);

// Large screen / wide desktop
$screen-lg: 1024px;
$screen-lg-min: $screen-lg;

// Extra large screen / full hd
$screen-xl: 1360px;
$screen-xl-min: $screen-xl;

// Extra extra large screen / large descktop
$screen-xxl: 1600px;
$screen-xxl-min: $screen-xxl;

// provide a maximum
$screen-lg-max: ($screen-xl-min - 1px);
$screen-xl-max: ($screen-xxl-min - 1px);

$large-desktop: 'only screen and (min-width: #{$screen-xxl-min})';
$full-hd: 'only screen and (min-width: #{$screen-xl-min}) and (max-width: #{$screen-xl-max})';
$wide-desktop: 'screen and (min-width: #{$screen-lg-min}) and (max-width: #{$screen-lg-max})';
$desktop: 'only screen and (min-width: 1024px) and (max-width: 1280px)';
$tablet: 'only screen and (max-width: 1023px) and (max-height: 1023px)';
$mobile: 'only screen and (max-width: 767px) and (max-height: 767px)';

$page-min-width: 1024px;
$page-min-height: 576px;
$layout-aside-width: 240px;

$text-shadow: 2px 2px 4px rgba(33, 33, 33, 0.7);

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

/** Ionic CSS Variables **/
:root {
  /** deactivate dynamic fonts **/
  --ion-dynamic-font: initial;

  /** primary **/
  --ion-color-primary: #{$primary-color};
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: rgb(252, 107, 63);
  --ion-color-primary-tint: rgb(250, 108, 65);

  /** secondary **/
  --ion-color-secondary: #3dc2ff;
  --ion-color-secondary-rgb: 61, 194, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #36abe0;
  --ion-color-secondary-tint: #50c8ff;

  /** tertiary **/
  --ion-color-tertiary: #5260ff;
  --ion-color-tertiary-rgb: 82, 96, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #4854e0;
  --ion-color-tertiary-tint: #6370ff;

  /** success **/
  --ion-color-success: #2dd36f;
  --ion-color-success-rgb: 45, 211, 111;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #28ba62;
  --ion-color-success-tint: #42d77d;

  /** warning **/
  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;

  /** danger **/
  --ion-color-danger: #eb445a;
  --ion-color-danger-rgb: 235, 68, 90;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #cf3c4f;
  --ion-color-danger-tint: #ed576b;

  /** dark **/
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 36, 40;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;

  /** medium **/
  --ion-color-medium: #92949c;
  --ion-color-medium-rgb: 146, 148, 156;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #808289;
  --ion-color-medium-tint: #9d9fa6;

  /** light **/
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 245, 248;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;

  --ion-backdrop-color: #{map-get($u-colors, bk-1000)};
  --ion-backdrop-opacity: 0.7;

  --ion-font-family: var(#{$font-family});

  --ion-background-color: #{map-get($u-colors, w-50)};
  --ion-text-color: #{map-get($u-colors, bk-1000)};

  --ion-tab-bar-background: #fff;
  --ion-toolbar-background: #fff;
  --ion-item-background: #fff;
  --ion-card-background: #fff;
  --ion-card-container-background: #{map-get($u-colors, bk-100)};

  /** UOFx **/
  --font-size-standard: 16px;
  --font-size-medium: 18px;
  --font-size-large: 20px;
  --uofx-font-size: var(--font-size-standard);
  --uofx-color-white: #fff;
  --uofx-color-black: #000;
  --uofx-input-background: #fff;

  /** Box Shadow **/
  --uofx-box-shadow-down: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  --uofx-box-shadow-up: 0px -2px 4px 0px rgba(0, 0, 0, 0.1);
  --uofx-box-shadow-around: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);

  /** Border **/
  --uofx-border-color: #{map-get($u-colors, gr-400)};
  --uofx-border-line-1: 1px solid #{map-get($u-colors, gr-400)};
  --uofx-border-line-2: 2px solid #{map-get($u-colors, gr-400)};
}