/* theme.css — dark/light themes + silhouette palettes */

:root,
[data-theme="dark"] {
  --bg:           #0a0e14;
  --bg-elev:      #0f141b;
  --bg-2:         #131a25;
  --bg-3:         #1a2332;
  --fg:           #e6edf3;
  --fg-2:         #b1bdc9;
  --fg-3:         #7a8794;
  --border:       #1d2734;
  --border-strong:#2a3850;
  --accent:       #4f8cff;
  --accent-hi:    #6aa0ff;
  --accent-2:     #b664ff;
  --accent-soft:  rgba(79, 140, 255, .14);
  --accent-shadow:rgba(79, 140, 255, .35);
  --ok:           #5ee38c;
  --ok-soft:      rgba(94, 227, 140, .15);
  --bad:          #ff6b7d;
  --bad-soft:     rgba(255, 107, 125, .15);
  --warn:         #f5b86b;

  --canvas-bg:    #0b0f16;
  --canvas-border:#1b2230;
  --silhouette:   #4f8cff;

  --shadow-sm:    0 2px 8px rgba(0,0,0,.3);
  --shadow-md:    0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:    0 24px 60px rgba(0,0,0,.5);
}

[data-theme="light"] {
  --bg:           #f6f8fb;
  --bg-elev:      #ffffff;
  --bg-2:         #f1f4f8;
  --bg-3:         #e6ebf2;
  --fg:           #0d1421;
  --fg-2:         #4a5568;
  --fg-3:         #7c8a99;
  --border:       #dfe5ec;
  --border-strong:#bbc6d3;
  --accent:       #2563eb;
  --accent-hi:    #1d4ed8;
  --accent-2:     #9333ea;
  --accent-soft:  rgba(37, 99, 235, .12);
  --accent-shadow:rgba(37, 99, 235, .25);
  --ok:           #16a34a;
  --ok-soft:      rgba(22, 163, 74, .12);
  --bad:          #dc2626;
  --bad-soft:     rgba(220, 38, 38, .12);
  --warn:         #d97706;

  --canvas-bg:    #eef2f7;
  --canvas-border:#dde3ec;
  --silhouette:   #2563eb;

  --shadow-sm:    0 2px 8px rgba(20,30,50,.06);
  --shadow-md:    0 8px 24px rgba(20,30,50,.08);
  --shadow-lg:    0 24px 60px rgba(20,30,50,.10);
}

/* Silhouette palette presets — applied via [data-palette] */
[data-palette="classic"]  { --canvas-bg: #0b0f16; --silhouette: #4f8cff; }
[data-palette="amber"]    { --canvas-bg: #1a1208; --silhouette: #f5a142; }
[data-palette="mint"]     { --canvas-bg: #0a1822; --silhouette: #6ce0a6; }
[data-palette="mono"]     { --canvas-bg: #ffffff; --silhouette: #0a0a0a; }
[data-palette="contrast"] { --canvas-bg: #000000; --silhouette: #ffff00; }
[data-palette="rose"]     { --canvas-bg: #1f0a16; --silhouette: #ff6b9d; }
[data-palette="galaxy"]   { --canvas-bg: #050510; --silhouette: #c084fc; } /* hidden — easter egg */

/* Canvas frame */
.stage-frame {
  position: relative;
  background: var(--canvas-bg);
  border-radius: 18px;
  border: 1px solid var(--canvas-border);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: background .35s ease;
}
.stage-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(0,0,0,.35);
  z-index: 1;
}
[data-theme="light"] .stage-frame::before {
  box-shadow: inset 0 0 60px rgba(20,30,50,.05);
}

/* Galaxy palette starfield — painted BEHIND the canvas (z-index 0). */
[data-palette="galaxy"] .stage-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent),
    radial-gradient(1px 1px at 28% 78%, #fff, transparent),
    radial-gradient(1px 1px at 47% 11%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 62% 56%, #fff, transparent),
    radial-gradient(1px 1px at 81% 39%, #fff, transparent),
    radial-gradient(1px 1px at 91% 88%, #fff, transparent),
    radial-gradient(1px 1px at 5% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 73% 7%, #fff, transparent);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}