/* 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 mode you can switch *to*. */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

html[data-theme="light"] .theme-toggle .icon-moon {
    display: block;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-sun {
        display: block;
    }
}

@media (prefers-color-scheme: light) {
    html:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-moon {
        display: block;
    }
}

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