/* Marmite Galaxy Theme — actual deep space: black void, starfield, faint nebula glow */
/* picocss.com  */
:root {
    --pico-border-radius: 0;
    --pico-card-box-shadow: none;
}

.content-tags a:where(a:not([role=button])),
[role=link] {
    --pico-color: revert;
}

/* Light Mode — daylit sky: soft blue-white with deep space accents */
[data-theme=light],
:root:not([data-theme=dark]) {
    --pico-background-color: #eef1f8;
    --pico-card-background-color: #ffffff;
    --pico-card-sectioning-background-color: var(--pico-background-color);
    --pico-primary: #1d4ed8;
    --pico-primary-hover: #2563eb;
    --pico-color: #10121c;
    --pico-tag: #64748b;
    --pico-h1-color: var(--pico-primary);
    --pico-code-background-color: #e4e8f2;
    --pico-code-color: #1e3a8a;
    --pico-table-border-color: var(--pico-card-background-color);
    --pico-color-azure-550: var(--pico-primary);
}

[data-theme=light] pre:has(> code.language-mermaid) {
    background-color: var(--pico-card-background-color);
}

/* Dark Mode — deep space: true black void, starfield dots, faint nebula wash, cool starlight text */
[data-theme=dark],
:root:not([data-theme=light]) {
    --pico-background-color: #030308;
    --pico-card-background-color: rgba(18, 20, 32, 0.72);
    --pico-card-sectioning-background-color: transparent;
    --pico-primary: #7dd3fc;
    --pico-primary-hover: #bae6fd;
    --pico-color: #dfe3ee;
    --pico-tag: #64748b;
    --pico-h1-color: #f5f7ff;
    --pico-code-background-color: #08080f;
    --pico-code-color: #93c5fd;
    --pico-table-border-color: rgba(148, 163, 184, 0.18);
    --pico-color-azure-550: var(--pico-primary);
}

[data-theme=dark] body {
    background-color: #030308;
    background-image:
        radial-gradient(ellipse 60% 40% at 25% 0%, rgba(56, 60, 130, 0.28), transparent 60%),
        radial-gradient(ellipse 50% 35% at 85% 10%, rgba(30, 80, 120, 0.22), transparent 60%),
        radial-gradient(ellipse 55% 45% at 60% 100%, rgba(60, 40, 100, 0.18), transparent 65%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

[data-theme=dark] pre:has(> code.language-mermaid) {
    background-color: var(--pico-code-background-color);
}

[data-theme=dark] article {
    backdrop-filter: blur(2px);
    border: 1px solid rgba(148, 163, 184, 0.1);
}

[data-theme=dark] .content-tags li:hover {
    background-color: rgba(125, 211, 252, 0.12);
    border: 1px solid rgba(125, 211, 252, 0.35);
}

[data-theme=light] .content-tags li:hover {
    background-color: rgba(29, 78, 216, 0.08);
    border: 1px solid rgba(29, 78, 216, 0.3);
}