@import "tailwindcss";

:root {
  --background: var(--color-white);
  --foreground: #171717;

  --background-gradient: radial-gradient(
    circle at 30% -30%,
    var(--color-red-200),
    var(--color-white),
    var(--color-red-400)
  );

  /* --gradient-red: var(--color-red-200); */

  --accent-color: var(--color-amber-900);
}

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

    --background-gradient: radial-gradient(
      circle at 30% -30%,
      var(--color-red-900),
      var(--color-gray-700),
      var(--color-red-800)
    );
  }
} */

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-accent: var(--accent-color);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  /* background: radial-gradient(
      circle at bottom left,
      transparent 25%,
      #f61a1a 25.5%,
      #f61a1a 36%,
      transparent 37%,
      transparent 100%
    ),
    radial-gradient(
      circle at top right,
      transparent 34%,
      #f61a1a 34.5%,
      #f61a1a 45.5%,
      transparent 46%,
      transparent 100%
    );
  background-size: 3em 3em;
  background-color: #f1f1f1;
  opacity: 0.85;

  /* Add texture to background 
  background-image: url("/public/white-carbon.png");
  background-repeat: repeat;
  background-size: contain; */
}

@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent;
  }
  .button-gradient {
    @apply bg-gradient-to-r from-blue-600 to-purple-600 text-white;
  }
}

@theme inline {
  --animate-cell-ripple: cell-ripple var(--duration, 200ms) ease-out none 1
    var(--delay, 0ms);

  @keyframes cell-ripple {
    0% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.8;
    }
    100% {
      opacity: 0.4;
    }
  }
}