:root {
  --fynd-navy-blue: #213c5c;
  --fynd-navy-blue-light: #2f5c90;
  --fynd-navy-blue-dark: #172e48;
  --fynd-red: #b00742;
  --fynd-red-light: #df477d;
  --fynd-red-dark: #940538;
  --fynd-orange: #ff862e;
  --fynd-orange-light: #ffa768;
  --fynd-orange-dark: #d8630e;
  --fynd-yellow: #f9d755;
  --fynd-yellow-light: #ffe88e;
  --fynd-yellow-dark: #d9b732;
  --fynd-green: #088548;
  --fynd-green-light: #39cb84;
  --fynd-green-dark: #08703e;
  --fynd-teal: #0198af;
  --fynd-teal-light: #4bbdc6;
  --fynd-teal-dark: #076574;
  --fynd-blue: #1b71da;
  --fynd-blue-light: #539df8;
  --fynd-blue-dark: #0049a1;
  --fynd-cyan-blue: #445f82;
  --fynd-pink: #a40380;
  --fynd-pink-light: #c852ad;
  --fynd-pink-dark: #801368;
  --fynd-purple: #543bf2;
  --fynd-purple-light: #7d68ff;
  --fynd-purple-dark: #3f2abc;
  --fynd-grey: #848484;
  --fynd-grey-dark: #606060;
  --fynd-disabled-button: #5b5b5b;
  --fynd-UFO-green: #0a9f56;
  --fynd-gradient: linear-gradient(#41b38f 0%, #3ab7c6 100%);
  --fynd-white: #ffffff;
  --fynd-ghost-white: #fafafc;
  --fynd-anti-flash-white: #fafafc;
  --fynd-off-white: #bacade;
  --fynd-black: #000000;
  --fynd-almost-black: #06101e;
  --fynd-green-teal: #41b390;
  --fynd-vertical-divider-color: #2a383b;

  /* Gradients */
  --fynd-gradient-background: linear-gradient(180deg, #19324d 0%, #11253c 100%);
  --fynd-gradient-lightest: #264666;
  --fynd-gradient-light: #1b3249;
  --fynd-gradient-dark: #11253c;
  --fynd-gradient-darkest: #0b1827;
  --fynd-gradient-lid: linear-gradient(135deg, #19324d 0%, #11253c 100%);
  --fynd-gradient-background-darkest: linear-gradient(
    to right,
    hsl(214, 61%, 10%),
    hsl(214, 56%, 11%)
  );

  /* Backgrounds and shadows */
  --fynd-darkest-elevation: #06101e;
  --fynd-elevation-01: #0b1a2d;
  --fynd-elevation-00: #102239f7;
  --fynd-elevation-1: #102239;
  --fynd-elevation-2: linear-gradient(#19324d 0%, #11253c 100%);
  --fynd-elevation-3: #213c5f;
  --fynd-elevation-4: hsl(213, 47%, 35%);
  --fynd-drawer-background: #091526;
  --fynd-paper-bg : hsl(214, 56%, 17%);
  --fynd-card-bg : rgba(33, 60, 92, 0.5) ;
  --fynd-avatar-bg: rgba(6, 16, 30, 0.76);

  

  /*same as 3 can be removed*/

  --mud-palette-appbar-text: var(--fynd-off-white) !important;
  --mud-palette-text-primary: var(--fynd-off-white) !important;
  --mud-default-borderradius: 7px !important;
  --mud-appbar-height: 83px !important;
  --mud-palette-primary-hover: transparent !important;
  --mud-palette-overlay-dark: rgba(11, 26, 45, 0.8) !important;




}


/* Tablet (600px - 1279px) */
@media (min-width: 600px) and (max-width: 1279px) {
  :root {
    --mud-typography-default-size: 0.95rem !important;
  }
}


/* Mobile (< 600px) */
@media (max-width: 599px) {
  :root {
    --mud-drawer-width-mini-left: 50px !important;
    --mud-typography-default-size: 0.875rem !important;
    --mud-drawer-width: min(95vw, 450px); /* 95% viewport width, max 450px */
  }
}

/* Tablet (600px - 1279px) */
@media (min-width: 600px) and (max-width: 1279px) {
  :root {
    --mud-drawer-width: min(70vw, 700px); /* 70% viewport width, max 700px */
  }
}

/* Desktop (≥ 1280px) */
@media (min-width: 1280px) {
  :root {
    --mud-drawer-width: min(55vw, 1100px); /* 55% viewport width, max 1100px */
  }
}

/* Large Desktop (≥ 1920px) */
@media (min-width: 1920px) {
  :root {
    --mud-drawer-width: min(30vw, 720px); /* 50% viewport width, max 720px */
  }
}