@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

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

@layer base {
  :root {
    /*  AZTEC COLORS  */
    --white: hsl(0 0% 100%);
    --grey-dark: hsl(0, 0%, 73%); /* #bbbbbb */
    --grey-light: hsl(255, 12%, 94%); /* #EEEDF1 */
    --blue: hsl(227, 92%, 62%); /* #456cf7 */
    --green: hsl(158, 60%, 45%); /* #31A67B */
    --red: hsl(7, 100%, 70%); /* #FF7764 */
    --yellow: hsl(49, 90%, 70%); /* #FFE471 */
    --purple-dark: hsl(262, 36%, 21%); /* #302249 */
    --purple-light: hsl(251, 45%, 56%); /* #715EC2 */

    --background: var(--grey-light);
    --foreground: var(--purple-dark);
    --card: var(--white);
    --card-foreground: var(--purple-dark); /* font of card */
    --popover: hsl(0 0% 100%);
    --popover-foreground: var(--purple-dark);
    --primary: var(--purple-light);
    --primary-foreground: hsl(210 40% 98%);
    --secondary: hsl(210 40% 96.1%);
    --secondary-foreground: var(--purple-dark);
    --muted: hsl(210 40% 96.1%);
    --muted-foreground: hsl(215.4 16.3% 46.9%);
    --accent: var(--grey-light);
    --accent-foreground: var(--purple-dark);
    --destructive: var(--red);
    --destructive-foreground: hsl(210 40% 98%);
    --border: hsl(214.3 31.8% 91.4%);
    --input: hsl(214.3 31.8% 91.4%);

    --ring: var(--purple-dark);

    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);

    --radius: 1rem;
  }

  .dark {
    /* Base dark theme with purple tones instead of generic dark gray */
    --white: hsl(0 0% 100%);
    --grey-dark: hsl(262, 15%, 30%);
    --grey-light: hsl(262, 20%, 15%);

    /* Keep accent colors but adjusted for dark mode */
    --blue: hsl(227, 70%, 60%);
    --green: hsl(158, 60%, 45%);
    --red: hsl(7, 100%, 70%);
    --yellow: hsl(49, 80%, 75%);

    /* Adjust the purples for dark mode */
    --purple-dark: hsl(262, 36%, 75%);
    --purple-light: hsl(251, 60%, 65%);

    /* Theme variables */
    --background: hsl(262, 30%, 8%);
    --foreground: hsl(262, 36%, 85%);
    --card: hsl(262, 25%, 12%);
    --card-foreground: hsl(262, 36%, 90%);
    --popover: hsl(262, 25%, 12%);
    --popover-foreground: hsl(262, 36%, 90%);
    --primary: var(--purple-light);
    --primary-foreground: hsl(262, 30%, 10%);
    --secondary: hsl(262, 20%, 20%);
    --secondary-foreground: hsl(262, 36%, 85%);
    --muted: hsl(262, 15%, 25%);
    --muted-foreground: hsl(262, 10%, 70%);
    --accent: hsl(251, 30%, 25%);
    --accent-foreground: hsl(262, 36%, 90%);
    --destructive: var(--red);
    --destructive-foreground: hsl(262, 36%, 90%);
    --border: hsl(262, 20%, 25%);
    --input: hsl(262, 20%, 25%);
    --ring: var(--purple-light);

    /* Chart colors for dark mode */
    --chart-1: hsl(12 76% 55%);
    --chart-2: hsl(173 58% 45%);
    --chart-3: hsl(197 37% 45%);
    --chart-4: hsl(43 74% 60%);
    --chart-5: hsl(27 87% 60%);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-default;
    /* background-color: #FFFFFF; */
    background-attachment: fixed;
    /* background-size: auto | cover | contain | 500px 250px; */
    background-position: center 30%;
    /*| right 30px bottom 15px*/
    background-repeat: no-repeat;
    /* background-origin: border-box | padding-box | content-box; */
    /* background-clip: border-box | padding-box | content-box; */
    /* background-blend-mode: multiply | screen | overlay; */
  }
}

/*************************** TYPOGRAPHY *************************/
@layer base {
  h1,
  h2 {
    @apply font-heading;
    margin-top: 0;
    margin-bottom: 0;
  }

  h1 {
    @apply scroll-m-20 text-[55px] tracking-normal lg:text-[65px] text-purple-light;
  }

  h2 {
    @apply scroll-m-20 text-[40px] lg:text-[45px];
  }

  h3 {
    @apply scroll-m-20 text-[25px] font-default lg:text-[30px];
  }

  h4 {
    @apply scroll-m-20 text-[20px] font-default lg:text-[24px];
  }
}
@layer utilities {
  /* Additional dark mode refinements */
  .dark .bg-white {
    @apply bg-gray-800 text-gray-200;
  }

  .dark pre {
    @apply bg-gray-800 text-gray-200;
  }

  .dark table th {
    @apply text-gray-300;
  }

  .dark .border-gray-300 {
    @apply border-gray-700;
  }

  /* Improve readability of code and text blocks */
  .dark code,
  .dark pre {
    @apply bg-gray-800 text-gray-200 border border-gray-700;
  }

  /* Fix for data tables in dark mode */
  .dark [data-state="selected"] {
    background-color: rgba(113, 94, 194, 0.2);
  }

  .dark .hover\:bg-muted\/50:hover {
    background-color: rgba(113, 94, 194, 0.1);
  }

  /* Improve input fields in dark mode */
  .dark input,
  .dark select,
  .dark textarea {
    @apply bg-gray-800 border-gray-700 text-gray-200;
  }

  .dark ::placeholder {
    @apply text-gray-500;
  }

  /* Shadow adjustments for dark mode */
  .dark .shadow-md,
  .dark .shadow-lg {
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.3),
      0 2px 4px -2px rgba(0, 0, 0, 0.2);
  }
}
