/* Sly.so — Dark Fox Pastel OKLCH Palette */
/* Dark background with fox orange/rust/ember accents, sparse forest green */

:root {
    /* Background — very dark blue-purple */
    --bg-base: oklch(0.12 0.02 260);
    --bg-surface: oklch(0.16 0.03 260);
    --bg-elevated: oklch(0.20 0.03 260);

    /* Fox primary — warm amber/rust */
    --fox-orange: oklch(0.65 0.18 45);
    --fox-amber: oklch(0.70 0.22 55);
    --fox-rust: oklch(0.50 0.14 35);

    /* Ember accent — red glow */
    --ember-red: oklch(0.55 0.20 25);
    --ember-soft: oklch(0.45 0.15 20);
    --ember-deep: oklch(0.35 0.12 15);

    /* Forest — sparse, muted green for specific accents only */
    --forest: oklch(0.55 0.12 145);
    --forest-deep: oklch(0.40 0.10 140);

    /* Text — near-white to mid-gray */
    --text-primary: oklch(0.95 0.01 260);
    --text-secondary: oklch(0.70 0.02 260);
    --text-muted: oklch(0.50 0.01 260);

    /* Code */
    --code-bg: oklch(0.10 0.02 260);
    --code-border: oklch(0.30 0.08 45);
}

/* Base styling */
body {
    background-color: var(--bg-base);
    color: var(--text-primary);
}

/* Links — fox orange */
a {
    color: var(--fox-orange);
}

a:hover {
    color: var(--fox-amber);
}

/* Blockquotes and code blocks — rust border */
blockquote, pre {
    border-left-color: var(--fox-rust);
}

/* Inline code */
:not(pre) > code {
    background-color: var(--code-bg);
    border-color: var(--code-border);
}

/* Horizontal rules — deep ember */
hr {
    background-color: var(--ember-deep);
    color: var(--ember-deep);
}

/* Aside panels */
aside {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

/* Navigation */
main nav {
    border-bottom-color: var(--ember-deep);
}

main nav a {
    color: var(--fox-orange);
}

main nav a:hover {
    color: var(--fox-amber);
    border-color: var(--fox-amber);
}

/* Related posts */
div.related-posts {
    border-color: var(--ember-soft);
}

/* Footer */
main footer {
    border-top-color: var(--ember-deep);
}

/* Code blocks */
pre {
    background-color: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: 4px;
}

/* Mermaid diagrams — dark surface with ember border */
.mermaid {
    background-color: var(--bg-surface);
    border: 1px solid var(--ember-deep);
    border-radius: 4px;
    padding: 1rem;
}

/* Headers — fox orange */
h1, h2, h3, h4, h5, h6 {
    color: var(--fox-amber);
}

/* Article title */
article .entry-title {
    color: var(--fox-orange);
}

/* Tags — ember soft */
.tags a {
    color: var(--ember-soft);
}

/* Archive dates */
.archive-entry-date {
    color: var(--text-muted);
}

/* Tables */
table {
    border-color: var(--ember-deep);
}

table th {
    background-color: var(--bg-elevated);
    color: var(--fox-amber);
}

table td {
    border-color: var(--ember-deep);
}

/* Success indicators — sparse forest green */
.status-success,
.pass {
    color: var(--forest);
}

/* Warning indicators — ember soft */
.status-warning,
.warn {
    color: var(--ember-soft);
}

/* Error indicators — ember red */
.status-error,
.fail {
    color: var(--ember-red);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
    background: var(--ember-deep);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ember-soft);
}

/* Selection */
::selection {
    background-color: var(--fox-rust);
    color: var(--text-primary);
}