/* ============================================================
   Stack and Value — Dark mode + polish
   ------------------------------------------------------------
   Follows the visitor's device preference automatically via
   prefers-color-scheme. No toggle, no JavaScript, no cookies:
   if the OS/browser is set to dark, the site renders dark.

   Loaded after built/screen.css so these rules win in the
   cascade. Hand-maintained — not part of the gulp build, so a
   future `gulp build` will not overwrite this file.
   ============================================================ */

@media (prefers-color-scheme: dark) {
    :root {
        /* Tell the browser to render native UI (scrollbars,
           form controls) in dark as well */
        color-scheme: dark;

        /* Page + surfaces */
        --background-color: #15171a;
        --color-lighter-gray: rgb(255 255 255 / 0.06);
        --color-light-gray: #26292f;
        --color-mid-gray: #3b3f46;

        /* Text */
        --color-dark-gray: #c7ccd4;
        --color-darker-gray: #f2f4f7;
        --color-primary-text: #eceff3;
        --color-secondary-text: rgb(255 255 255 / 0.62);

        /* Borders */
        --color-border: rgb(255 255 255 / 0.12);
        --color-dark-border: rgb(255 255 255 / 0.38);
    }

    /* Account dropdown menu (white card in light mode) */
    .gh-dropdown {
        background-color: #1f2329;
        box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1),
            0 12px 32px -8px rgb(0 0 0 / 0.6);
    }

    /* Dropdown links are hardcoded dark with !important in screen.css */
    .gh-dropdown li a {
        color: var(--color-primary-text) !important;
    }

    /* Keep product/photo images crisp on dark backgrounds */
    .gh-content img {
        border-radius: 10px;
    }

    /* Code blocks: lift slightly off the page background */
    .gh-content pre {
        background: rgb(255 255 255 / 0.07);
        border: 1px solid rgb(255 255 255 / 0.08);
    }

    .gh-content :not(pre) > code {
        background: rgb(255 255 255 / 0.09);
    }

    /* Tables: soften row dividers already handled by
       --color-border; give the header row a touch more presence */
    .gh-content .gh-table table th {
        color: var(--color-primary-text);
    }

    /* Blockquotes */
    .gh-content blockquote {
        border-left-color: var(--ghost-accent-color);
    }

    /* Bookmark cards (link embeds) */
    .gh-content .kg-bookmark-card .kg-bookmark-container {
        background: rgb(255 255 255 / 0.04);
        border: 1px solid var(--color-border);
    }

    /* Toggle / callout cards */
    .gh-content .kg-toggle-card,
    .gh-content .kg-callout-card {
        background: rgb(255 255 255 / 0.04);
    }

    /* Signup / subscribe cards inside articles */
    .gh-content .kg-signup-card {
        background: rgb(255 255 255 / 0.04);
    }

    /* Form placeholders on dark surfaces */
    .gh-form-input::placeholder {
        color: rgb(255 255 255 / 0.35);
    }

    /* …except the white form used over header images */
    .gh-header.is-classic.has-image .gh-form-input::placeholder {
        color: rgb(0 0 0 / 0.35);
    }
}

/* ============================================================
   Polish (applies in both modes)
   ============================================================ */

/* Accent-tinted text selection */
::selection {
    background: var(--ghost-accent-color);
    color: #fff;
}

/* Visible, consistent keyboard focus */
:focus-visible {
    outline: 2px solid var(--ghost-accent-color);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Card images: gentle zoom on hover for a more tactile feel */
.gh-card-link .gh-card-image {
    overflow: hidden;
}

.gh-card-link img {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.gh-card-link:hover img {
    transform: scale(1.03);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gh-card-link img {
        transition: none;
    }

    .gh-card-link:hover img {
        transform: none;
    }
}