/* Increase specificity to override global styles */
html:root {
  /* COLORS DECLARATION: */
  --primary-color: #0A2240;
  --primary-color-rgb: 10, 34, 64;
  --primary-color-70: rgba(var(--primary-color-rgb), 0.7);
  --main-color: var(--black);
  --secondary-color: var(--light-cyan);

  /* COMPONENTS: */
  --submenu-item-background: #B8D8EB;
  --button-background: var(--primary-color);
  --footer-background: var(--primary-color);
  --hero-search-button-background: var(--primary-color-70);
  --hero-search-button-color: var(--white);
  --hero-background-color: var(--black);
  --content-component-subheader-color: var(--black);
  --content-component-header-color: var(--primary-color);
  --action-callout-background-color: rgba(184, 216, 235, 0.8); /* #B8D8EB 80% */
  --content-block-subheader-color: var(--black);
  --content-block-header-color: var(--primary-color);
  --brand-card-background-color: rgba(10, 34, 64, 0.5); /* #0A2240 50% */
  --text-card-background-color: #F0EFEF;
  --text-card-item-hover-background-color: #B8D8EB;
  --search-result-card-label-background-color: var(--black);
  --unit-detail-tabs-description-background-color: var(--gray);
  --tooltip-content-background-color: var(--white);
  --banner-header-color: #B8D8EB;
  --banner-background-color: var(--primary-color);
  --form-input-border: var(--primary-color);
  --unitcard-virtual-tour-label-color: var(--primary-color);
  --hero-bottom-line-background:  var(--primary-color);
  --action-callout-title-color: var(--main-color);
  --search-panel-mobile-version-title-color: var(--primary-color);
  --search-panel-mobile-version-button-color: var(--primary-color);
  --header-background-color: rgba(var(--primary-color-rgb), 0.5);
  --image-video-carousel-overlay-color: var(--black);
  --search-filter-panel-unit-count-color: var(--primary-color);
  --unit-overlay-floorplan-background-color: var(--white);

  /*osano*/
  --osano-cm-toggle: var(--submenu-item-background);
  --osano-cm-toggle-checked: var(--button-background);
  
  /* Static Cards Component */
  --static-card-header-color: #B8D8EB;
  --static-card-body-color: var(--white);
  --static-card-background-color: var(--primary-color);

  /* Tabs Component */
  --tabs-component-background-color: var(--primary-color);
  --tabs-component-icon-color: var(--primary-color);
  --tabs-component-icon-background-color: var(--white);
  --tabs-component-active-icon-color: var(--primary-color);
  --tabs-component-active-icon-background-color: var(--secondary-color);
  --tabs-component-header-main-color: var(--secondary-color, var(--white));
  --tabs-component-header-secondary-color: var(--white);
  --tabs-component-text-color: var(--white);

  /* Table Component */
  --table-component-background-color: var(--primary-color);
  --table-component-icon-color: var(--primary-color);
  --table-component-icon-background-color: var(--secondary-color, var(--white));
  --table-component-header-color: var(--secondary-color, var(--white));
  --table-component-text-color: var(--white);

  /* Cards Component */
  --cards-component-header-color: var(--primary-color);
  --cards-component-text-color: var(--black);
  --cards-component-card-border-color: var(--secondary-color);
  --cards-component-default-background-color: var(--gray);

  --footer-logo-height: 4rem;
  --header-logo-height: 2.5rem;
  --mobile-menu-header-logo-height: 3.5rem;
  --title-header-font-size: 8rem;
  --header-submenu-font-size: 1.5rem;
  --burger-background: var(--primary-color);
  --burger-main-items-font-size: 20px;
  --burger-main-items-letter-spacing: 4.2px;
  --burger-additional-items-font-size: 18px;
  --burger-additional-items-letter-spacing: 4.2px;
  --burger-book-a-tour-font-size : 12px;

  /* FONTS DECLARATION: */
  --primary-font-family: var(--font-family-figtree);
  --secondary-font-family: var(--font-family-stevie-sans);
  --third-font-family: var(--font-family-europa);

  /* Components fonts */
  --header-links-font: var(--secondary-font-family);
  --header-submenu-font: var(--secondary-font-family);
  --mobile-menu-font: var(--secondary-font-family);
  --mobile-menu-submenu-font: var(--secondary-font-family);
  --button-font: var(--secondary-font-family);
  --hero-subtitle-font: var(--third-font-family);
  --hero-title-font: var(--secondary-font-family);
  --content-component-header-font: var(--secondary-font-family);
  --content-component-subheader-font: var(--third-font-family);
  --content-component-description-font: var(--primary-font-family);
  --content-block-component-subheader-font: var(--third-font-family);
  --content-block-component-header-font: var(--secondary-font-family);
  --content-block-component-description-font: var(--primary-font-family);
  --footer-address-font: var(--primary-font-family);
  --footer-links-font: var(--secondary-font-family);
  --footer-copyright-font: var(--secondary-font-family);
  --minimized-hero-component-overlay-title: var(--secondary-font-family);
  --unit-card-details-font: var(--primary-font-family);
  --title-font-header: var(--secondary-font-family);
  --title-font-sub-header: var(--third-font-family);
  --text-card-subheader-font: var(--third-font-family);
  --text-card-header-font: var(--secondary-font-family);
  --search-filter-panel-title-font: var(--primary-font-family);
  --search-filter-panel-available-font: var(--secondary-font-family);
  --similar-apartments-header-font: var(--secondary-font-family);
  --similar-apartments-subhead-font: var(--third-font-family);
  --unit-details-desc-label-font: var(--secondary-font-family);
  --unit-details-menu-font: var(--secondary-font-family);
  --unit-details-about-font: var(--secondary-font-family);
  --compare-bar-actions-font: var(--primary-font-family);
  --compare-label-font: var(--secondary-font-family);
  --banner-header-font: var(--secondary-font-family);
  --hero-bedroom-filter-font: var(--third-font-family);
  --unit-comparer-mobile-container-font: var(--secondary-font-family);
  --interactive-map-tabs-font: var(--secondary-font-family);
  --static-card-header-font: var(--secondary-font-family);
  --tabs-component-header-font: var(--secondary-font-family);
  --tabs-component-body-font: var(--primary-font-family);
  --table-component-header-font: var(--secondary-font-family);
  --table-component-body-font: var(--primary-font-family);
  --cards-component-header-font: var(--secondary-font-family);
  --cards-component-body-font: var(--primary-font-family);

  --header-menu-font-size: var(--font-size-15);

  /* letter-spacing */
  --header-links-letter-spacing: 4.2px;
  --button-letter-spacing: 2.2px;
  --footer-links-letter-spacing: 2.2px;
  --footer-copyright-letter-spacing: 2.2px;
  --banner-header-letter-spacing: 0.5rem;
  --title-subhead-letter-spacing: 3.57px;
  --action-callout-title-letter-spacing: 0.5rem;
  --content-block--header-letter-spacing: 0.5rem;
  --content-component-header-letter-spacing: 0.5rem;
  --hero-subtitle-letter-spacing: 3.57px;
  --hero-title-letter-spacing: 0.5rem;
  --minimized-hero-title-letter-spacing: 0.5rem;
  --similar-apartments-header-letter-spacing: 0.5rem;
  --text-card-noimage-header-letter-spacing: 0.5rem;
  --text-card-withimage-header-letter-spacing: 0.5rem;
  --visual-callout-header-letter-spacing: 0.5rem;
  --visual-callout-small-header-letter-spacing: 0.5rem;

  /* font-weight */
  --button-font-weight: 500;
  --header-links-font-weight: 300;
  --mobile-menu-font-weight: 300;
  --minimized-hero-title-font-weight: 400;
  --title-header-font-weight: 300;
  --search-filter-panel-result-controls-font-weight: 400;
  --unit-card-description-font-weight: 700;
}
