/* ============================================================================
   Theme — dark ("carbon").
   Color tokens only. Loaded after tokens.css; before style.css.
   Swap with theme-light.css to change palette without touching layout.

   The selector list also targets .force-dark so any region opting in with
   that class gets the dark palette locally — even in light mode (light
   theme @imports this file first, so .force-dark resolves to dark values
   without duplication). The console terminal is NOT in this list — it
   uses the active theme; light mode renders it as a paper-style terminal.
   ========================================================================= */

:root,
.force-dark {
    /* ── Surfaces — pure neutral grays (R=G=B), no blue undertone.
       Brighter than the previous pass and with widened steps between
       layers so panel hierarchy reads at a glance. ────────────────── */
    --bg: #181818;
    --bg-surface: #242424;
    --bg-elevated: #2e2e2e;
    --bg-deep: #101010;
    --bg-deepest: #080808;
    --bg-header: rgba(36, 36, 36, 0.62);
    --bg-chrome: rgba(36, 36, 36, 0.58);

    /* ── Hover & subtle overlays ──────────────────────────────────── */
    --bg-hover: rgba(77, 150, 255, 0.08);
    --bg-active: rgba(77, 150, 255, 0.14);
    --bg-input: rgba(255, 255, 255, 0.05);
    --bg-tint-subtle: rgba(255, 255, 255, 0.04);
    --bg-tint-light: rgba(255, 255, 255, 0.06);
    --bg-tint-medium: rgba(255, 255, 255, 0.10);

    /* ── Text — near-white primary, mid-gray dim. Pure neutral so the
       grayscale character extends into the type. Contrast ratios:
         text on bg     ≈ 13:1  (AAA)
         text-dim on bg ≈  6.7:1 (AAA)  ↑ from ~4.5:1 previously
       ────────────────────────────────────────────────────────────── */
    --text: #e8e8e8;
    --text-dim: #9a9a9a;
    --text-muted: #b8b8b8;
    --text-strong: #f8f8f8;
    --text-on-color: #0a0a0a;
    --text-on-color-inv: #e8e8e8;

    /* ── Accent — vivid cool blue (was muted #6ea8d0). Reads bright
       against the now-neutral grays without pulling everything blue. */
    --accent: #4d96ff;
    --accent-strong: #7cb3ff;
    --accent-rgb: 77, 150, 255;

    /* ── Semantic — saturated for legibility. Roughly Tailwind 500. */
    --green: #22c55e;
    --yellow: #eab308;
    --orange: #f97316;
    --red: #ef4444;
    --red-strong: #dc2626;
    --green-rgb: 34, 197, 94;
    --yellow-rgb: 234, 179, 8;
    --orange-rgb: 249, 115, 22;
    --red-rgb: 239, 68, 68;

    /* ── Borders — invisible by default; depth via shadow ─────────── */
    --border: transparent;
    --border-deep: transparent;
    --border-strong: rgba(255, 255, 255, 0.13);
    --border-rgb: 40, 40, 40;

    /* ── Shadows — softer, longer, lower opacity (visionOS feel) ──── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.34);
    --shadow-xl: 0 20px 56px rgba(0, 0, 0, 0.42);
    --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-inset: inset 0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-glow-accent: 0 0 18px rgba(var(--accent-rgb), 0.35);
    --shadow-header: 0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow-panel-left: 6px 0 32px rgba(0, 0, 0, 0.28);
    --shadow-panel-right: -6px 0 32px rgba(0, 0, 0, 0.28);
    --shadow-panel-bottom: 0 -6px 32px rgba(0, 0, 0, 0.30);
    --shadow-panel-header: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-panel-tabs: 0 2px 8px rgba(0, 0, 0, 0.12);

    /* ── Glass shadow — for spatial-UI surfaces ─────────────────────
       Long soft drop + inset top-edge highlight. The highlight makes
       the panel look like light is catching its leading edge — the
       single most "Apple" trick. Combine with backdrop-filter blur. */
    --shadow-glass:
        0 16px 48px rgba(0, 0, 0, 0.38),
        0 2px 8px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --shadow-glass-strong:
        0 24px 64px rgba(0, 0, 0, 0.48),
        0 4px 12px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);

    /* ── Glass fills — semi-transparent base for translucent panels ─
       Backdrop-filter does the actual blur; these are the tint.
       Neutral gray (rgb 46) matches bg-elevated so glass chrome stays
       in the same grayscale family as the solid surfaces. */
    --glass-bg: rgba(46, 46, 46, 0.55);
    --glass-bg-strong: rgba(46, 46, 46, 0.72);
    --glass-bg-subtle: rgba(46, 46, 46, 0.38);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-highlight-top: rgba(255, 255, 255, 0.18);

    /* ── Ambient backdrop — stronger so glass has something to filter ─
       Multiple radial gradients give the "spatial photo" mood without
       shipping an actual photo. Wallpaper feature overlays on top. */
    --backdrop-gradient:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(80, 120, 200, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 80% 20%, rgba(140, 80, 180, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 90% 70% at 60% 90%, rgba(40, 100, 160, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 15% 85%, rgba(30, 80, 130, 0.14) 0%, transparent 60%);
}