@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Bilya Layered";
  src: local("Bilya Layered BASE"), local("Bilya-Layered-BASE"),
    url("./assets/BILYALAYEREDBASE.woff2") format("woff2"),
    url("./assets/BILYALAYEREDBASE.woff") format("woff"),
    url("./assets/BILYALAYEREDBASE.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@layer base {
  :root {
    --home-bg: #ffffff;
    --bottom-nav-bg: #f2f2f2;
    --tie-color: #db3328;
    --btn-bg: #db3328;
    --btn-txt: #fefefe;
    --icon-color: #9aa0a6;
    --primary-txt: #000000;
    --secondary-txt: #000000;
    --bottom-nav-txt: #5f6368;
    --search-bar-border: #dfe1e5;
    --search-bar-bg: #ffffff;
    --search-bar-shadow: #202124;
    --cap-text: #404040;
    --tag-primary: #047857;
    --tag-secondary: #d1fae5;
    --sr-host: #202124;
    --sr-url: #036348;
    --sr-title: #013860;
    --sr-snippet: #5f6368;
  }

  .dark {
    --home-bg: #202124;
    --bottom-nav-bg: #303134;
    --tie-color: #000000;
    --btn-bg: #303134;
    --btn-txt: #fefefe;
    --icon-color: #9aa0a6;
    --primary-txt: #e8e8e8;
    --bottom-nav-txt: #e8e8e8;
    --search-bar-border: #5f6368;
    --search-bar-bg: #202124;
    --search-bar-shadow: #202124;
    --cap-text: #ffffff;
    --tag-primary: #047857;
    --tag-secondary: #dafcea;
    --sr-host: #ffffff;
    --sr-url: #0ebe8c;
    --sr-title: #40a4ed;
    --sr-snippet: #ffffff;
  }

  .black {
    --home-bg: #ffffff;
    --bottom-nav-bg: #f2f2f2;
    --tie-color: #000000;
    --btn-bg: #000000;
    --btn-txt: #fefefe;
    --icon-color: #9aa0a6;
    --primary-txt: #000000;
    --bottom-nav-txt: #5f6368;
    --search-bar-border: #dfe1e5;
    --search-bar-bg: #ffffff;
    --search-bar-shadow: #202124;
    --cap-text: #404040;
    --tag-primary: #000000;
    --tag-secondary: #ffffff;
    --sr-host: #202124;
    --sr-url: #036348;
    --sr-title: #013860;
    --sr-snippet: #5f6368;
  }

  .rose {
    --home-bg: #db3328;
    --bottom-nav-bg: #af261d;
    --tie-color: #000000;
    --btn-bg: #ffffff;
    --btn-txt: #000000;
    --icon-color: #9aa0a6;
    --primary-txt: #000000;
    --bottom-nav-txt: #ffffff;
    --search-bar-border: #dfe1e5;
    --search-bar-bg: #ffffff;
    --search-bar-shadow: #202124;
    --cap-text: #404040;
    --tag-primary: #047857;
    --tag-secondary: #d1fae5;
    --sr-host: #202124;
    --sr-url: #036348;
    --sr-title: #013860;
    --sr-snippet: #5f6368;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .container {
    padding: 0 1rem;
  }
}

@media (min-width: 768px) {
  .container {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 4rem;
  }
}

@media (min-width: 1280px) {
  .container {
    padding: 0 6rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  transition: all 0.1s ease-in-out;
}
