@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);

  --container-default: var(--container-4xl);
}

@theme {
  --color-*: initial;
  --color-background-inner: oklch(1 0 0);
  --color-background-outer: oklch(0.99 0 0);
  --color-gray-900: oklch(0.23 0 0);
  --color-gray-800: oklch(0.32 0 0);
  --color-gray-700: oklch(0.43 0 0);
  --color-gray-600: oklch(0.48 0 0);
  --color-gray-500: oklch(0.56 0 0);
  --color-gray-400: oklch(0.66 0 0);
  --color-gray-300: oklch(0.78 0 0);
  --color-gray-200: oklch(0.85 0 0);
  --color-gray-100: oklch(0.99 0 0);
  --color-link: oklch(0.53 0.1547 252.33);
  --color-success: oklch(0.63 0.1557 144.2);
  --color-warning: oklch(0.72 0.177693 55.7508);
  --color-error: oklch(0.64 0.2505 28.39);

  --animate-wave: wave 5s ease 1s infinite;
  --animate-heartbeat: heartbeat 10s ease 7.5s infinite;

  @keyframes wave {
    0% {
      transform: rotate(0deg);
    }
    5% {
      transform: rotate(14deg);
    }
    10% {
      transform: rotate(-8deg);
    }
    15% {
      transform: rotate(14deg);
    }
    20% {
      transform: rotate(-4deg);
    }
    25% {
      transform: rotate(10deg);
    }
    30% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

  @keyframes heartbeat {
    0% {
      transform: scale(1);
    }
    2% {
      transform: scale(1.25);
    }
    4% {
      transform: scale(1);
    }
    6% {
      transform: scale(1.2);
    }
    8% {
      transform: scale(1);
    }
    100% {
      transform: scale(1);
    }
  }
}

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

&:where([data-theme=dark], [data-theme=dark] *) {
  --color-background-inner: oklch(0.24 0 0);
  --color-background-outer: oklch(0.26 0 0);
  --color-gray-900: oklch(0.93 0 0);
  --color-gray-800: oklch(0.90 0 0);
  --color-gray-700: oklch(0.88 0 0);
  --color-gray-600: oklch(0.76 0 0);
  --color-gray-500: oklch(0.67 0 0);
  --color-gray-400: oklch(0.5 0 0);
  --color-gray-300: oklch(0.44 0 0);
  --color-gray-200: oklch(0.35 0 0);
  --color-gray-100: oklch(0.24 0 0);
  --color-link: oklch(0.81 0.1026 246.31);
  --color-success: oklch(0.81 0.2001 138.65);
  --color-warning: oklch(0.81 0.166 85.03);
  --color-error: oklch(0.68 0.2105 24.73)
}