stagecraft 0.1.0

package/themes/phosphor/components-layout.css

@@ -0,0 +1,450 @@
+/* Stagecraft — Phosphor theme: layout components. */
+
+/* ---------------------------------------------------------------------------
+ * ImageText
+ * ------------------------------------------------------------------------- */
+.image-text {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(2rem, 5vw, 5rem);
+  align-items: center;
+  width: min(1400px, 94vw);
+}
+.image-text--right { grid-template-areas: 'text image'; }
+.image-text--right .it-figure { grid-area: image; }
+.image-text--right .it-text { grid-area: text; }
+.image-text--left  { grid-template-areas: 'image text'; }
+.image-text--left  .it-figure { grid-area: image; }
+.image-text--left  .it-text  { grid-area: text; }
+
+.it-figure {
+  position: relative;
+  margin: 0;
+  aspect-ratio: 4 / 5;
+  overflow: hidden;
+  background: var(--bg-elevated);
+  opacity: 0;
+  transform: translateX(-30px) scale(0.98);
+  transition: opacity 900ms ease-out, transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.image-text--right .it-figure { transform: translateX(30px) scale(0.98); }
+.it-figure.in { opacity: 1; transform: translateX(0) scale(1); }
+.it-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  filter: saturate(0.92) contrast(1.04);
+}
+.it-img-frame {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  box-shadow:
+    inset 0 0 0 1px var(--dim-2),
+    0 0 0 1px var(--dim-2),
+    0 30px 60px -20px rgba(0,0,0,0.6),
+    0 0 60px -10px var(--accent-glow);
+}
+
+.it-text {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.8rem, 1.5vw, 1.4rem);
+}
+.it-heading {
+  margin: 0;
+  font-size: clamp(2.5rem, 5.5vw, 4rem);
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  color: var(--fg);
+  opacity: 0;
+  transform: translateY(14px);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.it-heading.in { opacity: 1; transform: translateY(0); }
+.it-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4em;
+}
+.it-line {
+  font-size: clamp(1rem, 1.6vw, 1.4rem);
+  line-height: 1.5;
+  color: var(--fg);
+  opacity: 0;
+  transform: translateY(10px);
+  transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.it-line.in { opacity: 1; transform: translateY(0); }
+.it-caption {
+  margin-top: 0.6rem;
+  font-size: clamp(0.85rem, 1.1vw, 1rem);
+  color: var(--dim);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  opacity: 0;
+  transition: opacity 800ms ease-out;
+}
+.it-caption.in { opacity: 1; }
+
+@media (max-width: 800px) {
+  .image-text, .image-text--left, .image-text--right {
+    grid-template-columns: 1fr;
+    grid-template-areas: 'image' 'text';
+  }
+  .it-figure { aspect-ratio: 16 / 10; }
+}
+
+/* ---------------------------------------------------------------------------
+ * FullImage
+ * ------------------------------------------------------------------------- */
+.full-image-host {
+  padding: 0 !important;
+  display: block !important;
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}
+.full-image {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+.fi-bg {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0;
+  transform: scale(1.04);
+  transition: opacity 1200ms ease-out, transform 18s linear;
+}
+.fi-bg.in { opacity: 1; }
+.fi-bg.drift { transform: scale(1.12) translate(-1%, 1%); }
+
+.fi-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  padding: clamp(2rem, 6vw, 5rem);
+  pointer-events: none;
+  z-index: 2;
+}
+.fi-overlay--center        { align-items: center;     justify-content: center; text-align: center; }
+.fi-overlay--top           { align-items: flex-start; justify-content: center; text-align: center; }
+.fi-overlay--bottom-left   { align-items: flex-end;   justify-content: flex-start; }
+.fi-overlay--bottom-right  { align-items: flex-end;   justify-content: flex-end; text-align: right; }
+
+.fi-scrim {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+.fi-scrim--center       { background: radial-gradient(ellipse at center, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.1) 70%); }
+.fi-scrim--top          { background: linear-gradient(180deg, rgba(10,10,10,0.75), transparent 50%); }
+.fi-scrim--bottom-left  { background: linear-gradient(45deg, rgba(10,10,10,0.85), transparent 60%); }
+.fi-scrim--bottom-right { background: linear-gradient(315deg, rgba(10,10,10,0.85), transparent 60%); }
+
+.fi-overlay-inner {
+  position: relative;
+  z-index: 1;
+  max-width: 32ch;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.8rem, 1.5vw, 1.4rem);
+}
+.fi-overlay--center .fi-overlay-inner,
+.fi-overlay--top    .fi-overlay-inner { max-width: 28ch; }
+.fi-headline {
+  font-size: clamp(2rem, 5vw, 4rem);
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  color: var(--fg);
+  text-shadow: 0 2px 30px rgba(0,0,0,0.55);
+  opacity: 0;
+  transform: translateY(14px);
+  transition: opacity 800ms ease-out, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.fi-headline.in { opacity: 1; transform: translateY(0); }
+.fi-body {
+  font-size: clamp(1rem, 1.4vw, 1.25rem);
+  color: var(--fg);
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 800ms ease-out, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.fi-body.in { opacity: 0.92; transform: translateY(0); }
+
+/* ---------------------------------------------------------------------------
+ * Quote
+ * ------------------------------------------------------------------------- */
+.quote {
+  position: relative;
+  text-align: center;
+  max-width: min(1100px, 92vw);
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: auto auto;
+  align-items: center;
+  column-gap: clamp(0.5rem, 1.5vw, 1.5rem);
+  row-gap: clamp(1.5rem, 4vw, 3rem);
+}
+.q-mark {
+  font-size: clamp(4rem, 9vw, 8rem);
+  line-height: 0.8;
+  color: var(--accent);
+  text-shadow: 0 0 30px var(--accent-glow);
+  opacity: 0;
+  transform: scale(0.6);
+  transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  align-self: start;
+  user-select: none;
+}
+.q-mark.in { opacity: 1; transform: scale(1); }
+.q-mark--open  { padding-top: 0.2em; }
+.q-mark--close { padding-top: 0.2em; align-self: end; }
+
+.q-text {
+  margin: 0;
+  font-style: italic;
+  font-size: clamp(1.8rem, 4vw, 3rem);
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: -0.015em;
+  color: var(--fg);
+  opacity: 0;
+  transform: translateY(12px);
+  transition: opacity 900ms ease-out, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
+  grid-column: 2;
+}
+.q-text.in { opacity: 1; transform: translateY(0); }
+
+.q-meta {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: baseline;
+  gap: 0.6rem;
+  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
+  letter-spacing: 0.04em;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 800ms ease-out, transform 900ms ease-out;
+}
+.q-meta.in { opacity: 1; transform: translateY(0); }
+.q-author { color: var(--fg); font-weight: 500; }
+.q-role,
+.q-source { color: var(--dim); }
+.q-sep    { color: var(--dim-2); }
+
+/* ---------------------------------------------------------------------------
+ * BigNumber
+ * ------------------------------------------------------------------------- */
+.big-number {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: clamp(0.8rem, 1.6vw, 1.4rem);
+}
+.bn-figure {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.05em;
+  line-height: 0.9;
+}
+.bn-num {
+  font-size: clamp(6rem, 18vw, 14rem);
+  font-weight: 500;
+  letter-spacing: -0.05em;
+  color: var(--accent);
+  font-variant-numeric: tabular-nums;
+  text-shadow: 0 0 60px var(--accent-glow);
+  line-height: 1;
+}
+.bn-unit {
+  font-size: clamp(2.5rem, 7vw, 5.5rem);
+  font-weight: 400;
+  letter-spacing: -0.03em;
+  color: var(--dim);
+  margin-left: 0.1em;
+  opacity: 0;
+  transform: translateX(-6px);
+  transition: opacity 600ms ease-out, transform 700ms ease-out;
+}
+.bn-unit.in { opacity: 1; transform: translateX(0); }
+.bn-label {
+  font-size: clamp(1.5rem, 2.5vw, 2rem);
+  color: var(--fg);
+  letter-spacing: -0.01em;
+  max-width: 24ch;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: opacity 700ms ease-out, transform 800ms ease-out;
+}
+.bn-label.in { opacity: 1; transform: translateY(0); }
+.bn-caption {
+  margin-top: 0.6rem;
+  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
+  color: var(--dim);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  opacity: 0;
+  transition: opacity 800ms ease-out;
+}
+.bn-caption.in { opacity: 1; }
+
+/* ---------------------------------------------------------------------------
+ * Stats
+ * ------------------------------------------------------------------------- */
+.stats {
+  display: grid;
+  gap: clamp(1.5rem, 3vw, 2.5rem);
+  width: min(1300px, 94vw);
+}
+.stats--cols-1 { grid-template-columns: 1fr; }
+.stats--cols-2 { grid-template-columns: repeat(2, 1fr); }
+.stats--cols-3 { grid-template-columns: repeat(3, 1fr); }
+.stats--cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding: clamp(1.2rem, 2.5vw, 2rem);
+  border: 1px solid var(--dim-2);
+  background: var(--bg-elevated);
+  position: relative;
+  opacity: 0;
+  transform: translateY(14px);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), border-color 600ms ease;
+}
+.stat.in { opacity: 1; transform: translateY(0); }
+.stat::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--dim-2);
+  transition: background 600ms ease;
+}
+.stat--accent::before { background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }
+.stat--amber::before  { background: var(--amber); }
+.stat--blue::before   { background: var(--blue); }
+.stat--red::before    { background: var(--red); }
+
+.stat-figure {
+  display: flex;
+  align-items: baseline;
+  gap: 0.05em;
+}
+.stat-num {
+  font-size: clamp(2.8rem, 6vw, 5rem);
+  font-weight: 500;
+  letter-spacing: -0.04em;
+  color: var(--fg);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.stat-unit {
+  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
+  color: var(--dim);
+  margin-left: 0.1em;
+}
+.stat--accent .stat-num { color: var(--accent); text-shadow: 0 0 20px var(--accent-glow); }
+.stat--amber .stat-num  { color: var(--amber); }
+.stat--blue .stat-num   { color: var(--blue); }
+.stat--red .stat-num    { color: var(--red); }
+
+.stat-label {
+  font-size: clamp(0.9rem, 1.25vw, 1.1rem);
+  color: var(--dim);
+  letter-spacing: 0.04em;
+  line-height: 1.35;
+  margin-top: 0.4rem;
+}
+
+@media (max-width: 800px) {
+  .stats--cols-3, .stats--cols-4 { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 480px) {
+  .stats--cols-2, .stats--cols-3, .stats--cols-4 { grid-template-columns: 1fr; }
+}
+
+/* ---------------------------------------------------------------------------
+ * Bento
+ * ------------------------------------------------------------------------- */
+.bento {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: minmax(clamp(8rem, 18vh, 14rem), auto);
+  gap: clamp(0.8rem, 1.5vw, 1.4rem);
+  width: min(1400px, 94vw);
+}
+.bento-cell {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: clamp(1.2rem, 2vw, 1.8rem);
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(16px) scale(0.985);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), border-color 500ms ease;
+}
+.bento-cell.in { opacity: 1; transform: translateY(0) scale(1); }
+.bento-cell--span-2 { grid-column: span 2; }
+
+.bento-cell--accent { border-color: rgba(0, 255, 156, 0.35); box-shadow: 0 0 30px -8px var(--accent-glow); }
+.bento-cell--accent .bento-heading { color: var(--accent); }
+.bento-cell--amber  { border-color: rgba(255, 180, 84, 0.4); }
+.bento-cell--amber  .bento-heading { color: var(--amber); }
+.bento-cell--blue   { border-color: rgba(24, 158, 255, 0.4); }
+.bento-cell--blue   .bento-heading { color: var(--blue); }
+
+.bento-cell--image {
+  min-height: clamp(10rem, 22vh, 18rem);
+  color: var(--fg);
+}
+.bento-cell--image .bento-heading { color: var(--fg); text-shadow: 0 2px 18px rgba(0,0,0,0.6); }
+.bento-cell--image .bento-body    { color: var(--fg); opacity: 0.85; }
+
+.bento-cell-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  position: relative;
+  z-index: 1;
+}
+.bento-heading {
+  font-size: clamp(1.2rem, 2vw, 1.7rem);
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  color: var(--fg);
+  line-height: 1.15;
+}
+.bento-body {
+  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
+  color: var(--dim);
+  line-height: 1.4;
+}
+
+@media (max-width: 900px) {
+  .bento { grid-template-columns: repeat(2, 1fr); }
+  .bento-cell--span-2 { grid-column: span 2; }
+}
+@media (max-width: 540px) {
+  .bento { grid-template-columns: 1fr; }
+  .bento-cell--span-2 { grid-column: span 1; }
+}

package/themes/phosphor/components.css

@@ -0,0 +1,223 @@
+/* Stagecraft — Phosphor theme: Layer-2 component styles. */
+
+/* Component expansion (Phase 2): layout / diagram / chart families */
+@import url('./components-layout.css');
+@import url('./components-diagram.css');
+@import url('./components-chart.css');
+/* Phase 3: data / business / content families */
+@import url('./components-data.css');
+@import url('./components-business.css');
+@import url('./components-content.css');
+
+/* KineticText */
+.kinetic .line {
+  display: block;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 800ms ease-out, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.kinetic .line.in { opacity: 1; transform: translateY(0); }
+.kinetic .line.dim { color: var(--dim); }
+.kinetic .line.accent { color: var(--accent); }
+.kinetic .line.fg { color: var(--fg); }
+.kinetic .line.amber { color: var(--amber); }
+.kinetic .line.blue { color: var(--blue); }
+.kinetic .pause { display: inline-block; width: 0.6em; }
+
+/* SectionCard */
+.section-card { text-align: center; max-width: 100%; }
+.sec-rule {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(1rem, 3vw, 2rem);
+  margin-bottom: clamp(2rem, 5vw, 4rem);
+}
+.sec-line { width: clamp(2.5rem, 8vw, 7rem); height: 1px; background: var(--dim); }
+.sec-num {
+  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
+  letter-spacing: 0.35em;
+  color: var(--dim);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.sec-title {
+  font-size: clamp(2.8rem, 8.5vw, 6.5rem);
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+  color: var(--fg);
+  margin-bottom: clamp(1rem, 2.5vw, 2rem);
+  max-width: 22ch;
+  margin-left: auto;
+  margin-right: auto;
+}
+.sec-title .accent { color: var(--accent); }
+.sec-tag {
+  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
+  color: var(--dim);
+  letter-spacing: 0.04em;
+  font-style: italic;
+}
+
+/* ActivityList */
+.activities {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(1.4rem, 3vw, 2.4rem);
+  max-width: min(900px, 90vw);
+}
+.activity {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: clamp(1.2rem, 3vw, 2.5rem);
+  align-items: baseline;
+  opacity: 0;
+  transform: translateX(-14px);
+  transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.activity.in, .activity.shown { opacity: 1; transform: translateX(0); }
+.activity .num {
+  font-size: clamp(0.85rem, 1.2vw, 1.1rem);
+  color: var(--dim);
+  letter-spacing: 0.25em;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  min-width: 2.5ch;
+  padding-top: 0.6em;
+}
+.activity .body { display: flex; flex-direction: column; gap: 0.35rem; }
+.activity .name {
+  font-size: clamp(1.8rem, 4.2vw, 3.6rem);
+  font-weight: 500;
+  letter-spacing: -0.025em;
+  line-height: 1.1;
+  color: var(--fg);
+}
+.activity .name .accent { color: var(--accent); }
+.activity .desc {
+  font-size: clamp(0.95rem, 1.35vw, 1.2rem);
+  color: var(--dim);
+  letter-spacing: 0.01em;
+}
+
+/* Compare */
+.compare {
+  display: grid;
+  grid-template-columns: 1fr 1px 1fr;
+  gap: 0;
+  width: min(1300px, 92vw);
+}
+.compare-col { padding: 0 clamp(2rem, 5vw, 5rem); }
+.compare-h {
+  font-size: 0.85rem;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: var(--dim);
+  margin-bottom: 2rem;
+}
+.compare-h.old::before { content: '◌  '; color: var(--dim); }
+.compare-h.new::before { content: '◉  '; color: var(--accent); }
+.compare-list {
+  list-style: none;
+  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
+  line-height: 2;
+  color: var(--fg);
+}
+.compare-list li {
+  padding-left: 1.4em;
+  position: relative;
+  opacity: 0;
+  transform: translateX(-8px);
+  transition: opacity 600ms, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.compare-list li.in, .compare-list li.shown { opacity: 1; transform: translateX(0); }
+.compare-list li::before {
+  content: '—';
+  position: absolute;
+  left: 0;
+  color: var(--dim);
+}
+.compare-list.strikethrough li {
+  text-decoration: line-through;
+  text-decoration-color: var(--dim-2);
+  color: var(--dim);
+}
+.compare-list.accent li::before { color: var(--accent); }
+.compare-divider {
+  background: linear-gradient(to bottom, transparent, var(--dim-2) 20%, var(--dim-2) 80%, transparent);
+}
+@media (max-width: 700px) {
+  .compare { grid-template-columns: 1fr; }
+  .compare-divider { display: none; }
+}
+
+/* Counter */
+.counter-wrap {
+  display: flex;
+  gap: clamp(2rem, 8vw, 8rem);
+  align-items: stretch;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.counter-block { text-align: left; }
+.counter-label {
+  font-size: 0.85rem;
+  letter-spacing: 0.3em;
+  text-transform: uppercase;
+  color: var(--dim);
+  margin-bottom: 0.8rem;
+}
+.counter-label .dot {
+  display: inline-block;
+  width: 7px; height: 7px;
+  margin-right: 0.7rem;
+  vertical-align: middle;
+}
+.counter-label.accent .dot { background: var(--accent); }
+.counter-label.amber .dot { background: var(--amber); }
+.counter-label.blue .dot { background: var(--blue); }
+.counter-label.red .dot { background: var(--red); }
+.counter-num {
+  font-size: clamp(3rem, 8vw, 7rem);
+  font-weight: 500;
+  letter-spacing: -0.04em;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  color: var(--fg);
+}
+.counter-num.accent { color: var(--accent); }
+.counter-num.amber { color: var(--amber); }
+.counter-num.blue { color: var(--blue); }
+.counter-num.red { color: var(--red); }
+.counter-foot {
+  margin-top: 4rem;
+  font-size: clamp(1rem, 1.4vw, 1.3rem);
+  color: var(--dim);
+  text-align: center;
+  opacity: 0;
+  transition: opacity 1500ms ease-out;
+}
+.counter-foot.visible, .counter-foot.shown { opacity: 1; }
+.counter-foot .accent { color: var(--accent); font-weight: 500; }
+
+/* ShiftArrow */
+.shift-line {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(1rem, 4vw, 3rem);
+  flex-wrap: wrap;
+}
+.shift-from, .shift-to {
+  font-size: clamp(1.4rem, 3.5vw, 3rem);
+  font-weight: 400;
+  letter-spacing: -0.02em;
+}
+.shift-from { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--dim-2); }
+.shift-to { color: var(--accent); }
+.shift-arrow {
+  font-size: clamp(1.4rem, 3.5vw, 3rem);
+  color: var(--accent);
+  font-weight: 300;
+}

package/themes/phosphor/manifest.json

@@ -0,0 +1,11 @@
+{
+  "name": "phosphor",
+  "displayName": "Phosphor",
+  "description": "Cinematic, technical, dark. JetBrains Mono on phosphor green.",
+  "fonts": [
+    "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap",
+    "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap"
+  ],
+  "stylesheets": ["tokens.css", "base.css", "components.css", "components-layout.css", "components-diagram.css", "components-chart.css", "components-content.css", "components-data.css", "transitions.css"],
+  "effects": "effects.js"
+}

package/themes/phosphor/tokens.css

@@ -0,0 +1,17 @@
+/* Stagecraft — Phosphor theme tokens */
+:root[data-theme="phosphor"] {
+  --bg: #0A0A0A;
+  --bg-elevated: #121212;
+  --fg: #E6E6E6;
+  --dim: #666666;
+  --dim-2: #2a2a2a;
+  --accent: #00FF9C;                              /* phosphor green */
+  --accent-soft: rgba(0, 255, 156, 0.12);
+  --accent-glow: rgba(0, 255, 156, 0.45);
+  --blue: #189EFF;                                /* alt accent */
+  --amber: #FFB454;
+  --red: #FF5C5C;
+  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --display: var(--mono);
+  --body: var(--mono);
+}