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

@layer base {
    html {
        font-family: 'Inter', sans-serif;
        -webkit-font-smoothing: antialiased;
        @apply bg-slate-50 text-slate-900;
    }
    h1 {
        @apply text-4xl md:text-5xl font-extrabold mb-6 leading-tight text-slate-900;
    }
    h2 {
        @apply text-2xl md:text-3xl font-bold mt-12 mb-6 text-slate-900 border-l-4 border-blue-600 pl-4;
    }
    p {
        @apply mb-6 leading-relaxed text-lg text-slate-700;
    }
    strong {
        @apply font-bold text-slate-900;
    }
}

@layer components {
    /* NAVIGATION */
    .article-nav {
        @apply bg-slate-900 text-white py-4 px-6 flex justify-between items-center sticky top-0 z-50 shadow-md;
    }
    .nav-brand {
        @apply text-lg font-bold tracking-tight hover:text-blue-400 transition-colors;
    }
    .article-nav ul {
        @apply flex space-x-6 items-center;
    }
    .article-nav a {
        @apply text-sm font-medium text-slate-300 hover:text-white transition-colors no-underline;
    }

    /* MAIN LAYOUT */
    .article-main {
        @apply max-w-4xl mx-auto px-4 md:px-8 py-12;
    }
    article {
        @apply bg-white rounded-2xl shadow-sm border border-slate-200 p-6 md:p-12;
    }

    /* HERO */
    .article-hero-img {
        @apply w-full aspect-video object-cover rounded-2xl shadow-lg mb-12 border border-slate-200;
    }

    /* HEADER ELEMENTS */
    .article-badge {
        @apply inline-block bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider mb-4;
    }
    .data-stamp {
        @apply text-blue-600 font-bold text-sm mb-2 flex items-center;
    }
    .data-stamp::before {
        content: '●';
        @apply mr-2 animate-pulse;
    }
    .article-meta {
        @apply text-slate-500 text-sm mb-8 flex items-center flex-wrap gap-x-4 gap-y-2 border-b border-slate-100 pb-8;
    }
    .back-link {
        @apply inline-block text-slate-500 hover:text-blue-600 text-sm font-medium mb-8 transition-colors;
    }

    /* INTRO */
    .intro-section p {
        @apply text-xl text-slate-800 leading-relaxed font-medium italic border-l-4 border-slate-200 pl-6 my-10;
    }

    /* FORENSIC BLOCKS */
    .forensic-block {
        @apply mb-16;
    }
    .atomic-box {
        @apply bg-blue-50 border-l-4 border-blue-600 p-6 rounded-r-xl mb-8 shadow-sm;
    }
    .atomic-box p {
        @apply m-0 text-blue-900 font-medium leading-relaxed;
    }
    .atomic-box strong {
        @apply text-blue-700;
    }

    /* TABLES */
    .table-container {
        @apply overflow-x-auto my-10 rounded-xl border border-slate-200 shadow-sm;
    }
    table {
        @apply w-full border-collapse text-left text-sm;
    }
    th {
        @apply bg-slate-900 text-slate-100 p-4 font-bold uppercase tracking-wider;
    }
    td {
        @apply p-4 border-t border-slate-100 text-slate-700;
    }
    tr:nth-child(even) {
        @apply bg-slate-50;
    }

    /* CTA BLOCK */
    .cta-block {
        @apply bg-slate-900 rounded-2xl p-8 md:p-12 text-center my-16 text-white shadow-xl;
    }
    .cta-block p {
        @apply text-xl md:text-2xl font-bold mb-8 text-white italic;
    }
    .cta-buttons {
        @apply flex flex-col md:flex-row justify-center gap-4;
    }
    .btn-primary {
        @apply bg-blue-600 hover:bg-blue-500 text-white font-bold py-4 px-8 rounded-xl transition-all shadow-lg hover:shadow-blue-500/20 no-underline;
    }
    .btn-secondary {
        @apply bg-slate-800 hover:bg-slate-700 text-white font-bold py-4 px-8 rounded-xl border border-slate-700 transition-all no-underline;
    }

    /* AUTHOR */
    .author-block {
        @apply flex items-center space-x-4 pt-12 border-t border-slate-100 mt-12;
    }
    .author-avatar {
        @apply w-14 h-14 bg-gradient-to-br from-blue-600 to-slate-900 rounded-full flex-shrink-0 shadow-md;
    }
    .author-info strong {
        @apply block text-lg font-bold text-slate-900;
    }
    .author-info span {
        @apply text-slate-500 text-sm font-medium;
    }

    /* FOOTER */
    .site-footer {
        @apply bg-slate-950 text-slate-400 py-12 px-6 border-t border-slate-900;
    }
    .footer-content {
        @apply max-w-4xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6;
    }
    .site-footer nav {
        @apply flex gap-6;
    }
    .site-footer a {
        @apply text-slate-500 hover:text-white transition-colors no-underline text-sm;
    }
}