/* ========================================
   THEME TOKENS
======================================== */
:root {
    --bg: #020617;
    --bg-soft: #06102b;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --subtle: #64748b;

    --surface: #1e293b;
    --surface-border: #334155;
    --surface-hover-border: #3b82f6;

    --link: #60a5fa;
    --footer-border: #1e293b;

    --theme-toggle-bg: #1e293b;
    --theme-toggle-fg: #f8fafc;

    --btn-download: #2563eb;
    --btn-github: #334155;
    --btn-copy: #16a34a;
    --btn-back: #475569;
    --btn-open: #2563eb;
    --btn-text: #ffffff;

    --markdown-bg: #020617;
    --markdown-border: #334155;
    --markdown-heading: #f8fafc;
    --markdown-inline-code-bg: #0f172a;
    --markdown-inline-code-border: #1e293b;
    --markdown-quote-bg: rgba(30, 41, 59, 0.45);
    --markdown-table-head-bg: rgba(30, 41, 59, 0.65);

    --code-font: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
    --code-bg: #020617;
    --code-border: #334155;
    --code-text: #e2e8f0;
    --code-number: #64748b;
}

body.light {
    --bg: #edf3ff;
    --bg-soft: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --subtle: #64748b;

    --surface: #ffffff;
    --surface-border: #cbd5e1;
    --surface-hover-border: #2563eb;

    --link: #2563eb;
    --footer-border: #d7e3f5;

    --theme-toggle-bg: #dbe7fb;
    --theme-toggle-fg: #0f172a;

    --btn-download: #2563eb;
    --btn-github: #334155;
    --btn-copy: #15803d;
    --btn-back: #64748b;
    --btn-open: #2563eb;
    --btn-text: #ffffff;

    --markdown-bg: #ffffff;
    --markdown-border: #cbd5e1;
    --markdown-heading: #0f172a;
    --markdown-inline-code-bg: #eef4ff;
    --markdown-inline-code-border: #cbd5e1;
    --markdown-quote-bg: rgba(219, 234, 254, 0.55);
    --markdown-table-head-bg: rgba(219, 234, 254, 0.75);

    --code-bg: #f8fafc;
    --code-border: #cbd5e1;
    --code-text: #0f172a;
    --code-number: #64748b;
}

/* ========================================
   BASE
======================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background:
        radial-gradient(1200px 500px at 50% -80px, rgba(96, 165, 250, 0.15), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg-soft));
    color: var(--text);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Ubuntu,
        Cantarell,
        "Noto Sans",
        sans-serif;
    line-height: 1.5;
    transition: background 0.25s ease, color 0.25s ease;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    margin: auto;
    max-width: 1100px;
    padding: 40px 24px;
}

/* ========================================
   HERO HEADER
======================================== */
.hero {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.hero-island {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 50%),
        var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.25);
    margin-bottom: 24px;
    padding: 20px 22px;
}

body.light .hero-island {
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12);
}

.hero-copy {
    min-width: 0;
}

.hero h1 {
    font-size: 32px;
    font-weight: 700;
}

.subtitle {
    color: var(--muted);
    margin-top: 4px;
}

.hero-stats {
    color: var(--subtle);
    font-size: 14px;
    margin-top: 12px;
}

.hero-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.theme-toggle {
    background: var(--theme-toggle-bg);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    color: var(--theme-toggle-fg);
    cursor: pointer;
    font-size: 16px;
    min-width: 46px;
    padding: 8px 12px;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.theme-toggle:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* ========================================
   SECTIONS
======================================== */
.work {
    margin-bottom: 40px;
}

.work h2 {
    font-size: 22px;
    margin-bottom: 16px;
}

/* ========================================
   GRID
======================================== */
.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ========================================
   CARD
======================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    padding: 18px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.card:hover {
    border-color: var(--surface-hover-border);
    transform: translateY(-2px);
}

.card-title {
    font-weight: 600;
    margin-bottom: 6px;
}

.card-meta {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
}

.card-date {
    color: var(--subtle);
    font-size: 12px;
    margin-top: 4px;
}

/* ========================================
   TAGS
======================================== */
.tags {
    margin-top: 6px;
}

.tag {
    border-radius: 6px;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    text-transform: uppercase;
}

.tag-py {
    background: #1e40af;
}

.tag-md {
    background: #374151;
}

.tag-js {
    background: #ca8a04;
}

.tag-html {
    background: #ea580c;
}

.tag-css {
    background: #0284c7;
}

.tag-json {
    background: #9333ea;
}

.tag-cpp {
    background: #0f766e;
}

.tag-txt {
    background: #475569;
}

/* ========================================
   FILE PAGE
======================================== */
.file-header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.file-header-right {
    align-items: center;
    display: flex;
    gap: 10px;
}

.file-name {
    color: var(--muted);
    font-size: 14px;
    margin-top: 4px;
}

.views {
    color: var(--subtle);
    font-size: 14px;
}

/* ========================================
   BUTTONS
======================================== */
.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.btn {
    border: none;
    border-radius: 8px;
    color: var(--btn-text);
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    padding: 8px 14px;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.btn-download {
    background: var(--btn-download);
}

.btn-github {
    background: var(--btn-github);
}

.btn-copy {
    background: var(--btn-copy);
}

.btn-back {
    background: var(--btn-back);
}

.btn-open {
    background: var(--btn-open);
    border-radius: 8px;
    font-size: 14px;
    padding: 8px 16px;
}

/* ========================================
   UPDATES PAGE
======================================== */
.updates-link {
    color: var(--link);
    font-weight: 600;
    margin-bottom: 30px;
}

.updates-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.update-card {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    padding: 18px;
}

.update-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.update-title {
    font-weight: 600;
}

.update-meta {
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 12px;
}

.update-file {
    color: var(--subtle);
}

/* ========================================
   FOOTER
======================================== */
footer {
    margin-top: 22px;
}

.footer-island {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%),
        var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22);
    padding: 16px 20px;
}

body.light .footer-island {
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.1);
}

.footer-inner {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 14px;
    justify-content: space-between;
}

.footer-link {
    color: var(--link);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(96, 165, 250, 0.35);
    text-underline-offset: 2px;
}

.footer-link-inline {
    text-align: right;
}

/* ========================================
   MARKDOWN
======================================== */
.markdown-container {
    background: var(--markdown-bg);
    border: 1px solid var(--markdown-border);
    border-radius: 14px;
    padding: 24px;
}

.markdown-body > *:first-child {
    margin-top: 0;
}

.markdown-body > *:last-child {
    margin-bottom: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    color: var(--markdown-heading);
    line-height: 1.25;
    margin: 1.1em 0 0.55em;
}

.markdown-body h1,
.markdown-body h2 {
    border-bottom: 1px solid var(--markdown-border);
    padding-bottom: 0.25em;
}

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote,
.markdown-body table,
.markdown-body pre {
    margin: 0.75em 0;
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 1.35em;
}

.markdown-body li + li {
    margin-top: 0.3em;
}

.markdown-body a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.markdown-body code {
    background: var(--markdown-inline-code-bg);
    border: 1px solid var(--markdown-inline-code-border);
    border-radius: 6px;
    font-family: var(--code-font);
    font-size: 0.9em;
    padding: 0.12em 0.35em;
}

.markdown-body pre {
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: 10px;
    overflow-x: auto;
    padding: 14px 16px;
}

.markdown-body pre code {
    background: transparent;
    border: 0;
    display: block;
    padding: 0;
}

.markdown-body blockquote {
    background: var(--markdown-quote-bg);
    border-left: 3px solid var(--surface-hover-border);
    border-radius: 8px;
    color: var(--muted);
    margin-left: 0;
    padding: 8px 12px;
}

.markdown-body table {
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
    width: 100%;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid var(--markdown-border);
    padding: 8px 10px;
    text-align: left;
}

.markdown-body th {
    background: var(--markdown-table-head-bg);
}

.markdown-body hr {
    border: 0;
    border-top: 1px solid var(--markdown-border);
    margin: 1.2em 0;
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 700px) {
    .hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .hero-island {
        border-radius: 16px;
        padding: 16px;
    }

    .file-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .update-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .footer-inner {
        flex-direction: column;
        gap: 6px;
    }

    .footer-link-inline {
        text-align: left;
    }
}