/*
 * night.css — "night sketch": the sketchbook drawn in chalk on a blackboard.
 *
 * The rest of the CSS draws with --black (ink) on --white / --bg-cream (paper).
 * At night the board is dark and the ink becomes chalk. Paper things that are
 * physically stuck onto the board (sticky notes, tape labels, yellow buttons)
 * keep their day colors, like real paper pinned to a chalkboard.
 */

html[data-theme="night"] {
    color-scheme: dark;
    --bg-cream: #1d2a24;
    --white: #24332c;
    --paper-yellow: #213029;
    --paper-tint: #2d3e36;
    --black: #e8ece3;
    --ink-rgb: 232, 236, 227;
    --accent-yellow: #f5cd5f;
    --chalk-dust: rgba(232, 236, 227, .06);
}

html[data-theme="night"] body {
    background-color: var(--bg-cream);
    background-image:
        radial-gradient(ellipse 60% 40% at 18% 12%, var(--chalk-dust), transparent 70%),
        radial-gradient(ellipse 50% 35% at 82% 48%, rgba(232, 236, 227, .045), transparent 70%),
        radial-gradient(ellipse 70% 40% at 35% 88%, rgba(232, 236, 227, .04), transparent 70%);
    background-attachment: fixed;
}

/* Chalk is a little soft around the edges. */
html[data-theme="night"] :is(h1, h2, h3, .hero-line, .logo) {
    text-shadow: 0 0 1px rgba(232, 236, 227, .45), 0 0 6px rgba(232, 236, 227, .08);
}

/* ---------------- paper stuck on the board ---------------- */

html[data-theme="night"] :is(
    .wall-note,
    .sticky-note,
    .contact-mini-note,
    .sw-photo-note,
    .sw-key,
    .hero-cta,
    .figma-box,
    .contact-sketch-tag,
    .now-kicker,
    .route-eyebrow,
    .lab-approved-stamp,
    .say-hi-fab,
    .contact-sent-stamp,
    .contact-chip-icon,
    .wall-open,
    .wall-submit,
    .wall-thanks,
    .wall-anon,
    .people-cta-button,
    .people-back,
    .badge,
    .debug-card,
    .bio-title-mark,
    .bio-margin-note,
    .profile-passport,
    .stack-note-sticker,
    .pill-featured,
    .pill-secondary,
    .sticky-sheet,
    .bio-card,
    .palette-doodle,
    .doom-card,
    .lab-file-visual,
    .lab-sticky-visual,
    .lab-project-content,
    .lab-retry,
    .route-shell .nav-link[aria-current="page"] .link-text,
    .people-toolbar select,
    .people-dialog,
    .runner-card,
    .runner-leaderboard,
    .runner-note,
    .stack-card
) {
    --black: #121212;
    --white: #FFFDF7;
    --ink-rgb: 18, 18, 18;
    --paper-tint: #F0EBD8;
    --paper-yellow: #FFF9E6;
    --border-thick: 3.5px solid #121212;
    --border-sketch: 2.5px solid #121212;
    --shadow-hard: 6px 6px 0 rgba(0, 0, 0, .45);
    --shadow-soft: 4px 4px 0 rgba(0, 0, 0, .45);
    color: #121212;
    text-shadow: none;
}

/* Things that are black-on-white by day become chalk blocks: keep their text dark. */
html[data-theme="night"] :is(.skip-link, .doom-code) {
    color: var(--bg-cream);
    border-color: var(--bg-cream);
}

html[data-theme="night"] .dev-titlebar .dev-branch { color: #6b5200; }

/* Modal backdrops dim the room, they don't fill it with chalk dust. */
html[data-theme="night"] :is(.palette-backdrop, .doom-backdrop, .people-modal-backdrop) {
    background: rgba(0, 0, 0, .6);
}

html[data-theme="night"] .people-vote[data-active="true"] { color: #121212; border-color: #121212; }

/* Translucent white washes turn grey on a board; use a faint chalk wash instead. */
html[data-theme="night"] :is(.lab-workbench, .people-board, .people-row) { background: rgba(232, 236, 227, .035); }

/* ---------------- theme switch: wipe the board ---------------- */

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}