stagecraft 0.1.0

package/themes/phosphor/transitions.css

@@ -0,0 +1,213 @@
+/* Stagecraft — Phosphor theme: transitions library
+ *
+ * The animations apply to anything carrying the tx-<name>-enter / tx-<name>-exit
+ * class, not just .slide elements — so previews in the edit-mode picker share
+ * the exact same motion as the real thing.
+ */
+
+/* fade */
+.tx-fade-enter { animation: tx-fade-enter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+.tx-fade-exit  { animation: tx-fade-exit 400ms ease-in both; }
+@keyframes tx-fade-enter {
+  from { opacity: 0; transform: scale(0.985); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes tx-fade-exit {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(1.01); }
+}
+
+/* slide */
+.tx-slide-enter { animation: tx-slide-enter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+.tx-slide-exit  { animation: tx-slide-exit 500ms ease-in both; }
+@keyframes tx-slide-enter {
+  from { opacity: 0; transform: translateX(60px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes tx-slide-exit {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(-60px); }
+}
+
+/* dissolve */
+.tx-dissolve-enter { animation: tx-dissolve-enter 1200ms ease-out both; }
+.tx-dissolve-exit  { animation: tx-dissolve-exit 1000ms ease-in both; }
+@keyframes tx-dissolve-enter {
+  from { opacity: 0; filter: blur(8px); }
+  to   { opacity: 1; filter: blur(0); }
+}
+@keyframes tx-dissolve-exit {
+  from { opacity: 1; filter: blur(0); }
+  to   { opacity: 0; filter: blur(8px); }
+}
+
+/* glitch — phosphor flavor */
+.tx-glitch-enter { animation: tx-glitch-enter 600ms steps(8, end) both; }
+@keyframes tx-glitch-enter {
+  0%   { opacity: 0;   transform: translateX(0);  filter: hue-rotate(0deg); }
+  20%  { opacity: 0.6; transform: translateX(-3px); filter: hue-rotate(30deg) contrast(1.3); }
+  40%  { opacity: 0.4; transform: translateX(4px);  filter: hue-rotate(-20deg); }
+  60%  { opacity: 0.8; transform: translateX(-1px); }
+  100% { opacity: 1;   transform: translateX(0);  filter: none; }
+}
+.tx-glitch-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 50;
+  background:
+    repeating-linear-gradient(
+      0deg,
+      rgba(0, 255, 156, 0.04) 0,
+      rgba(0, 255, 156, 0.04) 1px,
+      transparent 1px,
+      transparent 4px
+    );
+  mix-blend-mode: screen;
+  animation: tx-glitch-overlay 600ms steps(6, end) both;
+}
+@keyframes tx-glitch-overlay {
+  0%   { opacity: 0.9; }
+  50%  { opacity: 0.5; transform: translateX(3px); }
+  100% { opacity: 0;   transform: translateX(0); }
+}
+
+/* wipe — masked reveal left-to-right */
+.tx-wipe-enter {
+  animation: tx-wipe-enter 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  clip-path: inset(0 100% 0 0);
+}
+@keyframes tx-wipe-enter {
+  from { opacity: 1; clip-path: inset(0 100% 0 0); }
+  to   { opacity: 1; clip-path: inset(0 0%   0 0); }
+}
+.tx-wipe-exit { animation: tx-wipe-exit 500ms ease-in both; }
+@keyframes tx-wipe-exit {
+  from { opacity: 1; clip-path: inset(0 0%   0 0); }
+  to   { opacity: 1; clip-path: inset(0 0   0 100%); }
+}
+
+/* cut — picker-preview only. The real cut in the deck is instant (no class
+ * is added on enter, see src/transitions.js). This animation is just so the
+ * picker preview can demonstrate what cut means: 0% opacity for the first
+ * half of the hover, then a hard snap to 100% — no easing, no fade. */
+.tx-cut-enter {
+  animation: tx-cut-enter 600ms steps(2, jump-none) both;
+}
+@keyframes tx-cut-enter {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* ============================================================================
+ * Phase 2 transitions
+ * ============================================================================ */
+
+/* zoom-in: scales up from small while fading in */
+.tx-zoom-in-enter { animation: tx-zoom-in-enter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+.tx-zoom-in-exit  { animation: tx-zoom-in-exit  400ms ease-in both; }
+@keyframes tx-zoom-in-enter {
+  from { opacity: 0; transform: scale(0.6); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes tx-zoom-in-exit {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(1.4); }
+}
+
+/* zoom-out: opposite — starts large and shrinks in */
+.tx-zoom-out-enter { animation: tx-zoom-out-enter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+.tx-zoom-out-exit  { animation: tx-zoom-out-exit  400ms ease-in both; }
+@keyframes tx-zoom-out-enter {
+  from { opacity: 0; transform: scale(1.4); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes tx-zoom-out-exit {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.6); }
+}
+
+/* flip: 3D Y-axis rotation */
+.tx-flip-enter {
+  animation: tx-flip-enter 900ms cubic-bezier(0.45, 0, 0.55, 1) both;
+  transform-style: preserve-3d;
+  perspective: 1200px;
+}
+.tx-flip-exit { animation: tx-flip-exit 500ms ease-in both; }
+@keyframes tx-flip-enter {
+  from { opacity: 0; transform: perspective(1200px) rotateY(-90deg); }
+  60%  { opacity: 1; }
+  to   { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
+}
+@keyframes tx-flip-exit {
+  from { opacity: 1; transform: perspective(1200px) rotateY(0deg); }
+  to   { opacity: 0; transform: perspective(1200px) rotateY(90deg); }
+}
+
+/* iris: circular reveal from center */
+.tx-iris-enter {
+  animation: tx-iris-enter 900ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+.tx-iris-exit { animation: tx-iris-exit 500ms ease-in both; }
+@keyframes tx-iris-enter {
+  from { opacity: 1; clip-path: circle(0% at 50% 50%); }
+  to   { opacity: 1; clip-path: circle(80% at 50% 50%); }
+}
+@keyframes tx-iris-exit {
+  from { opacity: 1; clip-path: circle(80% at 50% 50%); }
+  to   { opacity: 1; clip-path: circle(0% at 50% 50%); }
+}
+
+/* shutter: horizontal bands close → open */
+.tx-shutter-enter {
+  animation: tx-shutter-enter 800ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+@keyframes tx-shutter-enter {
+  0%   { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 8%, 0 8%, 0 17%, 100% 17%, 100% 25%, 0 25%, 0 34%, 100% 34%, 100% 42%, 0 42%, 0 50%, 100% 50%, 100% 58%, 0 58%, 0 66%, 100% 66%, 100% 75%, 0 75%, 0 83%, 100% 83%, 100% 92%, 0 92%); }
+  100% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
+}
+.tx-shutter-exit { animation: tx-fade-exit 500ms ease-in both; }
+
+/* push: pushes in horizontally, like slide but stronger */
+.tx-push-enter { animation: tx-push-enter 800ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+.tx-push-exit  { animation: tx-push-exit  800ms cubic-bezier(0.7, 0, 0.84, 0) both; }
+@keyframes tx-push-enter {
+  from { opacity: 1; transform: translateX(100%); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes tx-push-exit {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 1; transform: translateX(-100%); }
+}
+
+/* typewriter: wide → narrow reveal, like a CRT power-on */
+.tx-typewriter-enter {
+  animation: tx-typewriter-enter 900ms cubic-bezier(0.4, 0, 0.2, 1) both;
+  transform-origin: center;
+}
+@keyframes tx-typewriter-enter {
+  0%   { opacity: 0; transform: scaleX(0); }
+  40%  { opacity: 1; transform: scaleX(1); transform-origin: center; }
+  100% { opacity: 1; transform: scaleX(1); }
+}
+.tx-typewriter-exit {
+  animation: tx-typewriter-exit 300ms ease-in both;
+}
+@keyframes tx-typewriter-exit {
+  from { opacity: 1; transform: scaleY(1); }
+  to   { opacity: 0; transform: scaleY(0); }
+}
+
+/* shatter: many tiny grid-shifts then resolve */
+.tx-shatter-enter {
+  animation: tx-shatter-enter 900ms steps(10, jump-end) both;
+  filter: contrast(1) blur(0);
+}
+@keyframes tx-shatter-enter {
+  0%   { opacity: 0; filter: blur(20px) saturate(0.2); transform: translate(-4px, 2px) skew(2deg); }
+  20%  { opacity: 0.4; filter: blur(8px) saturate(0.4); transform: translate(3px, -1px) skew(-1deg); }
+  40%  { opacity: 0.7; filter: blur(3px); transform: translate(-1px, 1px); }
+  60%  { opacity: 0.9; filter: blur(1px); transform: translate(1px, 0); }
+  100% { opacity: 1; filter: none; transform: none; }
+}
+.tx-shatter-exit { animation: tx-fade-exit 500ms ease-in both; }

package/themes/shopware/base.css

@@ -0,0 +1,94 @@
+/* Shopware theme — base styles
+ * Imports phosphor's base for the engine chrome and overrides what doesn't
+ * fit a clean, light, product-marketing aesthetic.
+ */
+
+@import url('../phosphor/base.css');
+
+/* No glow on caret; subtle brand accent on the cursor */
+:root[data-theme="shopware"] .caret {
+  background: var(--accent);
+  box-shadow: none;
+  animation-timing-function: steps(2, end);
+}
+
+/* Pre-label dot: solid brand without animation pulse */
+:root[data-theme="shopware"] .pre-label .dot { animation: none; }
+:root[data-theme="shopware"] .pre-label { color: var(--dim); }
+
+/* UI chrome — Inter throughout, brand-colored counter */
+:root[data-theme="shopware"] .ui { font-family: var(--display); }
+:root[data-theme="shopware"] .ui-counter { color: var(--fg); font-weight: 500; }
+:root[data-theme="shopware"] .ui-counter .slash,
+:root[data-theme="shopware"] .ui-counter .total { color: var(--dim); }
+
+/* Storyboard dot indicators — flat */
+:root[data-theme="shopware"] .ui-dots .dot {
+  background: var(--border-secondary);
+}
+:root[data-theme="shopware"] .ui-dots .dot.active {
+  background: var(--accent);
+  box-shadow: none;
+}
+:root[data-theme="shopware"] .ui-dots .dot.past { background: var(--dim); }
+
+/* Welcome */
+:root[data-theme="shopware"] .welcome { background: var(--bg); }
+:root[data-theme="shopware"] .welcome .key-prompt { color: var(--dim); }
+:root[data-theme="shopware"] .welcome h1 { color: var(--fg); font-weight: 500; }
+:root[data-theme="shopware"] .welcome .by { color: var(--dim); }
+
+/* Storyboard tiles — white surface with subtle brand glow on active */
+:root[data-theme="shopware"] .overview { background: var(--bg-elevated); }
+:root[data-theme="shopware"] .overview-header {
+  background: rgba(250, 251, 254, 0.95);
+  border-bottom: 1px solid var(--border-primary);
+  color: var(--dim);
+}
+:root[data-theme="shopware"] .overview-header .left strong { color: var(--fg); }
+:root[data-theme="shopware"] .tile {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+:root[data-theme="shopware"] .tile:hover {
+  border-color: var(--accent);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+:root[data-theme="shopware"] .tile.current {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-brand);
+}
+:root[data-theme="shopware"] .tile-num {
+  background: rgba(255, 255, 255, 0.92);
+  color: var(--dim);
+  font-family: var(--display);
+}
+:root[data-theme="shopware"] .tile.current .tile-num { color: var(--accent); }
+:root[data-theme="shopware"] .tile-label {
+  background: linear-gradient(to top, rgba(255, 255, 255, 0.96) 40%, rgba(255, 255, 255, 0));
+  color: var(--fg);
+  font-family: var(--display);
+}
+
+/* Edit-mode ring — soft brand glow on light bg */
+:root[data-theme="shopware"] body.edit-mode #stage::after {
+  border-color: var(--accent);
+  box-shadow: inset 0 0 30px var(--accent-soft);
+  opacity: 0.35;
+}
+
+/* Hero / display typography — Inter, tighter tracking for a product feel */
+:root[data-theme="shopware"] .hero,
+:root[data-theme="shopware"] .hero-xl {
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+/* Material icons size token */
+:root[data-theme="shopware"] .material-symbols-outlined {
+  font-variation-settings: 'opsz' 24, 'wght' 400, 'FILL' 0, 'GRAD' 0;
+}

package/themes/shopware/components-business.css

@@ -0,0 +1,344 @@
+/* Stagecraft — Shopware theme: business / marketing component overrides. */
+@import url('../phosphor/components-business.css');
+
+/* ---------------------------------------------------------------------------
+ * Pricing — white tiers, featured pops with --shadow-brand
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .pricing-tier {
+  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"] .pricing-tier:hover {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-md);
+}
+:root[data-theme="shopware"] .pricing-tier--featured {
+  border: 2px solid var(--accent);
+  box-shadow: var(--shadow-brand);
+  transform: scale(1.02);
+}
+:root[data-theme="shopware"] .pricing-tier--featured.in {
+  transform: translateY(0) scale(1.02);
+}
+:root[data-theme="shopware"] .pricing-badge {
+  background: var(--accent);
+  color: #ffffff;
+  box-shadow: none;
+  border-radius: var(--radius-pill);
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+:root[data-theme="shopware"] .pricing-name {
+  color: var(--fg);
+  font-family: var(--display);
+  font-weight: 600;
+}
+:root[data-theme="shopware"] .pricing-tier--featured .pricing-name { color: var(--accent); }
+:root[data-theme="shopware"] .pricing-price {
+  color: var(--fg);
+  font-family: var(--display);
+  font-weight: 600;
+  text-shadow: none;
+}
+:root[data-theme="shopware"] .pricing-tier--featured .pricing-price {
+  color: var(--accent);
+  text-shadow: none;
+}
+:root[data-theme="shopware"] .pricing-period   { color: var(--dim); }
+:root[data-theme="shopware"] .pricing-feature  { color: var(--fg); }
+:root[data-theme="shopware"] .pricing-check    { color: var(--accent); }
+:root[data-theme="shopware"] .pricing-cta {
+  background: transparent;
+  border: 1px solid var(--accent);
+  color: var(--accent);
+  border-radius: var(--radius-pill);
+  font-family: var(--display);
+  font-weight: 600;
+}
+:root[data-theme="shopware"] .pricing-tier--featured .pricing-cta {
+  background: var(--accent);
+  color: #ffffff;
+  border-color: var(--accent);
+}
+
+/* ---------------------------------------------------------------------------
+ * Testimonial — sans, brand quote mark
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .testimonial-photo-wrap {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: 999px;
+  box-shadow: var(--shadow-md);
+}
+:root[data-theme="shopware"] .testimonial-mark {
+  color: var(--accent);
+  text-shadow: none;
+  font-family: var(--display);
+  font-weight: 600;
+}
+:root[data-theme="shopware"] .testimonial-quote {
+  font-family: var(--display);
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: -0.015em;
+  color: var(--fg);
+}
+:root[data-theme="shopware"] .testimonial-author { color: var(--fg); font-family: var(--display); font-weight: 600; }
+:root[data-theme="shopware"] .testimonial-affil  { color: var(--dim); }
+:root[data-theme="shopware"] .testimonial-sep    { color: var(--border-primary); }
+
+/* ---------------------------------------------------------------------------
+ * TeamGrid — white card, photo on elevated grey
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .team-card {
+  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"] .team-card:hover {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-md);
+}
+:root[data-theme="shopware"] .team-photo-wrap {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-primary);
+}
+:root[data-theme="shopware"] .team-name { color: var(--fg); font-family: var(--display); font-weight: 600; }
+:root[data-theme="shopware"] .team-role { color: var(--accent); font-family: var(--display); font-weight: 500; }
+:root[data-theme="shopware"] .team-bio  { color: var(--dim); }
+:root[data-theme="shopware"] .team-social-icon { color: var(--dim); }
+:root[data-theme="shopware"] .team-social-icon:hover { color: var(--accent); }
+
+/* ---------------------------------------------------------------------------
+ * Agenda
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .agenda-rail { background: var(--border-primary); }
+:root[data-theme="shopware"] .agenda-dot {
+  background: var(--bg);
+  border: 2px solid var(--accent);
+  box-shadow: none;
+}
+:root[data-theme="shopware"] .agenda-dot .material-symbols-outlined { color: var(--accent); }
+:root[data-theme="shopware"] .agenda-time { color: var(--dim); font-family: var(--display); font-variant-numeric: tabular-nums; }
+:root[data-theme="shopware"] .agenda-label { color: var(--fg); font-family: var(--display); font-weight: 600; }
+:root[data-theme="shopware"] .agenda-duration { color: var(--dim); }
+
+/* ---------------------------------------------------------------------------
+ * Checklist
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .checklist-item {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .checklist-item.is-done {
+  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-primary));
+  background: color-mix(in srgb, var(--accent-soft) 60%, var(--bg));
+}
+:root[data-theme="shopware"] .checklist-box { color: var(--dim); }
+:root[data-theme="shopware"] .checklist-item.is-done .checklist-box {
+  color: var(--accent);
+  text-shadow: none;
+}
+:root[data-theme="shopware"] .checklist-text { color: var(--fg); }
+:root[data-theme="shopware"] .checklist-item.is-done .checklist-text { color: var(--dim); }
+:root[data-theme="shopware"] .checklist-sub  { color: var(--dim); }
+
+/* ---------------------------------------------------------------------------
+ * Steps
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .step-card {
+  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"] .step-card:hover {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-md);
+}
+:root[data-theme="shopware"] .step-numeral {
+  text-shadow: none;
+  color: var(--accent);
+  font-family: var(--display);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+:root[data-theme="shopware"] .step-icon  { color: var(--accent); }
+:root[data-theme="shopware"] .step-label { color: var(--fg); font-family: var(--display); font-weight: 600; }
+:root[data-theme="shopware"] .step-body  { color: var(--dim); }
+
+/* ---------------------------------------------------------------------------
+ * CTA — pill button, brand fill, --shadow-brand when accent
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .cta {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .cta--accent {
+  border-color: var(--accent);
+  background:
+    linear-gradient(135deg, var(--accent-soft), transparent 55%),
+    var(--bg);
+  box-shadow: var(--shadow-brand);
+}
+:root[data-theme="shopware"] .cta-headline {
+  color: var(--fg);
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+:root[data-theme="shopware"] .cta--accent .cta-headline { color: var(--fg); }
+:root[data-theme="shopware"] .cta-body { color: var(--dim); }
+:root[data-theme="shopware"] .cta-button {
+  background: var(--accent);
+  color: #ffffff;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-pill);
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  box-shadow: none;
+  transition: background 160ms ease, box-shadow 200ms ease, transform 160ms ease;
+}
+:root[data-theme="shopware"] .cta-button:hover {
+  background: var(--accent-hover);
+}
+:root[data-theme="shopware"] .cta--accent .cta-button {
+  background: var(--accent);
+  color: #ffffff;
+  box-shadow: var(--shadow-brand);
+}
+:root[data-theme="shopware"] .cta--accent .cta-button:hover {
+  background: var(--accent-hover);
+  box-shadow: var(--shadow-brand);
+}
+:root[data-theme="shopware"] .cta-hint { color: var(--dim); }
+
+/* ---------------------------------------------------------------------------
+ * Callout — colored left border, *-soft tint
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .callout {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-left: 4px solid var(--border-secondary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .callout-heading { color: var(--fg); font-family: var(--display); font-weight: 600; }
+:root[data-theme="shopware"] .callout-text    { color: var(--dim); }
+
+:root[data-theme="shopware"] .callout--info {
+  border-left-color: var(--blue);
+  background: linear-gradient(90deg, var(--blue-soft), transparent 45%), var(--bg);
+}
+:root[data-theme="shopware"] .callout--info    .callout-icon,
+:root[data-theme="shopware"] .callout--info    .callout-heading { color: var(--blue); }
+
+:root[data-theme="shopware"] .callout--tip {
+  border-left-color: var(--accent);
+  background: linear-gradient(90deg, var(--accent-soft), transparent 45%), var(--bg);
+}
+:root[data-theme="shopware"] .callout--tip     .callout-icon,
+:root[data-theme="shopware"] .callout--tip     .callout-heading { color: var(--accent); }
+
+:root[data-theme="shopware"] .callout--warning {
+  border-left-color: var(--amber);
+  background: linear-gradient(90deg, var(--amber-soft), transparent 45%), var(--bg);
+}
+:root[data-theme="shopware"] .callout--warning .callout-icon,
+:root[data-theme="shopware"] .callout--warning .callout-heading { color: var(--amber); }
+
+:root[data-theme="shopware"] .callout--danger {
+  border-left-color: var(--red);
+  background: linear-gradient(90deg, var(--red-soft), transparent 45%), var(--bg);
+}
+:root[data-theme="shopware"] .callout--danger  .callout-icon,
+:root[data-theme="shopware"] .callout--danger  .callout-heading { color: var(--red); }
+
+:root[data-theme="shopware"] .callout--success {
+  border-left-color: var(--green);
+  background: linear-gradient(90deg, var(--green-soft), transparent 50%), var(--bg);
+}
+:root[data-theme="shopware"] .callout--success .callout-icon,
+:root[data-theme="shopware"] .callout--success .callout-heading { color: var(--green); }
+:root[data-theme="shopware"] .callout--success .callout-icon { text-shadow: none; }
+
+/* ---------------------------------------------------------------------------
+ * Tip
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .tip {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .tip-icon { color: var(--accent); }
+:root[data-theme="shopware"] .tip-body { color: var(--fg); }
+
+:root[data-theme="shopware"] .tip--info    { border-color: color-mix(in srgb, var(--blue) 40%, var(--border-primary));   background: linear-gradient(135deg, var(--blue-soft), transparent 60%), var(--bg); }
+:root[data-theme="shopware"] .tip--info    .tip-icon { color: var(--blue); }
+:root[data-theme="shopware"] .tip--tip     { border-color: color-mix(in srgb, var(--accent) 40%, var(--border-primary)); background: linear-gradient(135deg, var(--accent-soft), transparent 60%), var(--bg); }
+:root[data-theme="shopware"] .tip--tip     .tip-icon { color: var(--accent); }
+:root[data-theme="shopware"] .tip--warning { border-color: color-mix(in srgb, var(--amber) 45%, var(--border-primary));  background: linear-gradient(135deg, var(--amber-soft), transparent 60%), var(--bg); }
+:root[data-theme="shopware"] .tip--warning .tip-icon { color: var(--amber); }
+:root[data-theme="shopware"] .tip--danger  { border-color: color-mix(in srgb, var(--red) 45%, var(--border-primary));    background: linear-gradient(135deg, var(--red-soft), transparent 60%), var(--bg); }
+:root[data-theme="shopware"] .tip--danger  .tip-icon { color: var(--red); }
+:root[data-theme="shopware"] .tip--success { border-color: color-mix(in srgb, var(--green) 45%, var(--border-primary)); background: linear-gradient(135deg, var(--green-soft), transparent 60%), var(--bg); }
+:root[data-theme="shopware"] .tip--success .tip-icon { color: var(--green); text-shadow: none; }
+
+/* ---------------------------------------------------------------------------
+ * BeforeAfter
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .ba-col {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .ba-col.ba-after {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-md);
+}
+:root[data-theme="shopware"] .ba-arrow {
+  color: var(--accent);
+  text-shadow: none;
+}
+
+:root[data-theme="shopware"] .before-after--image {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .ba-tag {
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid var(--border-primary);
+  color: var(--fg);
+  border-radius: var(--radius-pill);
+  font-family: var(--display);
+  font-weight: 600;
+}
+:root[data-theme="shopware"] .ba-tag--accent {
+  color: #ffffff;
+  background: var(--accent);
+  border-color: var(--accent);
+  box-shadow: none;
+}
+:root[data-theme="shopware"] .before-after--image .ba-divider {
+  background: var(--accent);
+  box-shadow: none;
+}