@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;700;900&display=swap');

@font-face {
  font-display: swap;
  font-family: 'Ember Regular';
  font-style: normal;
  src: url('./asset/font/Ember\ Display/AmazonEmberDisplay_Rg.ttf')
    format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Ember Medium';
  font-style: normal;
  src: url('./asset/font/Ember\ Display/AmazonEmberDisplay_Md.ttf')
    format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Ember Bold';
  font-style: normal;
  src: url('./asset/font/Ember\ Display/AmazonEmberDisplay_Bd.ttf')
    format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Ember Light';
  font-style: normal;
  src: url('./asset/font/Ember\ Display/AmazonEmberDisplay_Lt.ttf')
    format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Ember Heavy';
  font-style: normal;
  src: url('./asset/font/Ember\ Display/AmazonEmberDisplay_He.ttf')
    format('woff2');
}

:root {
  --elevation-background: #fcfbf3;
  --main-app-background: #f1f2f4;

  --primary-white: #fff;
  --primary-black: #1a1a1a;

  --text-subtle: #9fa0a0;
  --text-error: #e92711;
  --text-success: #00b67a;
  --text-primary: #3f3500;

  --border-default: #e5e5dd;
  --border-input-default: #c5c5d6;
  --border-subdued: #dde0e4;

  /* text colors */
  --secondary-color-text: #616a75;
  --success-color-text: #007a5c;
  --info-color-text: #205cd4;

  /* selected item colors */
  --primary--hover-color-bg-app-selected: #d3e3fd;
  --secondary-color-bg-app-selected: #e3e3e4;

  /* used for badges */
  --action-default-background: #e5e5dd;
  --action-default-text: #505050;
  --action-info-background: #d8e4fa;
  --action-info-text: #205cd4;
  --action-warning-background: #fef7ea;
  --action-warning-text: #ee9503;

  --primary-action-background: #1d5cdc;
  --primary-action-hover-background: #113683;
  --secondary-action-background: #e3e3e3;
  --secondary-action-hover-background: #d4d4d4;
  --danger-action-background: #e92711;
  --danger-action-hover-background: #e92711;

  --star-bg-0: #dcdce6;
  --star-bg-1: #ff3547;
  --star-bg-2: #e67e00;
  --star-bg-3: #ffce00;
  --star-bg-4: #73cf11;
  --star-bg-5: #00b67a;

  --player-progress-bar: #ff3722;

  --primary-type-0-variant-1: #fffbd6;
  --secondary-type-0-variant-1: #592e13;
  --primary-type-1-variant-1: #fff38a;
  --secondary-type-1-variant-1: #592e13;
  --primary-type-2-variant-1: #f7e376;
  --secondary-type-2-variant-1: #592e13;

  --primary-type-0-variant-2: #d4faec;
  --secondary-type-0-variant-2: #022a1c;
  --primary-type-1-variant-2: #82edc6;
  --secondary-type-1-variant-2: #022a1c;
  --primary-type-2-variant-2: #04da8d;
  --secondary-type-2-variant-2: #022a1c;
  --primary-type-3-variant-2: #022a1c;
  --secondary-type-3-variant-2: #04da8d;

  --primary-type-0-variant-3: #f6f6f6;
  --secondary-type-0-variant-3: #003147;
  --primary-type-1-variant-3: #f6f6f6;
  --secondary-type-1-variant-3: #01718f;
  --primary-type-2-variant-3: #f6f6f6;
  --secondary-type-2-variant-3: #003147;

  --primary-type-0-variant-4: #fffbd6;
  --secondary-type-0-variant-4: #592e13;
  --primary-type-1-variant-4: #fff38a;
  --secondary-type-1-variant-4: #592e13;
  --primary-type-2-variant-4: #ffe141;
  --secondary-type-2-variant-4: #592e13;

  --primary-type-0-variant-5: #92cafd;
  --secondary-type-0-variant-5: #121258;
  --primary-type-1-variant-5: #64a0fd;
  --secondary-type-1-variant-5: #121258;
  --primary-type-2-variant-5: #3665f3;
  --secondary-type-2-variant-5: #fff;

  --primary-type-0-variant-6: #eee;
  --secondary-type-0-variant-6: #500750;
  --primary-type-1-variant-6: #eee;
  --secondary-type-1-variant-6: #500750;
  --primary-type-2-variant-6: #ffd1dd;
  --secondary-type-2-variant-6: #500750;
}

:root {
  --color-white-100: #fff;

  --color-black-900: #191919;
  --color-black-700: #313234;
  --color-black-400: #000000a5;

  --color-grey-600: #545b64;
  --color-grey-500: #687078;
  --color-grey-400: #879596;
  --color-grey-300: #c7c7c7;
  --color-grey-250: #ddddd8;
  --color-grey-200: #eee;
  --color-grey-150: #f2f3f3;
  --color-grey-100: #fafafa;

  --color-blue-800: #003a5a;
  --color-blue-600: #0073bb;
  --color-blue-500: #205cd4;
  --color-blue-150: #d3e3fd;
  --color-blue-100: #f1faff;

  --color-orange-800: #a66402;
  --color-orange-600: #ff9900;
  --color-orange-150: #ffdba5;

  --color-green-800: #0c5132;
  --color-green-600: #1d8102;
  --color-green-150: #b4fed2;

  --color-red-800: #8d0e00;
  --color-red-600: #d13212;
  --color-red-150: #ffbab3;

  --color-text-default: #000;
  --color-text-primary: #313234;
  --color-text-secondary: #545b64;
  --color-text-light: #687078;
  --color-text-info: #003a5a;

  --size-text-sm: 14px;
  --size-text-md: 16px;
  --size-text-lg: 20px;
  --size-text-xlg: 24px;
  --size-text-xxlg: 28px;

  --box-shadow-default:
    0rem 0.3125rem 0.3125rem -0.15625rem rgba(0, 0, 0, 0.03),
    0rem 0.1875rem 0.1875rem -0.09375rem rgba(0, 0, 0, 0.02),
    0rem 0.125rem 0.125rem -0.0625rem rgba(0, 0, 0, 0.02),
    0rem 0.0625rem 0.0625rem -0.03125rem rgba(0, 0, 0, 0.03),
    0rem 0.03125rem 0.03125rem 0rem rgba(0, 0, 0, 0.04),
    0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.06);
}

* {
  box-sizing: inherit;
  font-size: 14px;
}

html,
body {
  box-sizing: border-box;
  font-family: 'Ember Regular', 'Noto Kufi Arabic', sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
}

input::placeholder,
textarea::placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-file-upload-button::-placeholder,
input::-moz-file-upload-button::-placeholder {
  font-family: inherit;
  font-size: inherit;
}

svg {
  vertical-align: middle;
  display: inline-block;
}