/* ═══════════════════════════════════════════════════════════════════════════
   Shared dark "command-palette" canvas — prefix mw-canvas-*
   The mitware-theme immersive surface (docs/plans/mitware-theme/): deep near-black
   canvas, MitWare violet accent, hairline borders, soft shadows, Geist body +
   JetBrains Mono metadata. Color spent in milligrams.

   THIRD-ADOPTER EXTRACTION: artist-buro.css (mw-ab-*) and mw-topup-station.css
   (mw-tus-*) each inline this token block. Per the theme doc, the third adopter
   extracts the shared tokens into a utility sheet instead of copying the block a
   third time — this is that sheet. New adopters apply .mw-canvas to their root and
   consume --mw-canvas-* (directly, or aliased under their own module prefix). The
   two existing adopters keep their own scoped vars; this file does not touch them.
   ═══════════════════════════════════════════════════════════════════════════ */

.mw-canvas {
    /* canvas */
    --mw-canvas-bg-page: #07070a;
    --mw-canvas-glow-1: hsl(263 75% 12%);
    --mw-canvas-glow-2: hsl(220 60% 9%);

    /* surfaces */
    --mw-canvas-surface: hsl(240 12% 9%);
    --mw-canvas-surface-elev: hsl(240 11% 11.5%);
    --mw-canvas-surface-hover: hsla(0 0% 100% / 0.03);

    /* borders */
    --mw-canvas-border: hsla(0 0% 100% / 0.06);
    --mw-canvas-border-strong: hsla(0 0% 100% / 0.10);

    /* text */
    --mw-canvas-text: hsl(0 0% 96%);
    --mw-canvas-text-dim: hsl(240 5% 60%);
    --mw-canvas-text-faint: hsl(240 5% 40%);

    /* accent — MitWare violet */
    --mw-canvas-accent: hsl(263 90% 67%);
    --mw-canvas-accent-soft: hsl(263 70% 79%);
    --mw-canvas-accent-glow: hsla(263 90% 67% / 0.18);
    --mw-canvas-accent-tint: hsla(263 90% 67% / 0.10);
    --mw-canvas-accent-line: hsla(263 90% 67% / 0.30);

    /* status — calm, not neon */
    --mw-canvas-green: hsl(152 55% 56%);
    --mw-canvas-green-dim: hsla(152 55% 56% / 0.13);
    --mw-canvas-amber: hsl(38 92% 62%);
    --mw-canvas-amber-dim: hsla(38 92% 62% / 0.13);
    --mw-canvas-red: hsl(351 75% 64%);
    --mw-canvas-red-dim: hsla(351 75% 64% / 0.13);
    --mw-canvas-blue: hsl(210 80% 65%);
    --mw-canvas-blue-dim: hsla(210 80% 65% / 0.13);
    --mw-canvas-teal: hsl(172 60% 50%);
    --mw-canvas-pink: hsl(322 70% 68%);

    /* type + shape */
    --mw-canvas-font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --mw-canvas-font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;
    --mw-canvas-radius: 12px;
    --mw-canvas-radius-sm: 8px;
    --mw-canvas-shadow:
        0 1px 0 hsla(0 0% 100% / 0.02) inset,
        0 18px 40px -24px hsla(0 0% 0% / 0.8);

    background: var(--mw-canvas-bg-page);
    color: var(--mw-canvas-text);
    font-family: var(--mw-canvas-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.mw-canvas *,
.mw-canvas *::before,
.mw-canvas *::after { box-sizing: border-box; }

/* Optional atmosphere — soft brand glows masked toward the corners, behind all content.
   Opt in with .mw-canvas--atmosphere on a positioned (position: relative) root. */
.mw-canvas--atmosphere { position: relative; }

.mw-canvas--atmosphere::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 45% at 18% 0%, var(--mw-canvas-glow-1), transparent 60%),
        radial-gradient(ellipse 50% 40% at 92% 100%, var(--mw-canvas-glow-2), transparent 60%);
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}