/* /public/css/shell-appearance.css
   Opt-in appearance layer for the 2D Home and Settings landing.
   `appearance-apply.js` derives these variables from the user's light/dark
   mode and one `shellTint`. The tint changes background gradients and ambient
   glows only. Borders, mint live-state, and semantic colours stay fixed. */

:root[data-shell-appearance][data-theme="dark"],
:root[data-shell-appearance][data-theme="light"] {
  --paper:       var(--shell-bg-0, #02010a);
  --surface:     var(--shell-surface, #150f2e);
  --surface-2:   var(--shell-surface-2, #1b1440);
  --ink:         var(--shell-ink, #eae6f7);
  --ink-soft:    var(--shell-ink-soft, #b7b0d8);
  --ink-dim:     var(--shell-ink-dim, rgba(234, 230, 247, .45));
  --wood-deep:   var(--shell-live, #6ee7b7);
  --amber:       var(--shell-live, #6ee7b7);
  --line:        rgba(124, 92, 255, .26);
  --line-strong: rgba(124, 92, 255, .52);

  --bg:            var(--paper);
  --panel:         var(--surface);
  --panel-solid:   var(--surface);
  --panel-hover:   var(--surface-2);
  --border:        var(--line);
  --border-strong: var(--line-strong);
  --text:          var(--ink);
  --text-body:     var(--ink);
  --text-soft:     var(--ink-soft);
  --text-dim:      var(--ink-dim);
  --accent:        var(--shell-live, #6ee7b7);
  --accent-dim:    rgba(var(--shell-live-rgb, 110, 231, 183), .14);
  --accent-fg:     #04140c;

  --card-bg-top: var(--surface);
  --card-bg-bot: var(--surface-2);
  --card-shadow:
    0 8px 24px rgba(0, 0, 0, .30),
    0 0 22px rgba(var(--shell-tint-rgb, 124, 92, 255), .13),
    inset 0 1px 0 rgba(255, 255, 255, .10);

  --ce-back:      var(--ink);
  --ce-back-glow: rgba(var(--shell-live-rgb, 110, 231, 183), .30);
}

:root[data-shell-appearance][data-theme="light"] {
  --line:        rgba(67, 55, 95, .18);
  --line-strong: rgba(67, 55, 95, .34);
}

:root[data-shell-appearance] {
  background: var(--shell-bg-0, #02010a);
}

:root[data-shell-appearance] body {
  color: var(--shell-ink, #eae6f7);
  background-color: var(--shell-bg-0, #02010a);
  background-image:
    radial-gradient(120% 72% at 78% 0%,
      rgba(var(--shell-tint-rgb, 124, 92, 255), .15) 0%,
      rgba(var(--shell-tint-rgb, 124, 92, 255), 0) 55%),
    radial-gradient(100% 62% at 14% 60%,
      rgba(var(--shell-secondary-rgb, 79, 127, 232), .11) 0%,
      rgba(var(--shell-secondary-rgb, 79, 127, 232), 0) 55%),
    linear-gradient(180deg,
      var(--shell-bg-0, #02010a) 0%,
      var(--shell-bg-1, #080418) 45%,
      var(--shell-bg-2, #0d0724) 80%,
      var(--shell-bg-3, #0a0620) 100%);
  background-attachment: fixed;
}

:root[data-shell-appearance] body::before {
  background-image: none;
}