/* ============================================================
   Dark theme
   The palette stays warm and quiet — near-black paper, warm ink,
   and a slightly lifted cobalt for readable contrast.
   ============================================================ */
[data-theme="dark"] {
    color-scheme: dark;

    --paper: #0C0C0B;
    --surface: #111110;
    --tint: #161614;
    --ink: #F2F0E9;
    --ink-secondary: #ACA99F;
    --ink-muted: #8A877D;
    --line: #292824;
    --line-strong: #3D3B34;

    --accent: #8FA2FF;
    --accent-hover: #A9B8FF;
    --accent-soft: rgba(143, 162, 255, 0.09);
    --on-accent: #0C0C0B;
    --success: #63D99A;
    --error: #FF9A9A;

    --header-bg: rgba(12, 12, 11, 0.84);
    --header-inverse-bg: rgba(5, 5, 4, 0.88);
    --portrait-bg: #1A1916;

    --inverse-bg: #050504;
    --inverse-text: #F2F0E9;
    --inverse-secondary: #BCB8AC;
    --inverse-muted: #928F84;
    --inverse-line: rgba(242, 240, 233, 0.14);
    --inverse-line-strong: rgba(242, 240, 233, 0.25);
    --inverse-accent: #9CAEFF;
}

body,
.site-header,
.section--tint,
.ticker,
.portrait__frame {
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

[data-theme="dark"] .theme-toggle:hover {
    background-color: var(--surface);
}

[data-theme="dark"] .portrait__frame::before {
    border-color: var(--line);
}

[data-theme="dark"] .project__media img {
    opacity: 0.94;
}

[data-theme="dark"] .project__media:hover img {
    opacity: 1;
}

[data-theme="dark"] .skip-link {
    background-color: var(--ink);
    color: var(--paper);
}

[data-theme="dark"] ::selection {
    color: #0C0C0B;
}

[data-theme="dark"] input:-webkit-autofill {
    -webkit-text-fill-color: var(--inverse-text);
    -webkit-box-shadow: 0 0 0 1000px var(--inverse-bg) inset;
}