/* public_html/assets/css/app.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

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

:root {
    --bg-page: #F9FAFB;
    --bg-nav: #111827;
    --bg-card: #FFFFFF;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --border: #E5E7EB;
    --accent: #2563EB;
    --badge-bg: #EFF6FF;
    --badge-text: #1D4ED8;
}

.dark {
    --bg-page: #0B0F19;
    --bg-nav: #111827;
    --bg-card: #111827;
    --text-primary: #F9FAFB;
    --text-secondary: #9CA3AF;
    --border: #1F2937;
    --accent: #3B82F6;
    --badge-bg: #1E293B;
    --badge-text: #60A5FA;
}

@layer base {
    body {
        background-color: var(--bg-page);
        color: var(--text-primary);
        @apply antialiased;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        font-size: 15px;
        line-height: 1.6;
    }
}

@layer components {
    .container-custom {
        @apply max-w-[1200px] mx-auto px-4 sm:px-6;
    }

    .nav-link {
        @apply text-[14px] text-[#D1D5DB] hover:text-white transition-colors duration-200 font-medium;
    }

    .btn-primary {
        @apply px-4 py-2 bg-[#2563EB] hover:bg-[#1d4ed8] text-white rounded-md transition-all duration-200 font-medium text-sm focus:ring-2 focus:ring-offset-2 focus:ring-[#2563EB] outline-none;
        @apply dark:bg-[#3B82F6] dark:hover:bg-[#2563EB] dark:focus:ring-[#3B82F6];
    }

    .card {
        background-color: var(--bg-card);
        border: 1px solid var(--border);
        @apply rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.08)] transition-all duration-200;
    }

    .badge-version {
        background-color: var(--badge-bg);
        color: var(--badge-text);
        border: 1px solid var(--border);
        @apply text-[11px] font-medium px-1.5 py-0.5 rounded;
    }

    .mono {
        font-family: 'JetBrains Mono', monospace;
    }
}

/* README content styling -pkg.go.dev style */
.readme-content {
    @apply text-[#374151] dark:text-slate-350;
}
.readme-content h1 {
    @apply text-2xl font-bold mb-4 text-[#111827] dark:text-white border-b border-[#E5E7EB] dark:border-[#1F2937] pb-2;
}
.readme-content h2 {
    @apply text-xl font-bold mb-3 mt-8 text-[#111827] dark:text-white;
}
.readme-content h3 {
    @apply text-lg font-bold mb-2 mt-6 text-[#111827] dark:text-white;
}
.readme-content p {
    @apply mb-4;
}
.readme-content code {
    @apply bg-[#F3F4F6] dark:bg-slate-800 px-1 py-0.5 rounded text-sm text-[#111827] dark:text-slate-200 mono;
}
.readme-content pre {
    @apply bg-[#1F2937] dark:bg-slate-900/60 p-4 border dark:border-slate-800 rounded-md overflow-x-auto mb-6 text-white text-sm mono leading-relaxed;
}
.readme-content ul {
    @apply list-disc pl-5 mb-4 space-y-1;
}
.readme-content li {
    @apply pl-1;
}
.readme-content a {
    @apply text-[#2563EB] dark:text-[#60A5FA] hover:underline;
}