/* Shared theme tokens and dark-mode overrides for stephens.page.
   System preference is the default; [data-theme] is set only when the user
   has explicitly chosen light or dark (see theme.js). */

:root {
    color-scheme: light dark;
    --theme-toggle-size: 2.25rem;
}

/* Explicit light (overrides a dark system preference). */
html[data-theme="light"] {
    color-scheme: light;
    --ink: #181512;
    --brand: #9b4d24;
    --brand-ink: #ffffff;
    --muted: #625a52;
    --surface: #ffffff;
    --soft: #efe9df;
    --rule: #d6d1c9;
    --code-bg: #efe9df;
    --bar-bg: #ece6dc;
    --line: #d6d1c9;
}

/* Explicit dark (overrides a light system preference). */
html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f0ebe4;
    --brand: #d4a07a;
    --brand-ink: #141210;
    --muted: #a89f94;
    --surface: #141210;
    --soft: #1e1a16;
    --rule: #3a342e;
    --code-bg: #252019;
    --bar-bg: #2a2520;
    --line: #3a342e;
}

/* System dark when the user has not pinned a theme. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;
        --ink: #f0ebe4;
        --brand: #d4a07a;
        --brand-ink: #141210;
        --muted: #a89f94;
        --surface: #141210;
        --soft: #1e1a16;
        --rule: #3a342e;
        --code-bg: #252019;
        --bar-bg: #2a2520;
        --line: #3a342e;
    }
}

/* Smooth token transitions after first paint (set by theme.js). */
html.theme-ready,
html.theme-ready body {
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
}

/* ---- Dark-mode fixes for a few hardcoded light surfaces ---- */

html[data-theme="dark"] .cta-secondary,
html[data-theme="dark"] .app-card,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .lightbox-image-wrap,
html[data-theme="dark"] .cs-callout,
html[data-theme="dark"] .seven,
html[data-theme="dark"] .card-frame,
html[data-theme="dark"] .headshot-wrap,
html[data-theme="dark"] .card-actions a,
html[data-theme="dark"] .qr-frame {
    background: var(--surface);
}

html[data-theme="dark"] .cta-primary,
html[data-theme="dark"] .chip.open,
html[data-theme="dark"] .toggle button.on,
html[data-theme="dark"] .subscribe button,
html[data-theme="dark"] .subscribe .nl-cta {
    color: var(--brand-ink);
}

html[data-theme="dark"] h2.sec-h:hover {
    color: var(--brand);
}

html[data-theme="dark"] .chip.plat {
    background: #2a221c;
    border-color: #4a3a2e;
    color: #d4a07a;
}

html[data-theme="dark"] .row .fill.alt,
html[data-theme="dark"] .stack-row .stack-track .fill {
    background: #b9805f;
}

html[data-theme="dark"] .row .fill.rec {
    background: #6a9a6a;
}

/* Connect card hover was a fixed warm white. */
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .btn:focus-visible {
    background: var(--soft);
}

/* Inline architecture diagrams embedded in case-study posts. */
html[data-theme="dark"] .cs-diagram .box {
    fill: var(--surface);
    stroke: var(--brand);
}
html[data-theme="dark"] .cs-diagram .t,
html[data-theme="dark"] .cs-diagram .tb {
    fill: var(--ink);
}
html[data-theme="dark"] .cs-diagram .tm {
    fill: var(--muted);
}
html[data-theme="dark"] .cs-diagram .lbl {
    fill: var(--brand);
}
html[data-theme="dark"] .cs-diagram .ln {
    stroke: var(--brand);
}
html[data-theme="dark"] .cs-diagram .grp {
    fill: rgba(212, 160, 122, 0.08);
    stroke: rgba(212, 160, 122, 0.4);
}
html[data-theme="dark"] .cs-diagram marker path {
    fill: var(--brand);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .cta-secondary,
    html:not([data-theme="light"]) .app-card,
    html:not([data-theme="light"]) .project-card,
    html:not([data-theme="light"]) .card,
    html:not([data-theme="light"]) .lightbox-image-wrap,
    html:not([data-theme="light"]) .cs-callout,
    html:not([data-theme="light"]) .seven,
    html:not([data-theme="light"]) .card-frame,
    html:not([data-theme="light"]) .headshot-wrap,
    html:not([data-theme="light"]) .card-actions a,
    html:not([data-theme="light"]) .qr-frame {
        background: var(--surface);
    }

    html:not([data-theme="light"]) .cta-primary,
    html:not([data-theme="light"]) .chip.open,
    html:not([data-theme="light"]) .toggle button.on,
    html:not([data-theme="light"]) .subscribe button,
    html:not([data-theme="light"]) .subscribe .nl-cta {
        color: var(--brand-ink);
    }

    html:not([data-theme="light"]) h2.sec-h:hover {
        color: var(--brand);
    }

    html:not([data-theme="light"]) .chip.plat {
        background: #2a221c;
        border-color: #4a3a2e;
        color: #d4a07a;
    }

    html:not([data-theme="light"]) .row .fill.alt,
    html:not([data-theme="light"]) .stack-row .stack-track .fill {
        background: #b9805f;
    }

    html:not([data-theme="light"]) .row .fill.rec {
        background: #6a9a6a;
    }

    html:not([data-theme="light"]) .btn:hover,
    html:not([data-theme="light"]) .btn:focus-visible {
        background: var(--soft);
    }

    html:not([data-theme="light"]) .cs-diagram .box {
        fill: var(--surface);
        stroke: var(--brand);
    }
    html:not([data-theme="light"]) .cs-diagram .t,
    html:not([data-theme="light"]) .cs-diagram .tb {
        fill: var(--ink);
    }
    html:not([data-theme="light"]) .cs-diagram .tm {
        fill: var(--muted);
    }
    html:not([data-theme="light"]) .cs-diagram .lbl {
        fill: var(--brand);
    }
    html:not([data-theme="light"]) .cs-diagram .ln {
        stroke: var(--brand);
    }
    html:not([data-theme="light"]) .cs-diagram .grp {
        fill: rgba(212, 160, 122, 0.08);
        stroke: rgba(212, 160, 122, 0.4);
    }
    html:not([data-theme="light"]) .cs-diagram marker path {
        fill: var(--brand);
    }
}

/* ---- Theme toggle control ---- */

.theme-toggle-cluster {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--theme-toggle-size);
    height: var(--theme-toggle-size);
    padding: 0;
    margin: 0;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--soft);
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: var(--brand);
    color: var(--brand);
    outline: none;
}

.theme-toggle:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
}

.theme-toggle svg {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
    pointer-events: none;
}

/* Pages without a topbar (connect / hi / scan) get a floating control. */
.theme-toggle--fixed {
    position: fixed;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 40;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Show the icon for the *current* preference (not the next click target).
   Cycle is system → light → dark → system; the button label says what the
   next click will do. Showing "system" while forced dark made it look like
   system mode was active when the page did not match the OS. */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon,
.theme-toggle .icon-system {
    display: none;
}

/* System (no data-theme) → monitor */
html:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-system {
    display: block;
}

/* Light → sun */
html[data-theme="light"] .theme-toggle .icon-sun {
    display: block;
}

/* Dark → moon */
html[data-theme="dark"] .theme-toggle .icon-moon {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    html.theme-ready,
    html.theme-ready body {
        transition: none !important;
    }
}