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

/* ------Global Fonts---- */

@font-face {
  font-family: "PolySans-Neutral";
  src: url("/wp-content/uploads/fonts/PolySans-Neutral.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "PolySans-Slim";
  src: url("/wp-content/uploads/fonts/PolySans-Slim.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "PolySans-Median";
  src: url("/wp-content/uploads/fonts/PolySans-Median.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
}

* {
  --font-header: "PolySans-Neutral", serif;
  --font-header-inner: "PolySans-Neutral", sans-serif;
  --font-body: "PolySans-Slim", sans-serif;
  --font-body-light: "PolySans-Slim", sans-serif;
  --font-link: "PolySans-Slim", sans-serif;
  --font-button: "PolySans-Neutral", sans-serif;
  --font-menu: "PolySans-Slim", sans-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(107, 0, 0);
  --color-primary-90: rgba(107, 0, 0, 0.9);
  --color-primary-70: rgba(107, 0, 0, 0.7);
  --color-primary-50: rgba(107, 0, 0, 0.5);
  --color-primary-30: rgba(107, 0, 0, 0.3);
  --color-primary-20: rgba(107, 0, 0, 0.2);
  --color-primary-10: rgba(107, 0, 0, 0.1);
  --color-primary-05: rgba(107, 0, 0, 0.05);

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

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

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

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

  /* quaternary-base */
  --color-quaternary: rgb(222, 220, 218);
  --color-quaternary-90: rgba(222, 220, 218, 0.9);
  --color-quaternary-70: rgba(222, 220, 218, 0.7);
  --color-quaternary-50: rgba(222, 220, 218, 0.5);
  --color-quaternary-30: rgba(222, 220, 218, 0.3);
  --color-quaternary-20: rgba(222, 220, 218, 0.2);
  --color-quaternary-10: rgba(222, 220, 218, 0.1);
  --color-quaternary-05: rgba(222, 220, 218, 0.05);

  /* quinary-base //light-gray */
  --color-quinary: rgba(251, 208, 210, 1);
  --color-quinary-90: rgba(251, 208, 210, 0.9);
  --color-quinary-70: rgba(251, 208, 210, 0.7);
  --color-quinary-50: rgba(251, 208, 210, 0.5);
  --color-quinary-30: rgba(251, 208, 210, 0.3);
  --color-quinary-20: rgba(251, 208, 210, 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);
}