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

/* *=========== Default theme =========== */
/* @layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

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

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

    --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%;

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

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

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --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: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

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

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
} */

/* *=========== Green theme =========== */
@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 240 10% 3.9%;
        --card: 0 0% 100%;
        --card-foreground: 240 10% 3.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 240 10% 3.9%;
        --primary: 142.1 76.2% 36.3%;
        --primary-foreground: 355.7 100% 97.3%;
        --secondary: 240 4.8% 95.9%;
        --secondary-foreground: 240 5.9% 10%;
        --muted: 240 4.8% 95.9%;
        --muted-foreground: 240 3.8% 46.1%;
        --accent: 240 4.8% 95.9%;
        --accent-foreground: 240 5.9% 10%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;
        --border: 240 5.9% 90%;
        --input: 240 5.9% 90%;
        --ring: 142.1 76.2% 36.3%;
        --radius: 1rem;
    }

    .dark {
        --background: 20 14.3% 4.1%;
        --foreground: 0 0% 95%;
        --card: 24 9.8% 10%;
        --card-foreground: 0 0% 95%;
        --popover: 0 0% 9%;
        --popover-foreground: 0 0% 95%;
        --primary: 142.1 70.6% 45.3%;
        --primary-foreground: 144.9 80.4% 10%;
        --secondary: 240 3.7% 15.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 0 0% 15%;
        --muted-foreground: 240 5% 64.9%;
        --accent: 12 6.5% 15.1%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 85.7% 97.3%;
        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;
        --ring: 142.4 71.8% 29.2%;
    }

    .theme {
        --animate-shine: shine var(--duration) infinite linear;
        --animate-meteor: meteor 5s linear infinite;
        --animate-aurora: aurora 8s ease-in-out infinite alternate;
        --animate-grid: grid 15s linear infinite;
    }
}

@layer base {
    * {
        @apply border-border;
    }

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

.mde-editor {
    @apply bg-white text-black;
}

/* Dark mode */
.dark .mde-editor {
    background-color: #18181b !important; /* zinc-900 */
    color: #f3f4f6 !important; /* gray-100 */
    border-color: #3f3f46 !important; /* zinc-700 */
}

.dark .mde-preview {
    background-color: #18181b !important; /* zinc-900 */
    color: #f3f4f6 !important; /* gray-100 */
}

.dark .rc-md-navigation {
    background-color: #27272a !important; /* zinc-800 */
    border-bottom-color: #3f3f46 !important; /* zinc-700 */
}

.dark .rc-md-navigation .button {
    color: #f3f4f6 !important; /* gray-100 */
}

.dark .section-container {
    background-color: #18181b !important; /* zinc-900 */
    color: #f3f4f6 !important; /* gray-100 */
}

@theme inline {
    @keyframes shine {
        0% {
            background-position: 0% 0%;
        }
        50% {
            background-position: 100% 100%;
        }
        to {
            background-position: 0% 0%;
        }
    }
    @keyframes meteor {
        0% {
            transform: rotate(var(--angle)) translateX(0);
            opacity: 1;
        }
        70% {
            opacity: 1;
        }
        100% {
            transform: rotate(var(--angle)) translateX(-500px);
            opacity: 0;
        }
    }
    @keyframes aurora {
        0% {
            background-position: 0% 50%;
            transform: rotate(-5deg) scale(0.9);
        }
        25% {
            background-position: 50% 100%;
            transform: rotate(5deg) scale(1.1);
        }
        50% {
            background-position: 100% 50%;
            transform: rotate(-3deg) scale(0.95);
        }
        75% {
            background-position: 50% 0%;
            transform: rotate(3deg) scale(1.05);
        }
        100% {
            background-position: 0% 50%;
            transform: rotate(-5deg) scale(0.9);
        }
    }
    @keyframes grid {
        0% {
            transform: translateY(-50%);
        }
        100% {
            transform: translateY(0);
        }
    }
}
/* styles.css */
@layer utilities {
    .meteor {
        @apply pointer-events-none absolute rounded-full bg-zinc-500 shadow-[0_0_0_1px_#ffffff10];
        width: 0.125rem;
        height: 0.125rem;
        animation: meteor var(--duration-meteor) linear infinite;
    }

    .meteor-tail {
        @apply pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] bg-gradient-to-r from-transparent via-white to-transparent;
        transform-origin: left center;
        animation: meteor var(--duration-meteor) linear infinite;
    }

    /* shine animation bg-gradient */
    .shine {
        background-image: linear-gradient(
                270deg,
                rgba(255 255 255 / 0.12) 0%,
                rgba(255 255 255 / 0.32) 80%,
                rgba(255 255 255 / 0.12) 100%
        );
        background-size: 400% 400%;
        animation: shine var(--duration) linear infinite;
    }
}
