/* ===========================
   Project Tokens & Variables
   =========================== */

/* ------Global Fonts---- */
@font-face {
  font-family: "RobotoCondensed-Black";
  src: url("/wp-content/uploads/fonts/RobotoCondensed-Black.ttf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "RobotoCondensed-ExtraBold";
  src: url("/wp-content/uploads/fonts/RobotoCondensed-ExtraBold.ttf") format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed-Bold";
  src: url("/wp-content/uploads/fonts/RobotoCondensed-Bold.ttf") format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed-SemiBold";
  src: url("/wp-content/uploads/fonts/RobotoCondensed-SemiBold.ttf") format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed-Medium";
  src: url("/wp-content/uploads/fonts/RobotoCondensed-Medium.ttf") format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed-Regular";
  src: url("/wp-content/uploads/fonts/RobotoCondensed-Regular.ttf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "RobotoCondensed-Light";
  src: url("/wp-content/uploads/fonts/RobotoCondensed-Light.ttf") format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "RobotoCondensed-ExtraLight";
  src: url("/wp-content/uploads/fonts/RobotoCondensed-ExtraLight.ttf")
    format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "RobotoCondensed-Thin";
  src: url("/wp-content/uploads/fonts/RobotoCondensed-Thin.ttf") format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("/wp-content/uploads/fonts/Montserrat.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
}

* {
  --font-header: "RobotoCondensed-Regular", serif;
  --font-header-inner: "RobotoCondensed-Light", serif;
  --font-body: "Montserrat", sans-serif;
  --font-link: "Montserrat", sans-serif;
  --font-button: "Montserrat", serif;
  --font-menu: "RobotoCondensed-Light", serif;

  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --floorCloseButtonIcon: url('data: image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.40002 18.6538L5.34619 17.6L10.9462 12L5.34619 6.40002L6.40002 5.34619L12 10.9462L17.6 5.34619L18.6538 6.40002L13.0538 12L18.6538 17.6L17.6 18.6538L12 13.0538L6.40002 18.6538Z" fill="white" /></svg>');
}

/* -----------Primitive Colors--------------------------------------------- */

:root {
  /* primary-base */
  --color-primary: rgb(35, 31, 32);
  --color-primary-90: rgba(35, 31, 32, 0.9);
  --color-primary-70: rgba(35, 31, 32, 0.7);
  --color-primary-50: rgba(35, 31, 32, 0.5);
  --color-primary-30: rgba(35, 31, 32, 0.3);
  --color-primary-20: rgba(35, 31, 32, 0.2);
  --color-primary-10: rgba(35, 31, 32, 0.1);
  --color-primary-05: rgba(35, 31, 32, 0.05);

  /* ------------------------------------------------------ */

  /* secondary-base */
  --color-secondary: rgb(232, 105, 55);
  --color-secondary-90: rgba(232, 105, 55, 0.9);
  --color-secondary-70: rgba(232, 105, 55, 0.7);
  --color-secondary-50: rgba(232, 105, 55, 0.5);
  --color-secondary-30: rgba(232, 105, 55, 0.3);
  --color-secondary-20: rgba(232, 105, 55, 0.2);
  --color-secondary-10: rgba(232, 105, 55, 0.1);
  --color-secondary-05: rgba(232, 105, 55, 0.05);

  /* --------- */

  /* tertiary-base //light */
  --color-tertiary: rgba(227, 227, 227, 1);
  --color-tertiary-90: rgba(227, 227, 227, 0.9);
  --color-tertiary-70: rgba(227, 227, 227, 0.7);
  --color-tertiary-50: rgba(227, 227, 227, 0.5);
  --color-tertiary-30: rgba(227, 227, 227, 0.3);
  --color-tertiary-20: rgba(227, 227, 227, 0.2);

  /* base colors ------------------- */

  --color-black: #000000;
  --color-white: #ffffff;
  --color-black-rgb: 0, 0, 0;
  --color-white-rgb: 255, 255, 255;

  /* neutral grays ------------------- */
  --color-gray-900: rgb(26, 26, 26);
  --color-gray-700: rgb(77, 77, 77);
  --color-gray-500: rgb(128, 128, 128);
  --color-gray-300: rgb(179, 179, 179);
  --color-gray-100: rgb(242, 242, 242);

  /* gradiant colors------------------*/

  --gradient-brand-horizontal: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-primary) 100%
  );

  /* custom-colros-------------------------------------- */
  --color-gray-500: rgb(169, 169, 169); /* gray */
  --color-green: rgb(64, 205, 58); /* available */
  --color-orange: rgb(232, 172, 23); /* reserved */
  --color-red: rgb(255, 82, 82); /* sold */
  --color-blue: rgb(41, 110, 217); /* future release */

  /* Opaque Colors (Solid) */
  --color-gray-500-opaque: rgb(var(--color-gray-500));
  --color-green-opaque: rgb(var(--color-green));
  --color-orange-opaque: rgb(var(--color-orange));
  --color-red-opaque: rgb(var(--color-red));
  --color-blue-opaque: rgb(var(--color-blue));

  /* Semi-Transparent Colors */
  --color-gray-500-opacity: rgba(var(--color-gray-500), 0.15);
  --color-green-opacity: rgba(var(--color-green), 0.15);
  --color-orange-opacity: rgba(var(--color-orange), 0.15);
  --color-red-opacity: rgba(var(--color-red), 0.15);
  --color-blue-opacity: rgba(var(--color-blue), 0.15);
}