apps/arkmarket/src/app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* @layer base {
  :root {
    --site-header-height: 3.75rem;
    --radius: 0.75rem;


    @media screen and (min-width: 768px) {
      --site-header-height: 4.5rem;
    }
  }

} */

@font-face {
  font-family: "UnframedIconFont";
  src: url("/fonts/unframed-icons.ttf") format("truetype");
}

@font-face {
  font-family: "UnframedLogoFont";
  src: url("/fonts/unframed-logo.ttf") format("truetype");
}

/* Unframed Logo animation */
@keyframes LogoAnim {
  0% {
    font-variation-settings:
      "SWAP" 0,
      "ANGL" 0,
      "INNR" 23,
      "INTR" 73,
      "NGTV" var(--unframed-logo-weight);
  }
  50% {
    font-variation-settings:
      "SWAP" 100,
      "ANGL" 100,
      "INNR" 23,
      "INTR" 73,
      "NGTV" var(--unframed-logo-weight);
  }
  100% {
    font-variation-settings:
      "SWAP" 0,
      "ANGL" 0,
      "INNR" 23,
      "INTR" 73,
      "NGTV" var(--unframed-logo-weight);
  }
}
.unframed-animate {
  animation: LogoAnim 1s ease-in-out alternate infinite;
}

@layer base {
  :root {
    --site-header-height: 3.75rem;
    --site-footer-height: 2.5rem;
    --radius: 0.75rem;

    /* Default theme light variables */
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --card: 209 39% 96%;
    --card-foreground: 222.2 47.4% 11.2%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 214.3 31.8% 91.4%;
    --secondary-foreground: 215 16% 46%;
    --muted: 214.3 31.8% 91.4%;
    --muted-foreground: 215 16% 46%;
    --accent: 214.3 31.8% 91.4%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: ;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 47.4% 11.2%;

    @media screen and (min-width: 768px) {
      --site-header-height: 4.5rem;
    }
  }

  /* Default theme dark variables */
  .dark {
    --accent-foreground: 0 0% 100%;
    --accent: 215 24% 26%;
    --background: 0 0% 0%;
    --border: 217.2 32.6% 17.5%;
    --card-foreground: 210 40% 98%;
    --card: 222.2 47.4% 11.2%;
    --destructive-foreground: 210 40% 98%;
    --destructive: 0 84.2% 60.2%;
    --foreground: 210 40% 98%;
    --input: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20% 65%;
    --muted: 217.2 32.6% 17.5%;
    --popover-foreground: 210 40% 98%;
    --popover: 0 0% 0%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --primary: 0 0% 100%;
    --ring: 0 0% 100%;
    --secondary-foreground: 215 20% 65%;
    --secondary: 217.2 32.6% 17.5%;
  }

  /* Unframed theme light variables */
  .unframed {
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;
    --card: 223 10% 98%;
    --card-foreground: 0 0% 0%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 0%;
    --primary: 300 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 222 7% 94%;
    --secondary-foreground: 0 0% 0%;
    --muted: 222 8% 94%;
    --muted-foreground: 228 7% 55%;
    --accent: 222 8% 97%;
    --accent-foreground: 228 7% 55%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: ;
    --border: 224 5% 92%;
    --input: 224 17% 83%;
    --ring: 0 0% 0%;

    --unframed-logo-weight: 0;
  }

  /* Unframed theme dark variables */
  .unframed.dark {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --card: 282 20% 7%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 0%;
    --popover-foreground: 279 1% 70%;
    --primary: 180 100% 50%;
    --primary-foreground: 0 0% 0%;
    --secondary: 282 10% 14%;
    --secondary-foreground: 279 1% 70%;
    --muted: 288 9% 13%;
    --muted-foreground: 288 3% 50%;
    --accent: 288 8% 18%;
    --accent-foreground: 279 1% 70%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 300 1% 10%;
    --input: 288 2% 17%;
    --ring: 0 0% 100%;

    --unframed-logo-weight: 1;
    font-variation-settings: "NGTV" var(--unframed-logo-weight);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}
