/* 100% Exact Lovable Clone Styles */

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    color: rgb(39, 44, 52);
}

/* Prose / Article Content Styling */
.prose {
    font-family: 'Times New Roman', serif;
    font-size: 18px;
    line-height: 1.6;
    color: rgb(101, 117, 139);
}

.prose h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: rgb(39, 44, 52);
    margin-top: 64px;
    margin-bottom: 32px;
    line-height: 1.1;
}

.prose h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: rgb(39, 44, 52);
    margin-top: 40px;
    margin-bottom: 20px;
    line-height: 1.3;
}

.prose p {
    margin-bottom: 24px;
}

.prose strong {
    color: rgb(39, 44, 52);
    font-weight: 700;
}

.prose blockquote {
    border-left: 4px solid hsl(var(--primary));
    padding-left: 24px;
    font-style: italic;
    margin: 48px 0;
    color: rgb(39, 44, 52);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 32px 0;
}

.prose th, .prose td {
    border: 1px solid hsl(var(--border));
    padding: 12px 16px;
    text-align: left;
}

.prose th {
    background-color: hsl(var(--muted));
    font-weight: 700;
}

/* Header & Navigation */
header {
    height: 65px;
}

.nav-link {
    color: rgba(39, 44, 52, 0.8);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-link:hover {
    color: hsl(var(--primary));
    background-color: hsla(var(--primary) / 0.05);
}

/* Cards */
.shadow-card {
    box-shadow: 0 2px 12px -2px hsla(220, 14%, 18%, 0.08);
}

.shadow-hover:hover {
    box-shadow: 0 12px 24px -4px hsla(220, 14%, 18%, 0.12);
}

/* Buttons */
.btn-cta {
    background: linear-gradient(135deg, hsl(160 94% 31%), hsl(160 94% 40%));
    box-shadow: 0 4px 20px -4px hsla(160, 94%, 31%, 0.15);
}