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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #030712; /* A deeper, richer black */
    color: #d1d5db; /* A slightly softer white for text */
}

/* Custom styles for Tailwind's typography plugin */
.prose {
    --tw-prose-body: #d1d5db;
    --tw-prose-headings: #ffffff;
    --tw-prose-lead: #a1a1aa;
    --tw-prose-links: #22d3ee;
    --tw-prose-bold: #ffffff;
    --tw-prose-counters: #a1a1aa;
    --tw-prose-bullets: #52525b;
    --tw-prose-hr: #374151;
    --tw-prose-quotes: #e5e7eb;
    --tw-prose-quote-borders: #0ea5e9; /* Cyan-400 */
    --tw-prose-captions: #a1a1aa;
    --tw-prose-code: #ffffff;
    --tw-prose-pre-code: #d1d5db;
    --tw-prose-pre-bg: #1f2937;
    --tw-prose-th-borders: #374151;
    --tw-prose-td-borders: #374151;
    --tw-prose-invert-body: #d1d5db;
    --tw-prose-invert-headings: #ffffff;
    --tw-prose-invert-lead: #a1a1aa;
    --tw-prose-invert-links: #22d3ee;
    --tw-prose-invert-bold: #ffffff;
    --tw-prose-invert-counters: #a1a1aa;
    --tw-prose-invert-bullets: #52525b;
    --tw-prose-invert-hr: #374151;
    --tw-prose-invert-quotes: #e5e7eb;
    --tw-prose-invert-quote-borders: #0ea5e9; /* Cyan-400 */
    --tw-prose-invert-captions: #a1a1aa;
    --tw-prose-invert-code: #ffffff;
    --tw-prose-invert-pre-code: #d1d5db;
    --tw-prose-invert-pre-bg: #1f2937;
    --tw-prose-invert-th-borders: #374151;
    --tw-prose-invert-td-borders: #374151;
}

.prose h2, .prose h3 {
    color: #22d3ee; /* A vibrant cyan */
    font-weight: 600;
    letter-spacing: -0.02em;
    scroll-margin-top: 4rem;
}

.prose p {
    line-height: 1.8;
    font-weight: 300;
}

.prose strong {
    font-weight: 600;
    color: #ffffff;
}

.prose blockquote {
    font-style: normal;
    font-weight: 400;
    color: #9ca3af;
    border-left-color: #22d3ee;
    padding-left: 1.25rem;
}

.prose blockquote p {
    font-weight: 400;
}


/* Animation styles */
.animated-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animated-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}