:root {
    --bg-body: #f9f5d7;        /* Gruvbox light hard bg */
    --bg-sidebar: #fbf1c7;     /* Gruvbox light normal bg */
    --text-main: #282828;      /* Gruvbox light fg0 */
    --text-muted: #7c6f64;     /* Gruvbox light gray */
    --border-color: rgba(60, 56, 54, 0.15);
    --header-bg: rgba(249, 245, 215, 0.95); /* High opacity glass */
    --accent-color: #d65d0e;   /* Gruvbox light orange */
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-body: #1d2021;        /* Gruvbox dark hard bg */
        --bg-sidebar: #282828;     /* Gruvbox dark normal bg */
        --text-main: #fbf1c7;      /* Gruvbox dark fg0 */
        --text-muted: #a89984;     /* Gruvbox dark gray */
        --border-color: rgba(251, 241, 199, 0.15);
        --header-bg: rgba(29, 32, 33, 0.95);  /* High opacity glass */
        --accent-color: #fe8019;   /* Gruvbox dark orange */
    }
}

body {
    font-family: "Noto Serif Gujarati", serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.font-serif { font-family: "Playfair Display", serif; }
.font-sans { font-family: "Inter", sans-serif; }

p, li { line-height: 1.9; }
article { font-size: 24px; }   /* the one knob */

/* Typography for markdown-generated articles */
article h1 { font-size: 2em;   font-weight: 700; margin: 0em 0 1.5em; color: var(--text-main); }
article h2 { font-size: 1.5em; font-weight: 700; margin: 1.25em 0 1.25em; color: var(--text-main); }
article h3 { font-size: 1.25em; font-weight: 700; margin: 1em 0 1em; color: var(--text-main); }
article p  { margin-bottom: 1em; text-align: justify; color: var(--text-main); }
article ol { list-style: gujarati; padding-left: 1.5em; margin-bottom: 1em; color: var(--text-main); }
article ul { list-style: disc;    padding-left: 1.5em; margin-bottom: 1em; color: var(--text-main); }
article li { margin-bottom: 0.25em; color: var(--text-main); }
article h1, article h2, article h3 { text-align: center; }
article blockquote {
    border-left: 4px solid var(--accent-color);
    padding-left: 1rem;
    margin: 1.5rem 0 1.5rem 1rem;
    color: var(--text-muted);
    font-style: italic;
    transition: color 0.2s ease;
}

/* Badge Tag Pills */
.tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
}

.tag-vm { background: rgba(25, 103, 210, 0.12); color: #1967d2; }
.tag-mm { background: rgba(19, 115, 51, 0.12); color: #137333; }
.tag-vs { background: rgba(176, 96, 0, 0.12); color: #b06000; }
.tag-ps { background: rgba(197, 34, 31, 0.12); color: #c5221f; }