@rtsee/ngx 0.0.103 → 0.0.104

package/dist/ngx/src/lib/theme/messenger/profile.scss

@@ -1,112 +1,97 @@
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Profile
+// ═══════════════════════════════════════════════════════════════════
 @import "./variables";
-@import "../common-variables";
 
-.rtsee-messenger-profile {
-  padding: $rts-offset-sm;
-  background-color: $rts-rates-bg-main;
-  color: $rts-rates-text-primary;
-  font-family: "Work Sans", "Inter", sans-serif;
+.rts-messenger-profile {
+  padding: $rtsu-space-sm;
+  background-color: var(--rts-bg-primary);
+  color: var(--rts-text-primary);
+  font-family: $rtsu-font-family;
   min-height: 100%;
 
   /* ── GLASS CARD ───────────────────────────────────────────── */
 
-  .rtsee-messenger-profile-glass-card {
+  .rts-messenger-profile-glass-card {
     background: linear-gradient(
       135deg,
-      $rts-rates-bg-card-start 0%,
-      $rts-rates-bg-card-end 100%
+      var(--rts-card-bg-start) 0%,
+      var(--rts-card-bg-end) 100%
     );
-    border: 1px solid $rts-rates-border-dim;
-    border-radius: 16px;
-    backdrop-filter: blur(12px);
-    padding: $rts-offset-md;
-    margin-bottom: $rts-offset-md;
-    transition:
-      transform 0.3s ease,
-      border-color 0.3s ease,
-      box-shadow 0.3s ease;
-    animation: rtseeProfileCardSlideUp 0.6s ease-out both;
+    border: 1px solid var(--rts-border-dim);
+    border-radius: $rtsu-radius-lg;
+    backdrop-filter: $rtsu-glass-blur;
+    padding: $rtsu-space-md;
+    margin-bottom: $rtsu-space-md;
+    transition: transform $rtsu-transition-base,
+                border-color $rtsu-transition-base,
+                box-shadow $rtsu-transition-base;
+    animation: rts-fade-up 0.6s ease-out both;
 
     &:hover {
-      border-color: rgba($rts-rates-accent-purple, 0.2);
-      box-shadow: 0 6px 24px rgba($rts-rates-accent-purple, 0.08);
-    }
-  }
-
-  @keyframes rtseeProfileCardSlideUp {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
+      border-color: rgba(108, 92, 231, 0.2);
+      box-shadow: 0 6px 24px rgba(108, 92, 231, 0.08);
     }
   }
 
   /* ── PROFILE INFO ─────────────────────────────────────────── */
 
-  .rtsee-messenger-profile-info {
-    .rtsee-messenger-profile-info-name {
-      margin: 0 0 $rts-offset-md;
-      font-size: 24px;
-      font-weight: 700;
-      color: #fff;
+  .rts-messenger-profile-info {
+    .rts-messenger-profile-info-name {
+      margin: 0 0 $rtsu-space-md;
+      font-size: $rtsu-font-size-xl;
+      font-weight: $rtsu-font-weight-bold;
+      color: var(--rts-text-primary);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      letter-spacing: -0.02em;
-      line-height: 1.2;
+      letter-spacing: $rtsu-tracking-tight;
+      line-height: $rtsu-line-height-tight;
     }
 
-    .rtsee-messenger-profile-info-language {
+    .rts-messenger-profile-info-language {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
-      padding: $rts-offset-sm 0;
+      padding: $rtsu-space-sm 0;
 
-      .rtsee-messenger-profile-info-language-label {
-        font-size: 14px;
-        font-weight: 500;
-        color: $rts-rates-text-secondary;
+      .rts-messenger-profile-info-language-label {
+        font-size: $rtsu-font-size-base;
+        font-weight: $rtsu-font-weight-medium;
+        color: var(--rts-text-secondary);
         margin: 0;
       }
-
-      .rtsee-messenger-profile-info-language-select {
-        // PrimeNG select overrides for dark theme
-      }
     }
   }
 
   /* ── EDIT PROFILE / MANAGE PLAN BUTTONS ───────────────────── */
 
-  .rtsee-messenger-profile-edit-btn, {
-    padding-top: $rts-offset-sm;
+  .rts-messenger-profile-edit-btn {
+    padding-top: $rtsu-space-sm;
   }
 
-  .rtsee-messenger-profile-edit-btn,
-  .rtsee-messenger-profile-manage-plan-btn {
-    margin-top: $rts-offset-sm;
+  .rts-messenger-profile-edit-btn,
+  .rts-messenger-profile-manage-plan-btn {
+    margin-top: $rtsu-space-sm;
     text-align: right;
 
     ::ng-deep .p-button {
       width: 100%;
       background: transparent;
-      border: 1px solid $rts-rates-border-bright;
-      color: $rts-rates-text-primary;
-      border-radius: 10px;
-      font-weight: 600;
+      border: 1px solid var(--rts-border-bright);
+      color: var(--rts-text-primary);
+      border-radius: $rtsu-radius-sm + 2px;
+      font-weight: $rtsu-font-weight-semibold;
       font-size: 0.88rem;
       padding: 10px 20px;
-      transition:
-        background 0.2s ease,
-        border-color 0.2s ease,
-        transform 0.2s ease;
+      transition: background $rtsu-transition-fast,
+                  border-color $rtsu-transition-fast,
+                  transform $rtsu-transition-fast;
 
       &:hover {
-        background: rgba(255, 255, 255, 0.05);
-        border-color: rgba($rts-rates-accent-purple, 0.4);
+        background: var(--rts-bg-surface-hover);
+        border-color: rgba(108, 92, 231, 0.4);
         transform: translateY(-1px);
       }
 
@@ -118,14 +103,14 @@
 
   /* ── PLAN STATUS ──────────────────────────────────────────── */
 
-  .rtsee-messenger-profile-plan-status {
-    margin-bottom: $rts-offset-sm;
+  .rts-messenger-profile-plan-status {
+    margin-bottom: $rtsu-space-sm;
   }
 
   /* ── SUBSCRIBE BUTTON — PRIMARY CTA ───────────────────────── */
 
-  .rtsee-messenger-profile-subscribe-btn {
-    animation: rtseeProfileCardSlideUp 0.7s ease-out both;
+  .rts-messenger-profile-subscribe-btn {
+    animation: rts-fade-up 0.7s ease-out both;
     animation-delay: 0.1s;
     text-align: right;
 
@@ -133,20 +118,19 @@
       width: 100%;
       background: linear-gradient(
         135deg,
-        $rts-rates-accent-purple 0%,
-        $rts-rates-accent-purple-light 100%
+        $rtsu-accent-purple 0%,
+        $rtsu-accent-purple-light 100%
       );
       border: none;
       color: #fff;
-      border-radius: 12px;
-      font-weight: 700;
+      border-radius: $rtsu-radius-md;
+      font-weight: $rtsu-font-weight-bold;
       font-size: 1rem;
       padding: 14px 28px;
-      letter-spacing: 0.02em;
-      box-shadow: 0 4px 20px rgba($rts-rates-accent-purple, 0.35);
-      transition:
-        transform 0.25s ease,
-        box-shadow 0.25s ease;
+      letter-spacing: $rtsu-tracking-wide;
+      box-shadow: $rtsu-shadow-accent-md;
+      transition: transform $rtsu-transition-base,
+                  box-shadow $rtsu-transition-base;
       position: relative;
       overflow: hidden;
 
@@ -160,59 +144,49 @@
           rgba(255, 255, 255, 0.15) 50%,
           transparent 60%
         );
-        animation: rtseeSubscribeShimmer 3s ease-in-out infinite;
+        animation: rts-shimmer 3s ease-in-out infinite;
       }
 
       &:hover {
         transform: translateY(-2px);
-        box-shadow: 0 8px 28px rgba($rts-rates-accent-purple, 0.45);
+        box-shadow: $rtsu-shadow-accent-lg;
       }
 
       &:active {
         transform: translateY(0);
-        box-shadow: 0 4px 16px rgba($rts-rates-accent-purple, 0.3);
+        box-shadow: $rtsu-shadow-accent-sm;
       }
     }
   }
 
-  @keyframes rtseeSubscribeShimmer {
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(100%);
-    }
-  }
-
   /* ── CALL/VIDEO ACTIONS (other profile) ───────────────────── */
 
-  .rtsee-messenger-profile-actions {
+  .rts-messenger-profile-actions {
     list-style-type: none;
     padding-left: 0;
-    margin: 0 0 $rts-offset-md 0;
-    gap: $rts-offset-md;
+    margin: 0 0 $rtsu-space-md 0;
+    gap: $rtsu-space-md;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
 
-    .rtsee-messenger-profile-actions-item {
+    .rts-messenger-profile-actions-item {
       ::ng-deep .p-button {
         background: rgba(255, 255, 255, 0.06);
-        border: 1px solid $rts-rates-border-med;
-        color: $rts-rates-accent-purple-light;
+        border: 1px solid var(--rts-border-med);
+        color: var(--rts-accent-light, #a29bfe);
         border-radius: 50%;
         width: 52px;
         height: 52px;
-        transition:
-          background 0.2s ease,
-          transform 0.2s ease,
-          box-shadow 0.2s ease;
+        transition: background $rtsu-transition-fast,
+                    transform $rtsu-transition-fast,
+                    box-shadow $rtsu-transition-fast;
 
         &:hover {
-          background: rgba($rts-rates-accent-purple, 0.15);
+          background: rgba(108, 92, 231, 0.15);
           transform: translateY(-2px);
-          box-shadow: 0 4px 16px rgba($rts-rates-accent-purple, 0.2);
+          box-shadow: 0 4px 16px rgba(108, 92, 231, 0.2);
         }
 
         &:active {
@@ -224,29 +198,28 @@
 
   /* ── LOGOUT BUTTON — DANGER GHOST ─────────────────────────── */
 
-  .rtsee-messenger-profile-logout-btn {
-    margin-top: $rts-offset-sm;
-    animation: rtseeProfileCardSlideUp 0.7s ease-out both;
+  .rts-messenger-profile-logout-btn {
+    margin-top: $rtsu-space-sm;
+    animation: rts-fade-up 0.7s ease-out both;
     animation-delay: 0.15s;
     text-align: right;
 
     ::ng-deep .p-button {
       width: 100%;
-      background: $rts-rates-danger-bg;
-      border: 1px solid $rts-rates-danger-border;
-      color: $rts-rates-danger;
-      border-radius: 10px;
-      font-weight: 600;
+      background: var(--rts-danger-bg);
+      border: 1px solid var(--rts-danger-border);
+      color: var(--rts-danger, #e84118);
+      border-radius: $rtsu-radius-sm + 2px;
+      font-weight: $rtsu-font-weight-semibold;
       font-size: 0.88rem;
       padding: 10px 20px;
-      transition:
-        background 0.2s ease,
-        border-color 0.2s ease,
-        transform 0.2s ease;
+      transition: background $rtsu-transition-fast,
+                  border-color $rtsu-transition-fast,
+                  transform $rtsu-transition-fast;
 
       &:hover {
-        background: $rts-rates-danger-hover-bg;
-        border-color: $rts-rates-danger-hover-border;
+        background: rgba(232, 65, 24, 0.2);
+        border-color: rgba(232, 65, 24, 0.4);
         transform: translateY(-1px);
       }
 
@@ -258,30 +231,29 @@
 
   /* ── AUTH SECTION (ANONYMOUS USERS) ───────────────────────── */
 
-  .rtsee-messenger-profile-auth {
-    .rtsee-messenger-profile-anon-message {
-      margin-bottom: $rts-offset-md;
+  .rts-messenger-profile-auth {
+    .rts-messenger-profile-anon-message {
+      margin-bottom: $rtsu-space-md;
     }
 
-    .rtsee-messenger-profile-auth-buttons {
+    .rts-messenger-profile-auth-buttons {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
-      gap: $rts-offset-md;
-      margin-bottom: $rts-offset-md;
+      gap: $rtsu-space-md;
+      margin-bottom: $rtsu-space-md;
 
-      .rtsee-messenger-profile-auth-button {
+      .rts-messenger-profile-auth-button {
         flex: 1;
 
         ::ng-deep .p-button {
           width: 100%;
-          border-radius: 10px;
-          font-weight: 600;
+          border-radius: $rtsu-radius-sm + 2px;
+          font-weight: $rtsu-font-weight-semibold;
           padding: 10px 20px;
-          transition:
-            transform 0.2s ease,
-            box-shadow 0.2s ease;
+          transition: transform $rtsu-transition-fast,
+                      box-shadow $rtsu-transition-fast;
 
           &:hover {
             transform: translateY(-1px);
@@ -296,34 +268,34 @@
         &:first-child ::ng-deep .p-button {
           background: linear-gradient(
             135deg,
-            $rts-rates-accent-purple 0%,
-            $rts-rates-accent-purple-light 100%
+            $rtsu-accent-purple 0%,
+            $rtsu-accent-purple-light 100%
           );
           border: none;
           color: #fff;
-          box-shadow: 0 4px 16px rgba($rts-rates-accent-purple, 0.3);
+          box-shadow: $rtsu-shadow-accent-md;
 
           &:hover {
-            box-shadow: 0 6px 20px rgba($rts-rates-accent-purple, 0.4);
+            box-shadow: $rtsu-shadow-accent-lg;
           }
         }
 
         // Sign In — secondary ghost
         &:last-child ::ng-deep .p-button {
           background: transparent;
-          border: 1px solid $rts-rates-border-bright;
-          color: $rts-rates-text-primary;
+          border: 1px solid var(--rts-border-bright);
+          color: var(--rts-text-primary);
 
           &:hover {
-            background: rgba(255, 255, 255, 0.05);
-            border-color: rgba($rts-rates-accent-purple, 0.4);
+            background: var(--rts-bg-surface-hover);
+            border-color: rgba(108, 92, 231, 0.4);
           }
         }
       }
     }
   }
 
-  @media screen and (min-width: $rts-break-md) {
+  @media screen and (min-width: $rtsu-break-md) {
     max-width: 560px;
     margin: 0 auto;
   }

package/dist/ngx/src/lib/theme/messenger/rate-input.scss

@@ -1,31 +1,53 @@
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Rate Input
+// ═══════════════════════════════════════════════════════════════════
 @import "./variables";
-@import "../common-variables";
 
-.rtsee-rate-input {
-  padding: $rts-offset-sm;
+.rts-rate-input {
+  padding: $rtsu-space-sm;
 
-  .rtsee-rate-select-container {
-    padding: $rts-offset-sm;
+  .rts-rate-select-container {
+    padding: $rtsu-space-sm;
 
-    .rtsee-rating {
-      gap: $rts-offset-md;
-      padding: $rts-offset-sm;
+    .rts-rating {
+      gap: $rtsu-space-md;
+      padding: $rtsu-space-sm;
+      display: flex;
+      align-items: center;
 
-      .rtsee-rating-star {
+      .rts-rating-star {
         font-size: 24px;
+        cursor: pointer;
+        transition: transform $rtsu-transition-fast,
+                    color $rtsu-transition-fast;
+
+        &:hover {
+          transform: scale(1.2);
+        }
       }
 
-      .rtsee-rating-number {
-        font-size: 13px;
+      .rts-rating-number {
+        font-size: $rtsu-font-size-sm + 1px;
+        color: var(--rts-text-secondary);
       }
     }
   }
 
-
-
-  .rtsee-rate-form-container {
-    .rtsee-rate-comment-field {
+  .rts-rate-form-container {
+    .rts-rate-comment-field {
       width: 100%;
+      background-color: var(--rts-bg-surface);
+      color: var(--rts-text-primary);
+      border: 1px solid var(--rts-border-med);
+      border-radius: $rtsu-radius-sm;
+      padding: $rtsu-space-sm;
+      font-family: $rtsu-font-family;
+      font-size: $rtsu-font-size-base;
+      outline: none;
+
+      &:focus {
+        border-color: var(--rts-accent, #6c5ce7);
+      }
     }
   }
 }

package/dist/ngx/src/lib/theme/messenger/variables.scss

@@ -1,4 +1,14 @@
-@import "../common-variables";
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Local Variables
+// Imports the rts-common system and defines messenger-specific tokens
+// ═══════════════════════════════════════════════════════════════════
 
-$rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
-$rtsee-chat-input-height: 40px;
+@import "../rts-common/variables-colors";
+@import "../rts-common/variables-spacing";
+@import "../rts-common/variables-typography";
+@import "../rts-common/variables-layout";
+@import "../rts-common/variables-effects";
+
+// Messenger-specific derived values
+$rts-messenger-header-height: $rtsu-messenger-header-height;
+$rts-chat-input-height: $rtsu-chat-input-height;

package/dist/ngx/src/lib/theme/rts-common/_index.scss

@@ -0,0 +1,24 @@
+// ═══════════════════════════════════════════════════════════════════
+// RTS-COMMON — Unified Design System Index
+// Import this file to get all variables, tokens, and component classes.
+// ═══════════════════════════════════════════════════════════════════
+
+// ── Variables (no CSS output, just tokens) ──
+@import "./variables-colors";
+@import "./variables-spacing";
+@import "./variables-typography";
+@import "./variables-layout";
+@import "./variables-effects";
+
+// ── Shared Animations ──
+@import "./animations";
+
+// ── Reusable Component Classes ──
+@import "./avatars";
+@import "./labels";
+@import "./user-thumbnails";
+@import "./messages";
+@import "./inputs";
+@import "./forms";
+@import "./buttons";
+@import "./cards";

package/dist/ngx/src/lib/theme/rts-common/_variables-colors.scss

@@ -0,0 +1,133 @@
+// ═══════════════════════════════════════════════════════════════════
+// RTS-COMMON — Unified Color Variables
+// All vars prefixed $rtsu- (unified). Comments reference originals.
+// ═══════════════════════════════════════════════════════════════════
+
+// ── SCSS Reference Tokens (dark-theme defaults) ─────────────────
+
+$rtsu-bg-primary: #0e0e10;                    // original: $ai-background-color
+$rtsu-bg-surface: #1a1a1e;                     // original: $ai-panel-background-color
+$rtsu-bg-surface-elevated: #242428;
+$rtsu-bg-surface-hover: rgba(255, 255, 255, 0.05);
+$rtsu-bg-gradient: linear-gradient(135deg, #1b0533 0%, #0e0e10 60%, #0a1628 100%);
+                                                // original: $ai-background-gradient
+
+$rtsu-text-primary: #e5e5e7;                   // original: $ai-text-color-primary
+$rtsu-text-secondary: #8e8e93;                  // original: $ai-text-color-secondary
+$rtsu-text-muted: #6a6a7a;                      // original: $rts-rates-text-muted
+$rtsu-text-inverse: #1a1a2e;
+
+$rtsu-accent-purple: #6c5ce7;                   // original: $rts-rates-accent-purple
+$rtsu-accent-purple-light: #a29bfe;             // original: $rts-rates-accent-purple-light
+$rtsu-accent-blue: #3b82f7;                     // original: $rts-new-primary-color
+$rtsu-accent-gold: #f9ca24;                     // original: $rts-rates-accent-gold
+$rtsu-accent-highlight: #bf8bff;                // original: $ai-icon-highlight-color
+$rtsu-accent-highlight-dim: rgba(191, 139, 255, 0.15);
+                                                // original: $ai-icon-highlight-color-dim
+
+$rtsu-border-dim: rgba(255, 255, 255, 0.05);
+$rtsu-border-med: rgba(255, 255, 255, 0.08);
+$rtsu-border-bright: rgba(255, 255, 255, 0.15);
+
+$rtsu-danger: #e84118;                          // original: $rts-rates-danger
+$rtsu-danger-bg: rgba(232, 65, 24, 0.05);
+$rtsu-danger-border: rgba(232, 65, 24, 0.1);
+$rtsu-danger-hover-bg: rgba(232, 65, 24, 0.2);
+$rtsu-danger-hover-border: rgba(232, 65, 24, 0.4);
+
+$rtsu-success: #2ecc71;                         // original: $rts-rates-success
+$rtsu-warning: #f9ca24;                          // original: $rts-rates-accent-gold
+$rtsu-live-color: #91d8bb;                       // original: $rts-live-color
+
+// ── Card Background Gradients ───────────────────────────────────
+
+$rtsu-card-bg-start: rgba(28, 28, 40, 0.8);    // original: $rts-rates-bg-card-start
+$rtsu-card-bg-end: rgba(20, 20, 30, 0.9);      // original: $rts-rates-bg-card-end
+
+
+// ═══════════════════════════════════════════════════════════════════
+// CSS Custom Property Theme Maps
+// Toggle by adding .rts-theme-dark / .rts-theme-light on a parent
+// ═══════════════════════════════════════════════════════════════════
+
+.rts-theme-dark {
+  // ── Backgrounds ──
+  --rts-bg-primary: #{$rtsu-bg-primary};
+  --rts-bg-surface: #{$rtsu-bg-surface};
+  --rts-bg-surface-elevated: #{$rtsu-bg-surface-elevated};
+  --rts-bg-surface-hover: #{$rtsu-bg-surface-hover};
+  --rts-bg-gradient: #{$rtsu-bg-gradient};
+
+  // ── Text ──
+  --rts-text-primary: #{$rtsu-text-primary};
+  --rts-text-secondary: #{$rtsu-text-secondary};
+  --rts-text-muted: #{$rtsu-text-muted};
+
+  // ── Accent ──
+  --rts-accent: #{$rtsu-accent-purple};
+  --rts-accent-light: #{$rtsu-accent-purple-light};
+  --rts-accent-blue: #{$rtsu-accent-blue};
+  --rts-accent-highlight: #{$rtsu-accent-highlight};
+  --rts-accent-highlight-dim: #{$rtsu-accent-highlight-dim};
+
+  // ── Borders ──
+  --rts-border-dim: #{$rtsu-border-dim};
+  --rts-border-med: #{$rtsu-border-med};
+  --rts-border-bright: #{$rtsu-border-bright};
+
+  // ── Card Gradients ──
+  --rts-card-bg-start: #{$rtsu-card-bg-start};
+  --rts-card-bg-end: #{$rtsu-card-bg-end};
+
+  // ── Semantic ──
+  --rts-danger: #{$rtsu-danger};
+  --rts-danger-bg: #{$rtsu-danger-bg};
+  --rts-danger-border: #{$rtsu-danger-border};
+  --rts-success: #{$rtsu-success};
+  --rts-warning: #{$rtsu-warning};
+
+  // ── Misc ──
+  --rts-shadow-rgb: 0, 0, 0;
+  --rts-glass-tint: rgba(255, 255, 255, 0.03);
+}
+
+.rts-theme-light {
+  // ── Backgrounds ──
+  --rts-bg-primary: #f8f9fa;
+  --rts-bg-surface: #ffffff;
+  --rts-bg-surface-elevated: #f0f0f4;
+  --rts-bg-surface-hover: rgba(0, 0, 0, 0.04);
+  --rts-bg-gradient: linear-gradient(135deg, #f0ecff 0%, #f8f9fa 60%, #edf4ff 100%);
+
+  // ── Text ──
+  --rts-text-primary: #1a1a2e;
+  --rts-text-secondary: #555570;
+  --rts-text-muted: #8888a0;
+
+  // ── Accent ──
+  --rts-accent: #{$rtsu-accent-purple};
+  --rts-accent-light: #{$rtsu-accent-purple-light};
+  --rts-accent-blue: #{$rtsu-accent-blue};
+  --rts-accent-highlight: #{$rtsu-accent-highlight};
+  --rts-accent-highlight-dim: rgba(191, 139, 255, 0.1);
+
+  // ── Borders ──
+  --rts-border-dim: rgba(0, 0, 0, 0.06);
+  --rts-border-med: rgba(0, 0, 0, 0.1);
+  --rts-border-bright: rgba(0, 0, 0, 0.15);
+
+  // ── Card Gradients ──
+  --rts-card-bg-start: rgba(255, 255, 255, 0.95);
+  --rts-card-bg-end: rgba(248, 248, 255, 0.98);
+
+  // ── Semantic ──
+  --rts-danger: #{$rtsu-danger};
+  --rts-danger-bg: rgba(232, 65, 24, 0.06);
+  --rts-danger-border: rgba(232, 65, 24, 0.15);
+  --rts-success: #{$rtsu-success};
+  --rts-warning: #{$rtsu-warning};
+
+  // ── Misc ──
+  --rts-shadow-rgb: 0, 0, 0;
+  --rts-glass-tint: rgba(0, 0, 0, 0.02);
+}