@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-montserrat: var(--font-montserrat);
  --font-playfairdisplay: var(--font-playfairdisplay);
  --color-colorExt10: #0a0a0a;
  --color-colorExt20:  #ffffff;
  --color-colorExt21: #f3f4f9;
  --color-colorExt30: #967244;
  --color-colorext40: #bc986b;
  --color-colorExt50: #1d1d1d;
  --color-colorSection1: var(--color-colorExt20);
  --color-colorSection2: var(--color-colorExt21);
  --color-colorHeader: var(--color-colorExt10);
  --color-colorHeaderText: var(--color-colorExt20);
  --color-colorHeaderTextHover: var(--color-colorext40);
  --color-colorHeroOverlay: var(--color-colorExt50);
  --color-colorImgPlaceholder: var(--color-colorExt50);
  --color-colorFooter: var(--color-colorExt10);
  --color-colorFooter2: var(--color-colorExt50);
  --color-colorFooterText: var(--color-colorExt20);
  --color-colorFooterTextHover: var(--color-colorExt30);
  --color-colorFormInput: var(--color-colorExt20);
  --color-colorContactForm: var(--color-colorExt50);
  --color-colorText1: var(--color-colorExt10);
  --color-colorText2: var(--color-colorExt20);
  --color-colorLoaderBackground: var(--color-colorExt20);
  --color-colorPriceTag: var(--color-colorExt30);
}

@layer components {
  .rd-nav-link-custom {
    @apply text-colorHeader! lg:text-colorHeaderText! lg:hover:text-colorHeaderTextHover!
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

.ie-panel{display: none;background: #212121;padding: 10px 0;box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);clear: both;text-align:center;position: relative;z-index: 1;} html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel {display: block;}
