@tailwind base;
@tailwind components;
@tailwind utilities;

/* Define fonts here */
@font-face {
  font-family: 'Helvetica Neue';
  src: url("/fonts/HelveticaNeue/HelveticaNeueRoman.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/* Define global vars here  */
@layer base {
  :root {
    /* ShadCN */

    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent-foreground: 222.2 47.4% 11.2%;

    --accent: 136, 58, 234;
    /*--accent: 210 40% 96.1%;*/
		--accent-light: 224, 204, 250;
		--accent-dark: 49, 10, 101;
		--accent-gradient: linear-gradient(
			45deg,
			rgb(var(--accent)),
			rgb(var(--accent-light)) 30%,
			white 60%
		);

    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 210 40% 98%;

    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    /* Everything else */
    --from-main-color: #6366f1;
    --to-main-color: #a855f7;
  }

  .dark {
    /* ShadCN */

    --background: 256 10% 1%;
    --foreground: 256 0% 90%;

    --card: 256 0% 0%;
    --card-foreground: 256 0% 90%;

    --popover: 256 10% 5%;
    --popover-foreground: 256 0% 90%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 218 10% 15%;
    --muted-foreground: 256 0% 60%;

    --accent: 218 10% 15%;
    --accent-foreground: 256 0% 90%;

    --destructive: 0 50% 30%;
    --destructive-foreground: 256 0% 90%;

    --border: 217.2 2.6% 17.5%;
    --input: 217.2 2.6% 17.5%;

    --ring: 256 100% 49%;
    --radius: 0.5rem;
    /*--ring: hsl(212.7,26.8%,83.9);*/

    /* Everything Else */
  }

  /* Define global styles here */
  * {
    @apply border-border;
  }

  html {
    @apply antialiased;
  }

  body {
    @apply bg-background text-foreground font-manrope;
  }

   /* globals.css */
  .form-box-shadow {
    box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.1), 0px 1px 0px 0px rgba(25,28,33,0.02), 0px 0px 0px 1px rgba(25,28,33,0.08);
  }

}
