/* ============================================================
   Workshop — theme glue on top of shared/brand.css
   Maps each page's legacy variable names onto the brand tokens
   so colors, fonts, and theme switching follow
   morganwilkinson.com. Also shields page classes (.card, .btn)
   from brand component styles they were never written for.
   ============================================================ */

/* ---------- Variable aliases ---------- */

:root {
    /* sage-industrial vocabulary (index, printventory, price-monitor) */
    --ink: var(--text);
    --ink-soft: var(--muted);
    --ink-faint: var(--faint);
    --surface-2: var(--surface-strong);
    --surface-alt: var(--surface-2);
    --line-strong: rgba(23, 23, 44, 0.24);
    --amber: var(--orange);
    --amber-bg: color-mix(in srgb, var(--orange) 14%, transparent);
    --amber-dim: color-mix(in srgb, var(--orange) 80%, var(--text));
    --red-bg: color-mix(in srgb, var(--red) 12%, transparent);
    --green: #16a34a;
    --green-bg: color-mix(in srgb, var(--green) 12%, transparent);
    --focus: var(--cyan);
    --radius-sm: 8px;
    --radius-md: 12px;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --font-display: var(--font-head);

    /* warm-paper vocabulary (cheatsheet, fdm reference) */
    --bg-raised: var(--surface-strong);
    --bg-card: var(--surface);
    --ink-dim: var(--muted);

    /* opaque surface for floating UI (modals, bars) — --surface is glass */
    --modal-bg: #fbfbfe;
}
:root[data-theme="dark"] {
    --green: #4ade80;
    --line-strong: rgba(255, 255, 255, 0.24);
    --modal-bg: #15151f;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --green: #4ade80;
        --line-strong: rgba(255, 255, 255, 0.24);
        --modal-bg: #15151f;
    }
}

/* ---------- Collision shield ----------
   brand.css ships component classes (.card, .btn, ...) that collide
   with the pages' own. Neutralize the extras brand adds that page
   rules were never written to undo — page inline styles load after
   this file and still win for everything else. */

body .card {
    text-align: left;
    animation: none;
    box-shadow: none;
}
body .card::before { display: none; }

body .btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Cards read as light glass over the aurora scene */
body .card {
    background: var(--surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Grid overlay is too busy behind dense content — blobs stay */
.scene .grid { display: none; }

/* ---------- Shared workshop shell ---------- */

.ws-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 8px;
}
.ws-back:hover { color: var(--text); }