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

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

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

* {
  --font-header: "Montserrat", serif;
  --font-header-inner: "Montserrat", serif;

  --font-body: "Open Sans", sans-serif;
  --font-body-light: "Open Sans", sans-serif;
  --font-body-regular: "Open Sans", sans-serif;

  --font-link: "Montserrat", sans-serif;
  --font-button: "Open Sans", serif;
  --font-menu: "Montserrat", 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(10, 25, 47);
  --color-primary-90: rgba(10, 25, 47, 0.9);
  --color-primary-70: rgba(10, 25, 47, 0.7);
  --color-primary-50: rgba(10, 25, 47, 0.5);
  --color-primary-30: rgba(10, 25, 47, 0.3);
  --color-primary-20: rgba(10, 25, 47, 0.2);
  --color-primary-10: rgba(10, 25, 47, 0.1);
  --color-primary-05: rgba(10, 25, 47, 0.05);

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

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

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

  /* Quaternary-base */
  --color-quaternary: rgb(231, 229, 221);
  --color-quaternary-90: rgba(231, 229, 221, 0.9);
  --color-quaternary-70: rgba(231, 229, 221, 0.7);
  --color-quaternary-50: rgba(231, 229, 221, 0.5);
  --color-quaternary-30: rgba(231, 229, 221, 0.3);
  --color-quaternary-20: rgba(231, 229, 221, 0.2);
  --color-quaternary-10: rgba(231, 229, 221, 0.1);
  --color-quaternary-05: rgba(231, 229, 221, 0.05);

  /* --------- */
  /* quinary-base */
  --color-quinary: rgb(112, 128, 144);
  --color-quinary-90: rgba(112, 128, 144, 0.9);
  --color-quinary-70: rgba(112, 128, 144, 0.7);
  --color-quinary-50: rgba(112, 128, 144, 0.5);
  --color-quinary-30: rgba(112, 128, 144, 0.3);
  --color-quinary-20: rgba(112, 128, 144, 0.2);
  --color-quinary-10: rgba(112, 128, 144, 0.1);
  --color-quinary-05: rgba(112, 128, 144, 0.05);

  --color-quinary-lighter: rgb(221, 179, 144);
  --color-secondary-lighter: var(--color-secondary);

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

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

  --color-black: #000000;
  --color-white: #ffffff;
  --color-black-rgb: 0, 0, 0;
  --color-black-brand-rgb: var(--color-primary);
  --color-white-rgb: 255, 255, 255;
  --color-white-70: #ffffffbd;

  /* 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(210, 0, 0);
  /* sold */
  --color-light-blue: rgb(137, 169, 219);
  /* leased release */
  --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);
}