/* css/style.css - Premium visual styling and article typography */

/* Dynamic Light/Dark Theme Variables (Mapped to Tailwind config) */
:root {
    /* Forced Dark mode palette */
    --slate-950: 2 6 23;
    --slate-900: 15 23 42;
    --slate-850: 22 30 50;
    --slate-800: 30 41 59;
    --slate-700: 51 65 85;
    --slate-650: 71 85 105;
    --slate-600: 71 85 105;
    --slate-500: 100 116 139;
    --slate-450: 148 163 184;
    --slate-400: 148 163 184;
    --slate-350: 203 213 225;
    --slate-300: 203 213 225;
    --slate-200: 226 232 240;
    --slate-100: 241 245 249;
    --slate-50:  248 250 252;
    
    --color-white: 255 255 255;
    
    --darkblue-950: 5 7 12;
    --darkblue-900: 9 13 22;
    
    /* Original Indigo palette */
    --indigo-650: 67 56 202;
    --indigo-600: 79 70 229;
    --indigo-500: 99 102 241;
    --indigo-400: 129 140 248;
    --indigo-350: 165 180 252;
    --indigo-300: 165 180 252;
}

/* Custom Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseBorder {
    0%, 100% { border-color: rgba(99, 102, 241, 0.4); }
    50% { border-color: rgba(236, 72, 153, 0.6); }
}

.animate-fade-in {
    animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pulse-border-hover:hover {
    animation: pulseBorder 3s infinite;
}

/* Glassmorphism Classes */
.glass-panel {
    background: rgb(var(--darkblue-900) / 65%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgb(var(--slate-400) / 10%);
}

.glass-header {
    background: rgb(var(--darkblue-900) / 80%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(var(--slate-400) / 10%);
}

/* Rich Text Article Typography Styling */
.article-content {
    font-size: 1.125rem; /* 18px */
    line-height: 1.8;
    color: rgb(var(--slate-300));
}

.article-content h1 {
    font-size: 2rem; /* 32px */
    font-weight: 800;
    color: rgb(var(--slate-50));
    margin-top: 2rem;
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 0.75rem;
    line-height: 1.3;
}

.article-content h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 4rem;
    height: 4px;
    background: linear-gradient(to right, #6366f1, #a855f7, #ec4899);
    border-radius: 9999px;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content strong {
    font-weight: 700;
    color: rgb(var(--slate-100));
}

.article-content h2 {
    font-size: 1.625rem; /* 26px */
    font-weight: 700;
    color: rgb(var(--slate-50));
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.article-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 3px;
    background: linear-gradient(to right, #6366f1, #ec4899);
    border-radius: 9999px;
}

.article-content h3 {
    font-size: 1.375rem; /* 22px */
    font-weight: 600;
    color: rgb(var(--slate-100));
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.article-content ul, .article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.article-content ul {
    list-style-type: disc;
}

.article-content ol {
    list-style-type: decimal;
}

.article-content li {
    margin-bottom: 0.5rem;
}

.article-content blockquote {
    border-left: 4px solid #6366f1;
    padding-left: 1.25rem;
    font-style: italic;
    color: rgb(var(--slate-400));
    margin: 1.75rem 0;
    background: rgba(99, 102, 241, 0.05);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 0 8px 8px 0;
}

.article-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9em;
    background-color: rgb(var(--darkblue-900) / 60%);
    color: #ec4899; /* pink-500 */
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    border: 1px solid rgb(var(--slate-400) / 10%);
}

.article-content pre {
    background-color: rgb(var(--slate-900));
    border: 1px solid rgb(var(--slate-400) / 10%);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin: 1.75rem 0;
    overflow-x: auto;
}

.article-content pre code {
    background-color: transparent;
    color: rgb(var(--slate-200));
    padding: 0;
    border-radius: 0;
    border: none;
    font-size: 0.9rem;
    display: block;
}

.article-content a {
    color: #6366f1; /* indigo-500 */
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.article-content a:hover {
    color: #c084fc; /* purple-400 */
}

/* Custom Scrollbar for modern look */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgb(var(--darkblue-950));
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--slate-800));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--slate-700));
}