/* VaiVencer — Custom styles (Tailwind loaded via CDN) */

/* Blog prose styles */
.prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.75rem; color: inherit; }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: inherit; }
.prose p { margin-bottom: 1rem; line-height: 1.75; }
.prose ul, .prose ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin-bottom: 0.25rem; line-height: 1.75; }
.prose a { color: #2563eb; text-decoration: underline; }
.prose a:hover { color: #1d4ed8; }
.prose blockquote { border-left: 4px solid #3b82f6; padding-left: 1rem; margin: 1.5rem 0; color: #6b7280; font-style: italic; }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose code { background: #f3f4f6; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; font-family: monospace; }
.prose pre { background: #1f2937; color: #f9fafb; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 1rem; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.9rem; }
.prose th { background: #f3f4f6; text-align: left; padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb; font-weight: 600; }
.prose td { padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb; }
.prose tr:nth-child(even) td { background: #f9fafb; }
.prose hr { border: 0; border-top: 1px solid #e5e7eb; margin: 2rem 0; }

@media (prefers-color-scheme: dark) {
    .prose a { color: #60a5fa; }
    .prose a:hover { color: #93c5fd; }
    .prose blockquote { border-color: #3b82f6; color: #9ca3af; }
    .prose code { background: #374151; color: #f9fafb; }
    .prose th { background: #374151; border-color: #4b5563; }
    .prose td { border-color: #4b5563; }
    .prose tr:nth-child(even) td { background: #1f2937; }
    .prose hr { border-color: #374151; }
}

html.dark .prose a { color: #60a5fa; }
html.dark .prose a:hover { color: #93c5fd; }
html.dark .prose blockquote { border-color: #3b82f6; color: #9ca3af; }
html.dark .prose code { background: #374151; color: #f9fafb; }
html.dark .prose th { background: #374151; border-color: #4b5563; }
html.dark .prose td { border-color: #4b5563; }
html.dark .prose tr:nth-child(even) td { background: #1f2937; }
html.dark .prose hr { border-color: #374151; }

:root {
    --color-status-safe: #22c55e;
    --color-status-warning: #eab308;
    --color-status-danger: #f97316;
    --color-status-expired: #ef4444;
}

/* Gradient button */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-size: 1rem;
}
.btn-primary:hover {
    opacity: 0.9;
}

.btn-secondary {
    background: white;
    color: #2563eb;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #bfdbfe;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-size: 1rem;
}
.btn-secondary:hover {
    background: #eff6ff;
}