stagecraft 0.1.0

package/themes/shopware/components-chart.css

@@ -0,0 +1,121 @@
+/* Stagecraft — Shopware theme: chart/relationship component overrides. */
+@import url('../phosphor/components-chart.css');
+
+/* ============================================================
+ * Matrix2x2
+ * ============================================================ */
+:root[data-theme="shopware"] .matrix2x2 .grid {
+  background: var(--border-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+:root[data-theme="shopware"] .matrix2x2 .quadrant {
+  background: var(--bg);
+  filter: none;
+}
+:root[data-theme="shopware"] .matrix2x2 .quadrant.active {
+  background: color-mix(in srgb, var(--q-color, var(--accent)) 8%, var(--bg));
+  box-shadow: inset 0 0 0 1px var(--q-color, var(--accent));
+}
+:root[data-theme="shopware"] .matrix2x2 .quadrant .q-label { color: var(--dim); font-family: var(--display); }
+:root[data-theme="shopware"] .matrix2x2 .quadrant .q-body  { color: var(--fg); }
+:root[data-theme="shopware"] .matrix2x2 .quadrant .q-tag   { color: var(--dim); }
+:root[data-theme="shopware"] .matrix2x2 .x-axis .label,
+:root[data-theme="shopware"] .matrix2x2 .y-axis .label    { color: var(--dim); font-family: var(--display); }
+
+/* ============================================================
+ * BarChart — accent fill, no glow
+ * ============================================================ */
+:root[data-theme="shopware"] .barchart .bar-track {
+  background: var(--border-primary);
+  border-radius: var(--radius-pill);
+}
+:root[data-theme="shopware"] .barchart .bar-fill {
+  background: var(--accent);
+  box-shadow: none;
+  border-radius: var(--radius-pill);
+}
+:root[data-theme="shopware"] .barchart .bar-row.accent .bar-fill { background: var(--accent); }
+:root[data-theme="shopware"] .barchart .bar-row.blue   .bar-fill { background: var(--blue);   }
+:root[data-theme="shopware"] .barchart .bar-row.amber  .bar-fill { background: var(--amber);  }
+:root[data-theme="shopware"] .barchart .bar-row.red    .bar-fill { background: var(--red);    }
+:root[data-theme="shopware"] .barchart .bar-row.dim    .bar-fill { background: var(--dim);    }
+:root[data-theme="shopware"] .barchart .bar-label { color: var(--dim); font-family: var(--display); }
+:root[data-theme="shopware"] .barchart .bar-value { color: var(--fg); font-family: var(--display); font-weight: 600; }
+
+/* ============================================================
+ * Progress — accent fill, no glow
+ * ============================================================ */
+:root[data-theme="shopware"] .progress-track {
+  background: var(--border-primary);
+  border-radius: var(--radius-pill);
+}
+:root[data-theme="shopware"] .progress-fill {
+  background: var(--accent);
+  box-shadow: none;
+  border-radius: var(--radius-pill);
+}
+:root[data-theme="shopware"] .progress-row.accent .progress-fill { background: var(--accent); }
+:root[data-theme="shopware"] .progress-row.blue   .progress-fill { background: var(--blue);   }
+:root[data-theme="shopware"] .progress-row.amber  .progress-fill { background: var(--amber);  }
+:root[data-theme="shopware"] .progress-row.red    .progress-fill { background: var(--red);    }
+:root[data-theme="shopware"] .progress-label { color: var(--fg); font-family: var(--display); }
+:root[data-theme="shopware"] .progress-value { color: var(--dim); font-family: var(--display); font-weight: 600; }
+
+/* ============================================================
+ * ProcessFlow
+ * ============================================================ */
+:root[data-theme="shopware"] .processflow {
+  --pf-card-bg: var(--bg);
+  --pf-card-border: var(--border-primary);
+}
+:root[data-theme="shopware"] .processflow .pf-step {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .processflow .pf-step.accent { border-color: color-mix(in srgb, var(--accent) 40%, var(--border-primary)); }
+:root[data-theme="shopware"] .processflow .pf-step.amber  { border-color: color-mix(in srgb, var(--amber) 40%, var(--border-primary));  }
+:root[data-theme="shopware"] .processflow .pf-step.blue   { border-color: color-mix(in srgb, var(--blue) 40%, var(--border-primary));   }
+:root[data-theme="shopware"] .processflow .pf-step.red    { border-color: color-mix(in srgb, var(--red) 40%, var(--border-primary));    }
+:root[data-theme="shopware"] .processflow .pf-icon { color: var(--accent); }
+:root[data-theme="shopware"] .processflow .pf-step.accent .pf-icon { color: var(--accent); }
+:root[data-theme="shopware"] .processflow .pf-step.amber  .pf-icon { color: var(--amber);  }
+:root[data-theme="shopware"] .processflow .pf-step.blue   .pf-icon { color: var(--blue);   }
+:root[data-theme="shopware"] .processflow .pf-step.red    .pf-icon { color: var(--red);    }
+:root[data-theme="shopware"] .processflow .pf-label { color: var(--fg); font-family: var(--display); font-weight: 600; }
+:root[data-theme="shopware"] .processflow .pf-body  { color: var(--dim); }
+:root[data-theme="shopware"] .processflow .pf-arrow { color: var(--border-secondary); }
+:root[data-theme="shopware"] .processflow .pf-arrow.pulse {
+  animation: pf-pulse-shopware 900ms ease-out;
+  color: var(--accent);
+}
+@keyframes pf-pulse-shopware {
+  0%   { transform: scale(1); }
+  40%  { transform: scale(1.18); }
+  100% { transform: scale(1); }
+}
+
+/* ============================================================
+ * Venn — gentle fill opacities, white-backed labels
+ * ============================================================ */
+:root[data-theme="shopware"] .venn .v-circle {
+  fill-opacity: 0.16;
+  stroke-width: 1.5;
+}
+:root[data-theme="shopware"] .venn .v-label.set .name {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  color: var(--fg);
+  font-family: var(--display);
+}
+:root[data-theme="shopware"] .venn .v-label.overlap > span {
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  color: var(--fg);
+  font-family: var(--display);
+}

package/themes/shopware/components-content.css

@@ -0,0 +1,169 @@
+/* Stagecraft — Shopware theme: content/typography component overrides. */
+@import url('../phosphor/components-content.css');
+
+/* ---------------------------------------------------------------------------
+ * Statement — emphasized words pop in brand, no text glow
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .statement-text {
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  color: var(--fg);
+}
+:root[data-theme="shopware"] .statement .st-em {
+  color: var(--accent);
+  text-shadow: none;
+}
+:root[data-theme="shopware"] .statement .st-em--amber { color: var(--amber); text-shadow: none; }
+:root[data-theme="shopware"] .statement .st-em--blue  { color: var(--blue);  text-shadow: none; }
+
+/* ---------------------------------------------------------------------------
+ * QandA
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .qa-q {
+  color: var(--dim);
+  font-family: var(--display);
+  font-style: normal;
+  font-weight: 500;
+}
+:root[data-theme="shopware"] .qa-q::before { color: var(--border-secondary); }
+:root[data-theme="shopware"] .qa-a {
+  color: var(--accent);
+  text-shadow: none;
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+:root[data-theme="shopware"] .qa-attr { color: var(--dim); font-family: var(--display); }
+
+/* ---------------------------------------------------------------------------
+ * Manifesto
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .mf-intro {
+  color: var(--dim);
+  font-family: var(--display);
+}
+:root[data-theme="shopware"] .mf-num {
+  color: var(--accent);
+  text-shadow: none;
+  font-family: var(--display);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+:root[data-theme="shopware"] .mf-item {
+  border-bottom: 1px solid var(--border-primary);
+}
+:root[data-theme="shopware"] .mf-item.in { border-color: var(--border-primary); }
+:root[data-theme="shopware"] .mf-text {
+  color: var(--fg);
+  font-family: var(--display);
+}
+:root[data-theme="shopware"] .mf-text .mf-em { color: var(--accent); }
+
+/* ---------------------------------------------------------------------------
+ * Punchline
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .pl-line {
+  color: var(--dim);
+  font-family: var(--display);
+}
+:root[data-theme="shopware"] .pl-payoff {
+  color: var(--accent);
+  text-shadow: none;
+  font-family: var(--display);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+/* ---------------------------------------------------------------------------
+ * Definition
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .df-term {
+  color: var(--fg);
+  font-family: var(--display);
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+:root[data-theme="shopware"] .df-pos {
+  color: var(--dim);
+  font-family: var(--display);
+  font-style: italic;
+}
+:root[data-theme="shopware"] .df-def {
+  color: var(--fg);
+  font-family: var(--display);
+}
+:root[data-theme="shopware"] .df-def::before { color: var(--accent); }
+:root[data-theme="shopware"] .df-ety { color: var(--dim); font-family: var(--display); }
+:root[data-theme="shopware"] .df-ex  { color: var(--dim); font-family: var(--display); }
+:root[data-theme="shopware"] .df-mark {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-radius: var(--radius-sm);
+  padding: 0 0.2em;
+}
+
+/* ---------------------------------------------------------------------------
+ * ImageGrid
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .ig-frame {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .ig-frame::after {
+  box-shadow:
+    inset 0 0 0 1px rgba(0, 0, 0, 0.04),
+    var(--shadow-md);
+}
+:root[data-theme="shopware"] .ig-img { filter: none; }
+:root[data-theme="shopware"] .ig-cap { color: var(--dim); font-family: var(--display); }
+
+/* ---------------------------------------------------------------------------
+ * Spotlight — focused card pops with --shadow-brand
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .sp-focus {
+  background: var(--bg);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-brand);
+}
+:root[data-theme="shopware"] .sp-icon {
+  color: var(--accent);
+  text-shadow: none;
+}
+:root[data-theme="shopware"] .sp-heading {
+  color: var(--accent);
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+:root[data-theme="shopware"] .sp-body { color: var(--fg); }
+:root[data-theme="shopware"] .sp-ctx-item {
+  color: var(--dim);
+  font-family: var(--display);
+}
+:root[data-theme="shopware"] .sp-ctx-item:hover { color: var(--fg); }
+
+/* ---------------------------------------------------------------------------
+ * Marquee — calm brand-accent row
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .marquee {
+  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,1) 6%, rgba(0,0,0,1) 94%, transparent 100%);
+}
+:root[data-theme="shopware"] .mq-item {
+  color: var(--fg);
+  font-family: var(--display);
+  font-weight: 500;
+}
+:root[data-theme="shopware"] .mq-track--b .mq-item {
+  color: var(--accent);
+  text-shadow: none;
+  font-family: var(--display);
+  font-weight: 600;
+  font-style: normal;
+}
+:root[data-theme="shopware"] .mq-sep { color: var(--border-secondary); }

package/themes/shopware/components-data.css

@@ -0,0 +1,219 @@
+/* Stagecraft — Shopware theme: data-visualization component overrides. */
+@import url('../phosphor/components-data.css');
+
+/* ============================================================
+ * KPI — white card, subtle shadow, brand-tinted active border
+ * ============================================================ */
+:root[data-theme="shopware"] .kpi {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
+    border-color 200ms ease, box-shadow 200ms ease;
+}
+:root[data-theme="shopware"] .kpi:hover {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-md);
+}
+:root[data-theme="shopware"] .kpi.in {
+  border-color: color-mix(in srgb, var(--data-color) 45%, var(--border-primary));
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .kpi-icon  { color: var(--data-color, var(--accent)); }
+:root[data-theme="shopware"] .kpi-label { color: var(--dim); font-family: var(--display); }
+:root[data-theme="shopware"] .kpi-num {
+  color: var(--data-color, var(--fg));
+  text-shadow: none;
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: -0.03em;
+}
+:root[data-theme="shopware"] .kpi-unit { color: var(--dim); }
+:root[data-theme="shopware"] .kpi-change.up .kpi-arrow,
+:root[data-theme="shopware"] .kpi-change.up .kpi-change-num   { color: var(--green); }
+:root[data-theme="shopware"] .kpi-change.down .kpi-arrow,
+:root[data-theme="shopware"] .kpi-change.down .kpi-change-num { color: var(--red); }
+:root[data-theme="shopware"] .kpi-change .kpi-change-period   { color: var(--dim); }
+
+/* ============================================================
+ * DonutChart
+ * ============================================================ */
+:root[data-theme="shopware"] .donut-arc { filter: none; }
+:root[data-theme="shopware"] .donut-dot { box-shadow: none; }
+:root[data-theme="shopware"] .donut-center { color: var(--fg); font-family: var(--display); font-weight: 600; }
+:root[data-theme="shopware"] .donut-leg-label { color: var(--fg); font-family: var(--display); }
+:root[data-theme="shopware"] .donut-leg-value { color: var(--dim); font-family: var(--display); }
+:root[data-theme="shopware"] .donut-leg-pct   { color: var(--accent); font-family: var(--display); font-weight: 600; }
+
+/* ============================================================
+ * LineChart
+ * ============================================================ */
+:root[data-theme="shopware"] .lc-grid {
+  stroke: var(--border-primary);
+  opacity: 1;
+}
+:root[data-theme="shopware"] .lc-y-label,
+:root[data-theme="shopware"] .lc-x-label {
+  font-family: var(--display);
+  color: var(--dim);
+}
+:root[data-theme="shopware"] .lc-line   { filter: none; }
+:root[data-theme="shopware"] .lc-dot    { filter: none; }
+:root[data-theme="shopware"] .lc-dot-leg { box-shadow: none; }
+:root[data-theme="shopware"] .lc-leg-row { color: var(--fg); font-family: var(--display); }
+
+/* ============================================================
+ * Gauge
+ * ============================================================ */
+:root[data-theme="shopware"] .g-fill { filter: none; }
+:root[data-theme="shopware"] .g-tick {
+  stroke: var(--border-secondary);
+  opacity: 0.8;
+}
+:root[data-theme="shopware"] .g-num {
+  text-shadow: none;
+  font-family: var(--display);
+  font-weight: 600;
+  color: var(--data-color, var(--fg));
+}
+:root[data-theme="shopware"] .g-num-max { color: var(--dim); font-family: var(--display); }
+:root[data-theme="shopware"] .g-label   { color: var(--dim); font-family: var(--display); }
+
+/* ============================================================
+ * SparkLine — white card, brand line
+ * ============================================================ */
+:root[data-theme="shopware"] .sparkline {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .sl-num {
+  text-shadow: none;
+  font-family: var(--display);
+  font-weight: 600;
+  color: var(--data-color, var(--fg));
+}
+:root[data-theme="shopware"] .sl-label  { color: var(--dim); font-family: var(--display); }
+:root[data-theme="shopware"] .sl-line   { filter: none; }
+:root[data-theme="shopware"] .sl-period { color: var(--dim); font-family: var(--display); }
+
+/* ============================================================
+ * Heatmap — accent shades on light bg.
+ * --hm-base resolves to var(--accent) by default; track is border-primary.
+ * ============================================================ */
+:root[data-theme="shopware"] .heatmap {
+  --hm-base: var(--accent);
+}
+:root[data-theme="shopware"] .hm-cell {
+  background: color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 85%), var(--border-primary));
+  border: 1px solid color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 30%), var(--border-primary));
+  border-radius: var(--radius-sm);
+}
+:root[data-theme="shopware"] .hm-scale-step {
+  background: color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 85%), var(--border-primary));
+  border: 1px solid color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 30%), var(--border-primary));
+  border-radius: var(--radius-sm);
+}
+:root[data-theme="shopware"] .hm-x-label,
+:root[data-theme="shopware"] .hm-y-label,
+:root[data-theme="shopware"] .hm-scale-label { color: var(--dim); font-family: var(--display); }
+
+/* ============================================================
+ * Roadmap
+ * ============================================================ */
+:root[data-theme="shopware"] .rm-month       { color: var(--dim); font-family: var(--display); }
+:root[data-theme="shopware"] .rm-lane-label  { color: var(--fg); font-family: var(--display); font-weight: 600; }
+:root[data-theme="shopware"] .rm-lane-track {
+  background:
+    repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent calc((100% / var(--rm-cols, 12)) - 1px),
+      var(--border-primary) calc((100% / var(--rm-cols, 12)) - 1px),
+      var(--border-primary) calc(100% / var(--rm-cols, 12))
+    ),
+    var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+}
+:root[data-theme="shopware"] .rm-bar {
+  background: color-mix(in srgb, var(--rm-bar-color) 16%, var(--bg));
+  border: 1px solid color-mix(in srgb, var(--rm-bar-color) 60%, var(--border-primary));
+  box-shadow: inset 3px 0 0 var(--rm-bar-color);
+  border-radius: var(--radius-sm);
+}
+:root[data-theme="shopware"] .rm-bar-label { color: var(--fg); font-family: var(--display); }
+
+/* ============================================================
+ * SWOT — soft tints, no glow letter
+ * ============================================================ */
+:root[data-theme="shopware"] .swot {
+  background: var(--border-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+:root[data-theme="shopware"] .swot-cell { background: var(--bg); }
+:root[data-theme="shopware"] .swot-cell.in {
+  background: color-mix(in srgb, var(--swot-color) 6%, var(--bg));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--swot-color) 55%, var(--border-primary));
+}
+:root[data-theme="shopware"] .swot-letter {
+  text-shadow: none;
+  color: var(--swot-color, var(--accent));
+  font-family: var(--display);
+  font-weight: 600;
+}
+:root[data-theme="shopware"] .swot-title { color: var(--fg); font-family: var(--display); font-weight: 600; }
+
+/* ============================================================
+ * CodeBlock — monospaced; file-header tab on elevated grey
+ * ============================================================ */
+:root[data-theme="shopware"] .codeblock {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  font-family: var(--mono);
+}
+:root[data-theme="shopware"] .cb-head {
+  background: var(--bg-elevated);
+  border-bottom: 1px solid var(--border-primary);
+  color: var(--dim);
+  font-family: var(--mono);
+}
+:root[data-theme="shopware"] .cb-line--highlight {
+  background: var(--accent-soft);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+
+/* ============================================================
+ * CodeDiff — monospaced; soft semantic line backgrounds
+ * ============================================================ */
+:root[data-theme="shopware"] .codediff {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  font-family: var(--mono);
+}
+:root[data-theme="shopware"] .cd-head {
+  background: var(--bg-elevated);
+  border-bottom: 1px solid var(--border-primary);
+  color: var(--dim);
+  font-family: var(--mono);
+}
+:root[data-theme="shopware"] .cd-line--add {
+  background: var(--green-soft);
+}
+:root[data-theme="shopware"] .cd-line--add .cd-text {
+  color: color-mix(in srgb, var(--green) 50%, var(--fg));
+}
+:root[data-theme="shopware"] .cd-line--remove {
+  background: var(--red-soft);
+}
+:root[data-theme="shopware"] .cd-line--remove .cd-text {
+  color: color-mix(in srgb, var(--red) 45%, var(--fg));
+}

package/themes/shopware/components-diagram.css

@@ -0,0 +1,129 @@
+/* Stagecraft — Shopware theme: diagram component overrides. */
+@import url('../phosphor/components-diagram.css');
+
+/* ===========================================================================
+ * Pillars — icons in brand, white tile with subtle hover lift
+ * ===========================================================================*/
+:root[data-theme="shopware"] .pillars-intro {
+  font-family: var(--display);
+  color: var(--dim);
+}
+:root[data-theme="shopware"] .pillar {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
+    border-color 200ms ease, box-shadow 200ms ease;
+}
+:root[data-theme="shopware"] .pillar:hover {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+:root[data-theme="shopware"] .pillar:hover .pillar-icon {
+  animation: none;
+  filter: none;
+}
+:root[data-theme="shopware"] .pillar-icon { color: var(--accent); }
+:root[data-theme="shopware"] .pillar.pc-accent .pillar-icon { color: var(--accent); }
+:root[data-theme="shopware"] .pillar.pc-blue   .pillar-icon { color: var(--blue);   }
+:root[data-theme="shopware"] .pillar.pc-amber  .pillar-icon { color: var(--amber);  }
+:root[data-theme="shopware"] .pillar.pc-red    .pillar-icon { color: var(--red);    }
+:root[data-theme="shopware"] .pillar.pc-dim    .pillar-icon { color: var(--dim);    }
+:root[data-theme="shopware"] .pillar.pc-fg     .pillar-icon { color: var(--fg);     }
+:root[data-theme="shopware"] .pillar-heading {
+  color: var(--fg);
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: -0.015em;
+}
+:root[data-theme="shopware"] .pillar-body { color: var(--dim); }
+
+/* ===========================================================================
+ * Timeline
+ * ===========================================================================*/
+:root[data-theme="shopware"] .tl-dot {
+  background: var(--bg);
+  border: 1px solid var(--border-secondary);
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .tl-event.active .tl-dot {
+  background: var(--accent);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 4px var(--accent-soft);
+}
+:root[data-theme="shopware"] .tl-event.tc-accent.active .tl-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
+:root[data-theme="shopware"] .tl-event.tc-blue.active   .tl-dot { background: var(--blue);   border-color: var(--blue);   box-shadow: 0 0 0 4px var(--blue-soft); }
+:root[data-theme="shopware"] .tl-event.tc-amber.active  .tl-dot { background: var(--amber);  border-color: var(--amber);  box-shadow: 0 0 0 4px var(--amber-soft); }
+:root[data-theme="shopware"] .tl-event.tc-red.active    .tl-dot { background: var(--red);    border-color: var(--red);    box-shadow: 0 0 0 4px var(--red-soft); }
+:root[data-theme="shopware"] .tl-icon { color: #ffffff; }
+:root[data-theme="shopware"] .tl-event:not(.active) .tl-icon { color: var(--dim); }
+:root[data-theme="shopware"] .tl-date { color: var(--dim); font-family: var(--display); }
+:root[data-theme="shopware"] .tl-heading { color: var(--fg); font-family: var(--display); font-weight: 600; }
+:root[data-theme="shopware"] .tl-body { color: var(--dim); }
+:root[data-theme="shopware"] .timeline-track { background: var(--border-primary); }
+
+/* ===========================================================================
+ * Pyramid — tinted layers, brand border on active
+ * ===========================================================================*/
+:root[data-theme="shopware"] .pyr-shape {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .pyr-layer.pyc-accent .pyr-shape { background: var(--accent-soft); border-color: var(--accent); }
+:root[data-theme="shopware"] .pyr-layer.pyc-accent .pyr-label { color: var(--accent); }
+:root[data-theme="shopware"] .pyr-layer.pyc-blue   .pyr-shape { background: var(--blue-soft);   border-color: var(--blue);   }
+:root[data-theme="shopware"] .pyr-layer.pyc-blue   .pyr-label { color: var(--blue); }
+:root[data-theme="shopware"] .pyr-layer.pyc-amber  .pyr-shape { background: var(--amber-soft);  border-color: var(--amber);  }
+:root[data-theme="shopware"] .pyr-layer.pyc-amber  .pyr-label { color: var(--amber); }
+:root[data-theme="shopware"] .pyr-layer.pyc-red    .pyr-shape { background: var(--red-soft);    border-color: var(--red);    }
+:root[data-theme="shopware"] .pyr-layer.pyc-red    .pyr-label { color: var(--red); }
+:root[data-theme="shopware"] .pyr-layer.pyc-dim    .pyr-shape { background: var(--bg-elevated); border-color: var(--border-secondary); }
+:root[data-theme="shopware"] .pyr-layer.pyc-dim    .pyr-label { color: var(--dim); }
+:root[data-theme="shopware"] .pyr-label { font-family: var(--display); font-weight: 600; }
+:root[data-theme="shopware"] .pyr-body  { color: var(--dim); }
+
+/* ===========================================================================
+ * Cycle — clean ring + white circle items with colored borders
+ * ===========================================================================*/
+:root[data-theme="shopware"] .cyc-ring {
+  stroke: var(--border-primary);
+  opacity: 1;
+}
+:root[data-theme="shopware"] .cyc-arc {
+  stroke: var(--accent);
+  opacity: 0;
+}
+:root[data-theme="shopware"] .cyc-arc.in { opacity: 0.9; }
+:root[data-theme="shopware"] .cyc-arrow { color: var(--accent); }
+:root[data-theme="shopware"] .cyc-item {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .cyc-item.cyc-accent { border-color: var(--accent); }
+:root[data-theme="shopware"] .cyc-item.cyc-accent .cyc-icon { color: var(--accent); }
+:root[data-theme="shopware"] .cyc-item.cyc-blue   { border-color: var(--blue); }
+:root[data-theme="shopware"] .cyc-item.cyc-blue   .cyc-icon { color: var(--blue); }
+:root[data-theme="shopware"] .cyc-item.cyc-amber  { border-color: var(--amber); }
+:root[data-theme="shopware"] .cyc-item.cyc-amber  .cyc-icon { color: var(--amber); }
+:root[data-theme="shopware"] .cyc-item.cyc-red    { border-color: var(--red); }
+:root[data-theme="shopware"] .cyc-item.cyc-red    .cyc-icon { color: var(--red); }
+:root[data-theme="shopware"] .cyc-label { color: var(--fg); font-family: var(--display); font-weight: 500; }
+
+/* ===========================================================================
+ * Funnel — soft tinted stages
+ * ===========================================================================*/
+:root[data-theme="shopware"] .fn-shape {
+  background: var(--bg);
+  border-top: 1px solid var(--border-primary);
+  border-bottom: 1px solid var(--border-primary);
+}
+:root[data-theme="shopware"] .fn-stage.fnc-accent .fn-shape { background: var(--accent-soft); border-color: var(--accent); }
+:root[data-theme="shopware"] .fn-stage.fnc-blue   .fn-shape { background: var(--blue-soft);   border-color: var(--blue);   }
+:root[data-theme="shopware"] .fn-stage.fnc-amber  .fn-shape { background: var(--amber-soft);  border-color: var(--amber);  }
+:root[data-theme="shopware"] .fn-stage.fnc-red    .fn-shape { background: var(--red-soft);    border-color: var(--red);    }
+:root[data-theme="shopware"] .fn-stage.fnc-dim    .fn-shape { background: var(--bg-elevated); border-color: var(--border-secondary); }