synthos 0.7.2 → 0.9.0

package/default-themes/{nebula-dawn.css → nebula-dawn.v2.css}

@@ -466,6 +466,7 @@ body.chat-collapsed .chat-toggle {
 
 .chat-input-wrapper .chat-input {
     width: 100%;
+    padding-left: 36px;
     padding-right: 36px;
 }
 
@@ -676,7 +677,140 @@ body.chat-collapsed .chat-toggle {
     font-style: italic;
 }
 
+/* ---- Save Line ---- */
+.save-line {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 8px 0 15px;
+    font-size: 11px;
+    color: var(--text-secondary);
+    opacity: 0.7;
+}
+
+.save-line::before,
+.save-line::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
+}
+
+.save-line-label {
+    white-space: nowrap;
+    letter-spacing: 0.5px;
+}
+
 /* ---- Shared page rules ---- */
 #loadingOverlay { position: absolute; }
 .chat-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
 .chat-input:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ---- Attach button (left side of input) ---- */
+.attach-btn {
+    position: absolute;
+    left: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s, background 0.2s;
+    z-index: 2;
+}
+.attach-btn:hover {
+    color: var(--accent-primary);
+    background: var(--accent-glow);
+}
+.light-mode .attach-btn {
+    color: var(--text-secondary);
+}
+.light-mode .attach-btn:hover {
+    color: var(--accent-primary);
+}
+
+/* ---- Attach popup menu ---- */
+.attach-menu {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 0;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+    overflow: hidden;
+    z-index: 100;
+    min-width: 160px;
+}
+.attach-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    font-size: 13px;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: background 0.15s;
+}
+.attach-menu-item:hover {
+    background: var(--accent-glow);
+}
+
+/* ---- Attachment pills ---- */
+.attachment-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 0 4px;
+    min-height: 0;
+}
+.attachment-pills:empty { display: none; }
+.attachment-pill {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 4px 8px;
+    max-width: 180px;
+}
+.attachment-pill-remove {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 0 2px;
+    line-height: 1;
+}
+.attachment-pill-remove:hover {
+    color: #ff6b6b;
+}
+
+/* ---- Screenshot overlay ---- */
+.screenshot-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.15);
+    cursor: crosshair;
+    z-index: 1000;
+}
+.screenshot-rect {
+    display: none;
+    position: absolute;
+    border: 2px solid red;
+    background: rgba(255,0,0,0.05);
+    pointer-events: none;
+}

package/default-themes/nebula-dawn.v3.css

@@ -0,0 +1,199 @@
+/* ==========================================================================
+   Nebula Dawn — Light Theme (v3)
+   Palette overrides + semantic tokens for FluentLM.
+   Rebrands from default blue to Nebula purple.
+   ========================================================================== */
+
+:root,
+.nebula-dawn {
+  /* -----------------------------------------------------------------------
+     PALETTE — Brand / Theme Colors (Nebula purple ramp)
+     ----------------------------------------------------------------------- */
+  --themePrimary:     #764ba2;
+  --themeDark:        #5a3580;
+  --themeDarkAlt:     #663d91;
+  --themeDarker:      #3b2054;
+  --themeSecondary:   #9670b8;
+  --themeTertiary:    #b49bce;
+  --themeLight:       #d3c3e3;
+  --themeLighter:     #e8ddf1;
+  --themeLighterAlt:  #f5f1fa;
+
+  /* -----------------------------------------------------------------------
+     PALETTE — Neutrals (warm purple-tinted)
+     ----------------------------------------------------------------------- */
+  --neutralDark:          #1e1830;
+  --neutralPrimary:       #2d2640;
+  --neutralPrimaryAlt:    #3d2e56;
+  --neutralSecondary:     #6b4f8a;
+  --neutralSecondaryAlt:  #5e4579;
+  --neutralTertiary:      #8a7a9d;
+  --neutralTertiaryAlt:   #a898b5;
+  --neutralQuaternary:    #cbc0d6;
+  --neutralQuaternaryAlt: #d5cae0;
+  --neutralLight:         #e8dff0;
+  --neutralLighter:       #f0e6f6;
+  --neutralLighterAlt:    #f7f2fa;
+  --white:                #ffffff;
+
+  /* -----------------------------------------------------------------------
+     BODY / BACKGROUND
+     ----------------------------------------------------------------------- */
+  --bodyBackground:          var(--white);
+  --bodyBackgroundHovered:   var(--neutralLighter);
+  --bodyBackgroundChecked:   var(--neutralLight);
+  --bodyStandoutBackground:  var(--neutralLighterAlt);
+  --bodyFrameBackground:     var(--white);
+  --bodyFrameDivider:        var(--neutralLight);
+  --bodyDivider:             var(--neutralLight);
+
+  /* -----------------------------------------------------------------------
+     TEXT
+     ----------------------------------------------------------------------- */
+  --bodyText:                var(--neutralPrimary);
+  --bodyTextChecked:         var(--neutralDark);
+  --bodySubtext:             var(--neutralSecondary);
+  --disabledText:            var(--neutralTertiary);
+  --disabledBodyText:        var(--neutralTertiary);
+  --disabledSubtext:         var(--neutralQuaternary);
+  --disabledBodySubtext:     var(--neutralTertiaryAlt);
+
+  /* -----------------------------------------------------------------------
+     LINKS
+     ----------------------------------------------------------------------- */
+  --link:                    var(--themePrimary);
+  --linkHovered:             var(--themeDarker);
+  --actionLink:              var(--neutralPrimary);
+  --actionLinkHovered:       var(--neutralDark);
+
+  /* -----------------------------------------------------------------------
+     BUTTONS — Default
+     ----------------------------------------------------------------------- */
+  --buttonBackground:              var(--white);
+  --buttonBackgroundHovered:       var(--neutralLighter);
+  --buttonBackgroundChecked:       var(--neutralLight);
+  --buttonBackgroundCheckedHovered: var(--neutralQuaternaryAlt);
+  --buttonBackgroundPressed:       var(--neutralLight);
+  --buttonBackgroundDisabled:      var(--neutralLighter);
+  --buttonBorder:                  var(--neutralSecondaryAlt);
+  --buttonBorderDisabled:          var(--neutralLighter);
+  --buttonText:                    var(--neutralPrimary);
+  --buttonTextHovered:             var(--neutralDark);
+  --buttonTextChecked:             var(--neutralDark);
+  --buttonTextCheckedHovered:      var(--black);
+  --buttonTextPressed:             var(--neutralDark);
+  --buttonTextDisabled:            var(--neutralTertiary);
+
+  /* -----------------------------------------------------------------------
+     BUTTONS — Primary
+     ----------------------------------------------------------------------- */
+  --primaryButtonBackground:          var(--themePrimary);
+  --primaryButtonBackgroundHovered:   var(--themeDarkAlt);
+  --primaryButtonBackgroundPressed:   var(--themeDark);
+  --primaryButtonBackgroundDisabled:  var(--neutralLighter);
+  --primaryButtonBorder:              transparent;
+  --primaryButtonText:                var(--white);
+  --primaryButtonTextHovered:         var(--white);
+  --primaryButtonTextPressed:         var(--white);
+  --primaryButtonTextDisabled:        var(--neutralQuaternary);
+
+  /* -----------------------------------------------------------------------
+     BUTTONS — Accent
+     ----------------------------------------------------------------------- */
+  --accentButtonBackground:  var(--themePrimary);
+  --accentButtonText:        var(--white);
+
+  /* -----------------------------------------------------------------------
+     INPUTS
+     ----------------------------------------------------------------------- */
+  --inputBackground:                    var(--white);
+  --inputBackgroundChecked:             var(--themePrimary);
+  --inputBackgroundCheckedHovered:      var(--themeDarkAlt);
+  --inputPlaceholderBackgroundChecked:  var(--themeLighter);
+  --inputForegroundChecked:             var(--white);
+  --inputBorder:                        var(--neutralSecondary);
+  --smallInputBorder:                   var(--neutralSecondary);
+  --inputBorderHovered:                 var(--neutralPrimary);
+  --inputFocusBorderAlt:                var(--themePrimary);
+  --inputText:                          var(--neutralPrimary);
+  --inputTextHovered:                   var(--neutralDark);
+  --inputPlaceholderText:               var(--neutralSecondary);
+  --inputIcon:                          var(--themePrimary);
+  --inputIconHovered:                   var(--themeDark);
+  --inputIconDisabled:                  var(--neutralTertiary);
+
+  /* -----------------------------------------------------------------------
+     LISTS
+     ----------------------------------------------------------------------- */
+  --listBackground:                  var(--white);
+  --listText:                        var(--neutralPrimary);
+  --listItemBackgroundHovered:       var(--neutralLighter);
+  --listItemBackgroundChecked:       var(--neutralLight);
+  --listItemBackgroundCheckedHovered: var(--neutralQuaternaryAlt);
+  --listHeaderBackgroundHovered:     var(--neutralLighter);
+  --listHeaderBackgroundPressed:     var(--neutralLight);
+
+  /* -----------------------------------------------------------------------
+     MENUS
+     ----------------------------------------------------------------------- */
+  --menuBackground:              var(--white);
+  --menuDivider:                 var(--neutralTertiaryAlt);
+  --menuIcon:                    var(--themePrimary);
+  --menuHeader:                  var(--themePrimary);
+  --menuItemBackgroundHovered:   var(--neutralLighter);
+  --menuItemBackgroundPressed:   var(--neutralLight);
+  --menuItemText:                var(--neutralPrimary);
+  --menuItemTextHovered:         var(--neutralDark);
+
+  /* -----------------------------------------------------------------------
+     CARDS
+     ----------------------------------------------------------------------- */
+  --cardStandoutBackground:  var(--white);
+  --cardShadow:              var(--elevation4);
+  --cardShadowHovered:       var(--elevation8);
+  --variantBorder:           var(--neutralLight);
+  --variantBorderHovered:    var(--neutralTertiaryAlt);
+
+  /* -----------------------------------------------------------------------
+     DISABLED / FOCUS
+     ----------------------------------------------------------------------- */
+  --disabledBackground:  var(--neutralLighter);
+  --disabledBorder:      var(--neutralLighter);
+  --focusBorder:         var(--neutralSecondary);
+
+  /* -----------------------------------------------------------------------
+     STATUS — Backgrounds
+     ----------------------------------------------------------------------- */
+  --infoBackground:           var(--neutralLighter);
+  --errorBackground:          #FDE7E9;
+  --blockingBackground:       #FDE7E9;
+  --warningBackground:        #FFF4CE;
+  --severeWarningBackground:  #FED9CC;
+  --successBackground:        #DFF6DD;
+
+  /* -----------------------------------------------------------------------
+     STATUS — Icons
+     ----------------------------------------------------------------------- */
+  --infoIcon:           var(--neutralSecondary);
+  --errorIcon:          #A80000;
+  --blockingIcon:       #FDE7E9;
+  --warningIcon:        #797775;
+  --severeWarningIcon:  var(--orange);
+  --successIcon:        var(--green);
+
+  /* -----------------------------------------------------------------------
+     STATUS — Text
+     ----------------------------------------------------------------------- */
+  --errorText:    var(--redDark);
+  --messageText:  var(--neutralPrimary);
+  --messageLink:  var(--themeDark);
+  --messageLinkHovered: var(--themeDarker);
+  --warningText:  var(--neutralPrimary);
+  --successText:  var(--green);
+
+  /* -----------------------------------------------------------------------
+     MISC
+     ----------------------------------------------------------------------- */
+  --defaultStateBackground:  var(--neutralLighterAlt);
+  --overlayBackground:       var(--blackTranslucent40);
+}

package/default-themes/{nebula-dusk.css → nebula-dusk.v2.css}

@@ -466,6 +466,7 @@ body.chat-collapsed .chat-toggle {
 
 .chat-input-wrapper .chat-input {
     width: 100%;
+    padding-left: 36px;
     padding-right: 36px;
 }
 
@@ -668,7 +669,134 @@ body.chat-collapsed .chat-toggle {
     font-style: italic;
 }
 
+/* ---- Save Line ---- */
+.save-line {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 8px 0 15px;
+    font-size: 11px;
+    color: var(--text-secondary);
+    opacity: 0.7;
+}
+
+.save-line::before,
+.save-line::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
+}
+
+.save-line-label {
+    white-space: nowrap;
+    letter-spacing: 0.5px;
+}
+
 /* ---- Shared page rules ---- */
 #loadingOverlay { position: absolute; }
 .chat-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
 .chat-input:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ---- Attach button (left side of input) ---- */
+.attach-btn {
+    position: absolute;
+    left: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s, background 0.2s;
+    z-index: 2;
+}
+.attach-btn:hover {
+    color: var(--accent-primary);
+    background: var(--accent-glow);
+}
+
+/* ---- Attach popup menu ---- */
+.attach-menu {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 0;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+    overflow: hidden;
+    z-index: 100;
+    min-width: 160px;
+}
+.attach-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    font-size: 13px;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: background 0.15s;
+}
+.attach-menu-item:hover {
+    background: var(--accent-glow);
+}
+
+/* ---- Attachment pills ---- */
+.attachment-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 0 4px;
+    min-height: 0;
+}
+.attachment-pills:empty { display: none; }
+.attachment-pill {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 4px 8px;
+    max-width: 180px;
+}
+.attachment-pill-remove {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 0 2px;
+    line-height: 1;
+}
+.attachment-pill-remove:hover {
+    color: #ff6b6b;
+}
+
+/* ---- Screenshot overlay ---- */
+.screenshot-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.2);
+    cursor: crosshair;
+    z-index: 1000;
+}
+.screenshot-rect {
+    display: none;
+    position: absolute;
+    border: 2px solid red;
+    background: rgba(255,0,0,0.05);
+    pointer-events: none;
+}

package/default-themes/nebula-dusk.v3.css

@@ -0,0 +1,201 @@
+/* ==========================================================================
+   Nebula Dusk — Dark Theme (v3)
+   Palette overrides + semantic tokens for FluentLM.
+   Rebrands from default blue to Nebula purple, dark mode.
+   ========================================================================== */
+
+.nebula-dusk {
+  /* -----------------------------------------------------------------------
+     PALETTE — Brand / Theme Colors (Nebula purple ramp)
+     ----------------------------------------------------------------------- */
+  --themePrimary:     #764ba2;
+  --themeDark:        #5a3580;
+  --themeDarkAlt:     #663d91;
+  --themeDarker:      #3b2054;
+  --themeSecondary:   #9670b8;
+  --themeTertiary:    #b49bce;
+  --themeLight:       #d3c3e3;
+  --themeLighter:     #e8ddf1;
+  --themeLighterAlt:  #f5f1fa;
+
+  /* -----------------------------------------------------------------------
+     PALETTE — Neutrals (inverted for dark mode)
+     ----------------------------------------------------------------------- */
+  --black:                #000000;
+  --neutralDarker:        #0f0f23;
+  --neutralDark:          #16213e;
+  --neutralPrimary:       #1a1a2e;
+  --neutralPrimaryAlt:    #222244;
+  --neutralSecondary:     #2e2e52;
+  --neutralSecondaryAlt:  #3a3a60;
+  --neutralTertiary:      #5a5a80;
+  --neutralTertiaryAlt:   #b794f6;
+  --neutralQuaternary:    #7a7a9a;
+  --neutralQuaternaryAlt: #8a8aaa;
+  --neutralLight:         #a0a0c0;
+  --neutralLighter:       #e0e0e0;
+  --neutralLighterAlt:    #f0f0f0;
+  --white:                #ffffff;
+
+  /* -----------------------------------------------------------------------
+     BODY / BACKGROUND
+     ----------------------------------------------------------------------- */
+  --bodyBackground:          var(--neutralPrimary);
+  --bodyBackgroundHovered:   var(--neutralPrimaryAlt);
+  --bodyBackgroundChecked:   var(--neutralSecondary);
+  --bodyStandoutBackground:  var(--neutralDark);
+  --bodyFrameBackground:     var(--neutralPrimary);
+  --bodyFrameDivider:        var(--neutralSecondary);
+  --bodyDivider:             var(--neutralSecondary);
+
+  /* -----------------------------------------------------------------------
+     TEXT
+     ----------------------------------------------------------------------- */
+  --bodyText:                var(--neutralLighter);
+  --bodyTextChecked:         var(--white);
+  --bodySubtext:             var(--neutralTertiaryAlt);
+  --disabledText:            var(--neutralSecondary);
+  --disabledBodyText:        var(--neutralSecondary);
+  --disabledSubtext:         var(--neutralSecondaryAlt);
+  --disabledBodySubtext:     var(--neutralSecondary);
+
+  /* -----------------------------------------------------------------------
+     LINKS (Nebula purple instead of default blue)
+     ----------------------------------------------------------------------- */
+  --link:                    #b794f6;
+  --linkHovered:             #d4b8ff;
+  --actionLink:              var(--neutralLighter);
+  --actionLinkHovered:       var(--white);
+
+  /* -----------------------------------------------------------------------
+     BUTTONS — Default
+     ----------------------------------------------------------------------- */
+  --buttonBackground:              var(--neutralPrimary);
+  --buttonBackgroundHovered:       var(--neutralPrimaryAlt);
+  --buttonBackgroundChecked:       var(--neutralSecondary);
+  --buttonBackgroundCheckedHovered: var(--neutralSecondaryAlt);
+  --buttonBackgroundPressed:       var(--neutralSecondary);
+  --buttonBackgroundDisabled:      var(--neutralDark);
+  --buttonBorder:                  var(--neutralSecondaryAlt);
+  --buttonBorderDisabled:          var(--neutralDark);
+  --buttonText:                    var(--neutralLighter);
+  --buttonTextHovered:             var(--white);
+  --buttonTextChecked:             var(--white);
+  --buttonTextCheckedHovered:      var(--white);
+  --buttonTextPressed:             var(--white);
+  --buttonTextDisabled:            var(--neutralSecondary);
+
+  /* -----------------------------------------------------------------------
+     BUTTONS — Primary
+     ----------------------------------------------------------------------- */
+  --primaryButtonBackground:          var(--themePrimary);
+  --primaryButtonBackgroundHovered:   var(--themeDarkAlt);
+  --primaryButtonBackgroundPressed:   var(--themeDark);
+  --primaryButtonBackgroundDisabled:  var(--neutralDark);
+  --primaryButtonBorder:              transparent;
+  --primaryButtonText:                var(--white);
+  --primaryButtonTextHovered:         var(--white);
+  --primaryButtonTextPressed:         var(--white);
+  --primaryButtonTextDisabled:        var(--neutralSecondary);
+
+  /* -----------------------------------------------------------------------
+     BUTTONS — Accent
+     ----------------------------------------------------------------------- */
+  --accentButtonBackground:  var(--themePrimary);
+  --accentButtonText:        var(--white);
+
+  /* -----------------------------------------------------------------------
+     INPUTS
+     ----------------------------------------------------------------------- */
+  --inputBackground:                    var(--neutralPrimary);
+  --inputBackgroundChecked:             var(--themePrimary);
+  --inputBackgroundCheckedHovered:      var(--themeDarkAlt);
+  --inputPlaceholderBackgroundChecked:  var(--themeDark);
+  --inputForegroundChecked:             var(--white);
+  --inputBorder:                        var(--neutralTertiary);
+  --smallInputBorder:                   var(--neutralTertiary);
+  --inputBorderHovered:                 var(--neutralLighter);
+  --inputFocusBorderAlt:                var(--themeSecondary);
+  --inputText:                          var(--neutralLighter);
+  --inputTextHovered:                   var(--white);
+  --inputPlaceholderText:               var(--neutralTertiaryAlt);
+  --inputIcon:                          var(--themeSecondary);
+  --inputIconHovered:                   var(--themePrimary);
+  --inputIconDisabled:                  var(--neutralSecondary);
+
+  /* -----------------------------------------------------------------------
+     LISTS
+     ----------------------------------------------------------------------- */
+  --listBackground:                  var(--neutralPrimary);
+  --listText:                        var(--neutralLighter);
+  --listItemBackgroundHovered:       var(--neutralPrimaryAlt);
+  --listItemBackgroundChecked:       var(--neutralSecondary);
+  --listItemBackgroundCheckedHovered: var(--neutralSecondaryAlt);
+  --listHeaderBackgroundHovered:     var(--neutralPrimaryAlt);
+  --listHeaderBackgroundPressed:     var(--neutralSecondary);
+
+  /* -----------------------------------------------------------------------
+     MENUS
+     ----------------------------------------------------------------------- */
+  --menuBackground:              var(--neutralPrimary);
+  --menuDivider:                 var(--neutralSecondary);
+  --menuIcon:                    var(--themeSecondary);
+  --menuHeader:                  var(--themeSecondary);
+  --menuItemBackgroundHovered:   var(--neutralPrimaryAlt);
+  --menuItemBackgroundPressed:   var(--neutralSecondary);
+  --menuItemText:                var(--neutralLighter);
+  --menuItemTextHovered:         var(--white);
+
+  /* -----------------------------------------------------------------------
+     CARDS
+     In dark themes Fluent v8 drops shadows and uses borders instead.
+     ----------------------------------------------------------------------- */
+  --cardStandoutBackground:  var(--neutralDark);
+  --cardShadow:              none;
+  --cardShadowHovered:       none;
+  --variantBorder:           var(--neutralSecondary);
+  --variantBorderHovered:    var(--neutralTertiary);
+
+  /* -----------------------------------------------------------------------
+     DISABLED / FOCUS
+     ----------------------------------------------------------------------- */
+  --disabledBackground:  var(--neutralDark);
+  --disabledBorder:      var(--neutralDark);
+  --focusBorder:         var(--neutralTertiaryAlt);
+
+  /* -----------------------------------------------------------------------
+     STATUS — Backgrounds
+     ----------------------------------------------------------------------- */
+  --infoBackground:           var(--neutralPrimary);
+  --errorBackground:          #442726;
+  --blockingBackground:       #442726;
+  --warningBackground:        #433519;
+  --severeWarningBackground:  #4F2A0F;
+  --successBackground:        #393D1B;
+
+  /* -----------------------------------------------------------------------
+     STATUS — Icons
+     ----------------------------------------------------------------------- */
+  --infoIcon:           var(--neutralTertiaryAlt);
+  --errorIcon:          #F1707B;
+  --blockingIcon:       #442726;
+  --warningIcon:        var(--neutralTertiaryAlt);
+  --severeWarningIcon:  #FCE100;
+  --successIcon:        #92C353;
+
+  /* -----------------------------------------------------------------------
+     STATUS — Text
+     ----------------------------------------------------------------------- */
+  --errorText:    #F1707B;
+  --messageText:  var(--neutralLighter);
+  --messageLink:  #b794f6;
+  --messageLinkHovered: #d4b8ff;
+  --warningText:  var(--neutralLighter);
+  --successText:  #92C353;
+
+  /* -----------------------------------------------------------------------
+     MISC
+     ----------------------------------------------------------------------- */
+  --defaultStateBackground:  var(--neutralDark);
+  --overlayBackground:       rgba(0, 0, 0, 0.6);
+}