/* ═══════════════════════════════════════════════════════════════
   TC — "V2" THEME
   Soft modern. Warm neutrals, rounded corners, gentle shadows.
   All-sans, tight tracking, variable weights. Light + dark parity.
   ═══════════════════════════════════════════════════════════════ */

/* ── Font ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Tokens ───────────────────────────────────────── */
:root {
    /* Warm neutral paper */
    --v2-bg:          #f7f4ef;     /* app background — warm off-white */
    --v2-surface:     #ffffff;     /* cards, articles */
    --v2-surface-2:   #f1ece4;     /* subtle alt surface (code, blockquote bg) */
    --v2-border:      #e7e0d4;     /* hairline */
    --v2-border-soft: #efe9dd;
    --v2-ink:         #201c17;     /* near-black ink */
    --v2-ink-2:       #4a433a;     /* body text */
    --v2-muted:       #8a8070;     /* meta, timestamps */
    --v2-muted-2:     #b2a898;

    --v2-accent:      #f96161;     /* matte red */
    --v2-accent-ink:  #ffffff;     /* readable on accent */
    --v2-accent-soft: #fde4e4;     /* tinted surface from accent */
    --v2-accent-edge: #e74e4e;     /* hover */

    --v2-radius-sm: 8px;
    --v2-radius:    14px;
    --v2-radius-lg: 22px;
    --v2-radius-pill: 999px;

    --v2-shadow-sm: 0 1px 2px rgba(32, 28, 23, 0.04), 0 1px 1px rgba(32, 28, 23, 0.03);
    --v2-shadow:    0 1px 2px rgba(32, 28, 23, 0.05), 0 8px 24px -12px rgba(32, 28, 23, 0.12);
    --v2-shadow-lg: 0 2px 4px rgba(32, 28, 23, 0.05), 0 20px 40px -18px rgba(32, 28, 23, 0.18);
    --v2-ring:      0 0 0 3px rgba(249, 97, 97, 0.22);

    --v2-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --v2-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --v2-track-tight: -0.011em;
    --v2-track-tighter: -0.022em;

    --v2-content-width: 720px;
    --v2-wide-width:    960px;
}

html.dark {
    --v2-bg:          #141210;
    --v2-surface:     #1c1a17;
    --v2-surface-2:   #242019;
    --v2-border:      #2c281f;
    --v2-border-soft: #23201a;
    --v2-ink:         #f4efe6;
    --v2-ink-2:       #d8d0c1;
    --v2-muted:       #9a9180;
    --v2-muted-2:     #6d6658;

    --v2-accent:      #ff7e00;     /* orange */
    --v2-accent-ink:  #141210;
    --v2-accent-soft: #3a2510;
    --v2-accent-edge: #ffa040;

    --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --v2-shadow:    0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px -14px rgba(0, 0, 0, 0.6);
    --v2-shadow-lg: 0 3px 6px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.65);
    --v2-ring:      0 0 0 3px rgba(255, 126, 0, 0.28);
}

/* ── Base ─────────────────────────────────────────── */
body.theme-v2 {
    margin: 0;
    padding: 0 1.25rem 3rem;
    background: var(--v2-bg);
    color: var(--v2-ink-2);
    font-family: var(--v2-sans);
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: var(--v2-track-tight);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

body.theme-v2 * {
    box-sizing: border-box;
}

body.theme-v2 ::selection {
    background: var(--v2-accent);
    color: var(--v2-accent-ink);
}

/* ── Header ───────────────────────────────────────── */
body.theme-v2 .header {
    max-width: var(--v2-wide-width);
    margin: 0 auto;
    padding: 1.5rem 0 1.25rem;
    border-bottom: 1px solid var(--v2-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.theme-v2 .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

body.theme-v2 .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--v2-ink);
    line-height: 1;
}

body.theme-v2 .logo img {
    width: 40px;
    height: 40px;
    border-radius: var(--v2-radius-sm);
    object-fit: contain;
    background: transparent;
    flex-shrink: 0;
}

body.theme-v2 .logo-wordmark {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: var(--v2-track-tighter);
    color: var(--v2-ink);
}

/* Template still emits a text wordmark; v2 relies on the logo graphic itself. Hide both. */
body.theme-v2 .logo-wordmark { display: none; }
body.theme-v2 .logo-tagline  { display: none; }

/* ── Menu ─────────────────────────────────────────── */
body.theme-v2 .menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

body.theme-v2 .menu a:not(.user-icon) {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border-radius: var(--v2-radius-pill);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--v2-ink-2);
    text-decoration: none;
    letter-spacing: var(--v2-track-tight);
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.theme-v2 .menu a:not(.user-icon):hover {
    background: var(--v2-surface-2);
    color: var(--v2-ink);
}

body.theme-v2 .menu a.active {
    background: var(--v2-ink);
    color: var(--v2-bg);
}
body.theme-v2 .menu a.active:hover {
    background: var(--v2-ink);
    color: var(--v2-bg);
}

/* Dark-mode + user icon buttons */
body.theme-v2 .dark-toggle,
body.theme-v2 .user-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--v2-radius-pill);
    background: var(--v2-surface-2);
    color: var(--v2-ink-2);
    border: 1px solid var(--v2-border);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    text-decoration: none;
}
body.theme-v2 .dark-toggle:hover,
body.theme-v2 .user-icon:hover {
    color: var(--v2-ink);
    background: var(--v2-surface);
}
body.theme-v2 .user-icon.authenticated {
    background: var(--v2-accent);
    color: var(--v2-accent-ink);
    border-color: transparent;
}
body.theme-v2 .user-icon.authenticated:hover {
    background: var(--v2-accent-edge);
    color: var(--v2-accent-ink);
}

body.theme-v2 .dark-toggle .icon-sun  { display: none; }
body.theme-v2 .dark-toggle .icon-moon { display: block; }
html.dark body.theme-v2 .dark-toggle .icon-sun  { display: block; }
html.dark body.theme-v2 .dark-toggle .icon-moon { display: none; }

/* ── Article (index cards) ────────────────────────── */
body.theme-v2 .article {
    max-width: var(--v2-content-width);
    margin: 2rem auto;
    padding: 1.75rem 2rem 1.5rem;
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    box-shadow: var(--v2-shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
body.theme-v2 .article:hover {
    box-shadow: var(--v2-shadow);
    border-color: var(--v2-border-soft);
}

body.theme-v2 .article h2 {
    margin: 0 0 0.4rem;
    font-size: 1.55rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: var(--v2-track-tighter);
}
body.theme-v2 .article h2 a {
    color: var(--v2-ink);
    text-decoration: none;
}
body.theme-v2 .article h2 a:hover {
    color: var(--v2-accent);
}

body.theme-v2 .article .timestamp {
    font-family: var(--v2-mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--v2-muted);
    letter-spacing: 0.02em;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

body.theme-v2 .article-content {
    color: var(--v2-ink-2);
}

body.theme-v2 .article-content-inner > *:first-child { margin-top: 0; }
body.theme-v2 .article-content-inner > *:last-child  { margin-bottom: 0; }

body.theme-v2 .article-content-inner p {
    margin: 0.75rem 0;
}

/* ── Post (single article / page) ────────────────── */
body.theme-v2 .post {
    max-width: var(--v2-content-width);
    margin: 3rem auto;
    padding: 0 0.25rem;
}

body.theme-v2 .post > .timestamp {
    font-family: var(--v2-mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--v2-muted);
    letter-spacing: 0.02em;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
}

body.theme-v2 .post h1 {
    margin: 0 0 1.5rem;
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.028em;
    color: var(--v2-ink);
}

body.theme-v2 .post-content {
    color: var(--v2-ink-2);
    font-size: 1.02rem;
    line-height: 1.7;
}

body.theme-v2 .post-content > *:first-child { margin-top: 0; }
body.theme-v2 .post-content > *:last-child  { margin-bottom: 0; }

body.theme-v2 .post-content p {
    margin: 1.1rem 0;
}

/* ── Content typography (shared) ─────────────────── */
body.theme-v2 h2,
body.theme-v2 h3,
body.theme-v2 h4 {
    color: var(--v2-ink);
    letter-spacing: var(--v2-track-tighter);
    font-weight: 700;
}

body.theme-v2 .post-content h2 {
    font-size: 1.5rem;
    margin: 2.25rem 0 0.75rem;
    line-height: 1.25;
}
body.theme-v2 .post-content h3 {
    font-size: 1.18rem;
    margin: 1.75rem 0 0.5rem;
    font-weight: 600;
}
body.theme-v2 .post-content h4 {
    font-size: 1rem;
    margin: 1.5rem 0 0.4rem;
    font-weight: 600;
}

body.theme-v2 a {
    color: var(--v2-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}
body.theme-v2 a:hover {
    color: var(--v2-accent-edge);
}

body.theme-v2 .post-content ul,
body.theme-v2 .post-content ol,
body.theme-v2 .article-content-inner ul,
body.theme-v2 .article-content-inner ol {
    padding-left: 1.4rem;
    margin: 1rem 0;
}
body.theme-v2 .post-content li,
body.theme-v2 .article-content-inner li {
    margin: 0.4rem 0;
}
body.theme-v2 .post-content ul li::marker,
body.theme-v2 .article-content-inner ul li::marker {
    color: var(--v2-accent);
}

body.theme-v2 blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--v2-surface-2);
    border-left: 3px solid var(--v2-accent);
    border-radius: 0 var(--v2-radius) var(--v2-radius) 0;
    color: var(--v2-ink);
    font-style: normal;
    font-weight: 500;
}
body.theme-v2 blockquote > *:first-child { margin-top: 0; }
body.theme-v2 blockquote > *:last-child  { margin-bottom: 0; }

body.theme-v2 code {
    font-family: var(--v2-mono);
    font-size: 0.88em;
    background: var(--v2-surface-2);
    color: var(--v2-ink);
    padding: 0.12em 0.4em;
    border-radius: 6px;
    border: 1px solid var(--v2-border-soft);
}

body.theme-v2 pre {
    font-family: var(--v2-mono);
    background: var(--v2-surface-2);
    color: var(--v2-ink);
    padding: 1rem 1.1rem;
    border-radius: var(--v2-radius);
    border: 1px solid var(--v2-border);
    overflow-x: auto;
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 1.25rem 0;
}
body.theme-v2 pre code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

body.theme-v2 hr {
    border: 0;
    height: 1px;
    background: var(--v2-border);
    margin: 2rem 0;
}

body.theme-v2 img {
    max-width: 100%;
    height: auto;
    border-radius: var(--v2-radius);
}

body.theme-v2 em { font-style: italic; color: var(--v2-ink); }
body.theme-v2 strong { font-weight: 700; color: var(--v2-ink); }

/* ── Pagination ───────────────────────────────────── */
body.theme-v2 .pagination {
    max-width: var(--v2-content-width);
    margin: 2.5rem auto 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0.25rem;
}
body.theme-v2 .pagination a,
body.theme-v2 .pagination span {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--v2-radius-pill);
    text-decoration: none;
    letter-spacing: var(--v2-track-tight);
    line-height: 1;
}
body.theme-v2 .pagination a {
    color: var(--v2-ink);
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.theme-v2 .pagination a:hover {
    background: var(--v2-ink);
    color: var(--v2-bg);
    border-color: var(--v2-ink);
}
body.theme-v2 .pagination a.disabled {
    color: var(--v2-muted-2);
    background: transparent;
    border-color: var(--v2-border-soft);
    pointer-events: none;
    cursor: not-allowed;
}
body.theme-v2 .pagination .current {
    color: var(--v2-muted);
    font-family: var(--v2-mono);
    font-size: 0.82rem;
    background: transparent;
    padding: 0.5rem 0.75rem;
}

/* ── Gallery ──────────────────────────────────────── */
body.theme-v2 .gallery {
    max-width: var(--v2-wide-width);
    margin: 2rem auto;
    gap: 1rem !important;
}

body.theme-v2 .gallery-item {
    transition: box-shadow 0.2s ease;
}

body.theme-v2 .gallery-item .thumb {
    border-radius: var(--v2-radius);
    background: var(--v2-surface-2);
    box-shadow: var(--v2-shadow-sm);
    transition: box-shadow 0.2s ease;
}
body.theme-v2 .gallery-item:hover .thumb {
    box-shadow: var(--v2-shadow);
}

body.theme-v2 .gallery-item h3 {
    color: var(--v2-ink) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: var(--v2-track-tight);
    margin: 0.6rem 0.15rem 0 !important;
}

/* Gallery popup */
body.theme-v2 .popup {
    background: rgba(20, 18, 16, 0.72) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.theme-v2 .popup-content {
    background: var(--v2-surface) !important;
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg) !important;
    box-shadow: var(--v2-shadow-lg);
    color: var(--v2-ink-2);
}
body.theme-v2 .popup-article h2 {
    margin-top: 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: var(--v2-track-tighter);
}
body.theme-v2 .btn {
    color: var(--v2-muted);
    font-size: 1.35rem !important;
    padding: 0.35rem 0.7rem !important;
    border-radius: var(--v2-radius-pill) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    background: transparent;
    float: right;
}
body.theme-v2 .btn:hover {
    background: var(--v2-surface-2);
    color: var(--v2-ink);
}

/* ── Focus states (accessibility) ─────────────────── */
body.theme-v2 a:focus-visible,
body.theme-v2 button:focus-visible {
    outline: none;
    box-shadow: var(--v2-ring);
}

/* ── Small screens ────────────────────────────────── */
@media (max-width: 640px) {
    body.theme-v2 {
        padding: 0 0.75rem 2rem;
        font-size: 16px;
    }
    body.theme-v2 .header {
        padding: 1.1rem 0 1rem;
    }
    body.theme-v2 .header-row {
        gap: 0.75rem;
    }
    body.theme-v2 .menu ul { gap: 0.15rem; }
    body.theme-v2 .menu a:not(.user-icon) {
        padding: 0.4rem 0.7rem;
        font-size: 0.88rem;
    }
    body.theme-v2 .article {
        padding: 1.25rem 1.25rem;
        margin: 1.25rem auto;
        border-radius: var(--v2-radius);
    }
    body.theme-v2 .article h2 { font-size: 1.3rem; }
    body.theme-v2 .post { margin: 2rem auto; }
    body.theme-v2 .post h1 { font-size: 1.9rem; }
}