@reliability-design/web 1.0.6 → 1.2.0

package/dist/rel-menubar-menu-BEEQDAXW.css

@@ -0,0 +1,3 @@
+rel-menubar-menu {
+  display: none;
+}

package/dist/styles/vars-v2.css

@@ -0,0 +1,525 @@
+/* vars-v2.css — Figma-aligned token file                                    */
+/* Source of truth: semantic-vars.css (Figma export) + vars.css primitives   */
+/* Changes from vars.css:                                                      */
+/*   - Dark grayscale now uses Figma neutral scale (no blue tint)             */
+/*   - Added 7 opacity tokens (--rel-opacity-*)                               */
+/*   - Added semantic-vars.css grayscale aliases (--rel-gray-*)               */
+/*   - Added semantic-vars.css status aliases (--rel-error-*, --rel-warning-* */
+/*     --rel-success-*)                                                        */
+/*   - Fixed --rel-background-success: #E8F5E8 → #E2FEEE (Figma value)       */
+/*   - Fixed --rel-error-surface-default dark: was unpinned → #FF5252         */
+/*   - Fixed --rel-error-surface-light dark: was #2a1116 → #FFDEDE           */
+/*   - Warning dark: removed incorrect dark tint — all warning tokens         */
+/*     stay at light values (Figma has no dark overrides for warning)         */
+/*   - Dark grayscale surfaces/text/borders replaced with Figma neutral scale */
+/* DO NOT USE IN PRODUCTION YET — migration happens component by component   */
+
+/* ------------------ THEME TRANSITIONS ------------------ */
+* {
+    transition-property: color, background-color, border-color, box-shadow, fill, stroke;
+    transition-duration: 0.2s;
+    transition-timing-function: ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    * {
+        transition-property: none;
+        transition-duration: 0s;
+    }
+}
+
+:root {
+
+    /* ------------------ BORDER RADII ------------------ */
+    --rel-borders-radius-border-radius-0: 0px;
+    --rel-borders-radius-border-radius-100: 2px;
+    --rel-borders-radius-border-radius-200: 8px;
+    --rel-borders-radius-border-radius-300: 16px;
+    --rel-borders-radius-border-radius-400: 24px;
+    --rel-borders-radius-border-radius-500: 1000px;
+
+    /* ------------------ BORDER WIDTHS ------------------ */
+    --rel-borders-width-stroke-050: 0.5px;
+    --rel-borders-width-stroke-100: 1px;
+    --rel-borders-width-stroke-150: 1.5px;
+    --rel-borders-width-stroke-200: 2px;
+    --rel-borders-width-stroke-300: 3px;
+    --rel-borders-width-stroke-400: 4px;
+
+    /* ------------------ OPACITY ------------------ */
+    /* NEW — was missing from vars.css entirely                                 */
+    /* In light mode: black overlays at increasing alpha                        */
+    --rel-opacity-5pct: rgba(0, 0, 0, 0.05);
+    --rel-opacity-10pct: rgba(0, 0, 0, 0.10);
+    --rel-opacity-15pct: rgba(0, 0, 0, 0.15);
+    --rel-opacity-20pct: rgba(0, 0, 0, 0.20);
+    --rel-opacity-25pct: rgba(0, 0, 0, 0.25);
+    --rel-opacity-30pct: rgba(0, 0, 0, 0.30);
+    --rel-opacity-50pct: rgba(0, 0, 0, 0.50);
+
+    /* ------------------ PRIMITIVE COLORS ------------------ */
+    --rel-colors-green-primary: #00F49C;
+    --rel-colors-green-secondary: #06D98C;
+    --rel-colors-green-tertiary: #00A86B;
+    --rel-colors-green-success: #22C55E;
+    --rel-colors-green-credited: #4CAA47;
+    --rel-colors-green-bg-light: #E2FEEE;
+    /* FIXED: was #E8F5E8 — now matches Figma */
+    --rel-colors-black: #000000;
+    --rel-colors-gray-primary: #333333;
+    --rel-colors-gray-heading: #2B2B2B;
+    --rel-colors-gray-placeholder: #A9A9A9;
+    --rel-colors-gray-dark-placeholder: #373737;
+    --rel-colors-gray-toast-bg: #404040;
+    --rel-colors-gray-light: #FAFAFA;
+    --rel-colors-gray-warm: #F5F5F4;
+    --rel-colors-gray-border: #DDDDDD;
+    --rel-colors-gray-disabled-text: #9E9E9E;
+    --rel-colors-gray-divider: #BDBDBD;
+    --rel-colors-gray-tab-border: #C4C4C4;
+    --rel-colors-gray-surface: #F5F5F5;
+    --rel-colors-gray-screen-bg: #EEEEEE;
+    --rel-colors-red-primary: #CC0000;
+    --rel-colors-red-secondary: #D50000;
+    --rel-colors-red-tertiary: #9C1E33;
+    --rel-colors-red-bg-alert: #FFE8EB;
+    --rel-colors-red-light: #FFDEDE;
+    --rel-colors-white: #FFFFFF;
+    --rel-colors-blue-primary: #0091EA;
+    --rel-colors-blue-secondary: #4A90E2;
+    --rel-colors-blue-tertiary: #0059F4;
+    --rel-colors-blue-light: #80D8FF;
+    --rel-colors-blue-bg: #E1F2FF;
+    --rel-colors-orange-warning: #FF6D00;
+    --rel-colors-orange-expired: #F2915C;
+    --rel-colors-orange-bg-light: #FFE9D9;
+    --rel-colors-orange-bg-counter: #FFF3E0;
+    --rel-colors-yellow-pending: #FFBF43;
+    --rel-colors-gold: #D6BA00;
+    --rel-colors-gold-light: #F6EFD7;
+    --rel-colors-gold-secondary: #F5F0D3;
+    --rel-colors-platinum: #8392C9;
+    --rel-colors-platinum-secondary: #E4E6F2;
+    --rel-colors-silver: #BABABA;
+    --rel-colors-silver-secondary: #F0F0F0;
+    --rel-colors-bronze: #7D5300;
+    --rel-colors-bronze-secondary: #E2DAC7;
+
+    /* ------------------ SEMANTIC GRAYSCALE ALIASES (Figma layer) ----------- */
+    /* NEW — sourced directly from semantic-vars.css, same resolved values      */
+    --rel-gray-text-primary: #333333;
+    /* = --rel-colors-gray-primary    */
+    --rel-gray-text-heading: #2B2B2B;
+    /* = --rel-colors-gray-heading    */
+    --rel-gray-text-placeholder: #A9A9A9;
+    /* = --rel-colors-gray-placeholder*/
+    --rel-gray-disabled-text: #9E9E9E;
+    /* = --rel-colors-gray-disabled-text */
+    --rel-gray-bg-light: #FAFAFA;
+    /* = --rel-colors-gray-light      */
+    --rel-gray-bg-screen: #EEEEEE;
+    /* = --rel-colors-gray-screen-bg  */
+    --rel-gray-bg-surface: #F5F5F5;
+    /* = --rel-colors-gray-surface    */
+    --rel-gray-bg-toast: #404040;
+    /* = --rel-colors-gray-toast-bg   */
+    --rel-gray-border: #DDDDDD;
+    /* = --rel-colors-gray-border     */
+    --rel-gray-divider-default: #BDBDBD;
+    /* = --rel-colors-gray-divider    */
+
+    /* ------------------ SEMANTIC STATUS ALIASES (Figma layer) -------------- */
+    /* NEW — sourced from semantic-vars.css                                     */
+
+    /* Error */
+    --rel-error-text: #CC0000;
+    /* = --rel-colors-red-primary     */
+    --rel-error-border: #CC0000;
+    --rel-error-icon: #CC0000;
+    --rel-error-surface-dark: #9C1E33;
+    /* = --rel-colors-red-tertiary    */
+    --rel-error-surface-default: #D50000;
+    /* = --rel-colors-red-secondary   */
+    --rel-error-surface-light: #FFE8EB;
+    /* = --rel-colors-red-bg-alert    */
+
+    /* Warning */
+    --rel-warning-text: #FF6D00;
+    /* = --rel-colors-orange-warning  */
+    --rel-warning-icon: #FF6D00;
+    --rel-warning-border: #FF6D00;
+    --rel-warning-surface-dark: #F2915C;
+    /* = --rel-colors-orange-expired  */
+    --rel-warning-surface-default: #FFBF43;
+    /* = --rel-colors-yellow-pending  */
+    --rel-warning-surface-light: #FFF3E0;
+    /* = --rel-colors-orange-bg-counter */
+
+    /* Success */
+    --rel-success-text: #4CAA47;
+    /* = --rel-colors-green-credited  */
+    --rel-success-icon: #4CAA47;
+    --rel-success-border: #4CAA47;
+    --rel-success-surface-dark: #00A86B;
+    /* = --rel-colors-green-tertiary  */
+    --rel-success-surface-default: #22C55E;
+    /* = --rel-colors-green-success   */
+    --rel-success-surface-light: #E2FEEE;
+    /* FIXED: was #E8F5E8             */
+
+    /* ------------------ SEMANTIC TEXT ------------------ */
+    --rel-text-primary: var(--rel-colors-gray-primary);
+    --rel-text-heading: var(--rel-colors-gray-heading);
+    --rel-text-error: var(--rel-colors-red-primary);
+    --rel-text-error-small: var(--rel-colors-red-secondary);
+    --rel-text-error-medium: var(--rel-colors-red-tertiary);
+    --rel-text-error-large: var(--rel-colors-red-tertiary);
+    --rel-text-warning: var(--rel-colors-orange-warning);
+    --rel-text-warning-small: var(--rel-colors-orange-expired);
+    --rel-text-warning-medium: var(--rel-colors-yellow-pending);
+    --rel-text-warning-large: var(--rel-colors-orange-warning);
+    --rel-text-success: var(--rel-colors-green-success);
+    --rel-text-success-small: var(--rel-colors-green-secondary);
+    --rel-text-success-medium: var(--rel-colors-green-tertiary);
+    --rel-text-success-large: var(--rel-colors-green-success);
+    --rel-text-info: var(--rel-colors-blue-primary);
+    --rel-text-info-secondary: var(--rel-colors-blue-secondary);
+    --rel-text-info-hover: var(--rel-colors-blue-tertiary);
+    --rel-text-placeholder: var(--rel-colors-gray-placeholder);
+    --rel-text-dark-placeholder: var(--rel-colors-gray-dark-placeholder);
+    --rel-text-disabled: var(--rel-colors-gray-disabled-text);
+    --rel-text-credited: var(--rel-colors-green-credited);
+
+    /* ------------------ SEMANTIC ICONS ------------------ */
+    --rel-icon-info: var(--rel-colors-blue-primary);
+    --rel-icon-error: var(--rel-colors-red-primary);
+    --rel-icon-warning: var(--rel-colors-orange-warning);
+    --rel-icon-success: var(--rel-colors-green-success);
+
+    /* ------------------ SEMANTIC BORDERS ------------------ */
+    --rel-border-default: var(--rel-colors-gray-border);
+    --rel-border-error: var(--rel-colors-red-primary);
+    --rel-border-warning: var(--rel-colors-orange-warning);
+    --rel-border-success: var(--rel-colors-green-primary);
+    --rel-border-info: var(--rel-colors-blue-primary);
+    --rel-border-divider: var(--rel-colors-gray-divider);
+    --rel-border-tab: var(--rel-colors-gray-tab-border);
+
+    /* ------------------ SEMANTIC BACKGROUNDS ------------------ */
+    --rel-background-error: var(--rel-colors-red-bg-alert);
+    --rel-background-error-light: var(--rel-colors-red-light);
+    --rel-background-warning: var(--rel-colors-orange-bg-light);
+    --rel-background-warning-counter: var(--rel-colors-orange-bg-counter);
+    --rel-background-success: var(--rel-colors-green-bg-light);
+    /* FIXED: now #E2FEEE */
+    --rel-background-info: var(--rel-colors-blue-bg);
+    --rel-background-info-accent: var(--rel-colors-blue-light);
+
+    /* ------------------ SEMANTIC SURFACES ------------------ */
+    --rel-surface-secondary: var(--rel-colors-gray-light);
+    --rel-surface-screen: var(--rel-colors-gray-screen-bg);
+    --rel-surface-surface: var(--rel-colors-gray-surface);
+    --rel-surface-warm: var(--rel-colors-gray-warm);
+    --rel-surface-toast: var(--rel-colors-gray-toast-bg);
+
+    /* ------------------ SHADOWS ------------------ */
+    --rel-shadows-shadow-100: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+    --rel-shadows-shadow-200: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+    --rel-shadows-shadow-300: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+    --rel-shadows-shadow-400: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
+    --rel-shadows-shadow-500: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
+
+    /* ------------------ SPACING ------------------ */
+    --rel-spacing-space-3xs: 2px;
+    --rel-spacing-space-2xs: 4px;
+    --rel-spacing-space-xs: 8px;
+    --rel-spacing-space-sm: 12px;
+    --rel-spacing-space-md: 16px;
+    --rel-spacing-space-lg: 20px;
+    --rel-spacing-space-xl: 24px;
+    --rel-spacing-space-2xl: 32px;
+    --rel-spacing-space-3xl: 48px;
+
+    /* ------------------ TYPOGRAPHY ------------------ */
+    --rel-fontFamilies-primary: Poppins, sans-serif;
+
+    --rel-fontWeights-regular: 400;
+    --rel-fontWeights-medium: 500;
+    --rel-fontWeights-semibold: 600;
+    --rel-fontWeights-bold: 700;
+
+    --rel-fontSizes-3xl: 36px;
+    --rel-fontSizes-2xl: 28px;
+    --rel-fontSizes-xl: 24px;
+    --rel-fontSizes-lg: 20px;
+    --rel-fontSizes-md: 14px;
+    --rel-fontSizes-sm: 12px;
+    --rel-fontSizes-xs: 10px;
+
+    --rel-lineHeights-3xl: 48px;
+    --rel-lineHeights-2xl: 42px;
+    --rel-lineHeights-xl: 36px;
+    --rel-lineHeights-lg: 28px;
+    --rel-lineHeights-md: 20px;
+    --rel-lineHeights-sm: 18px;
+    --rel-lineHeights-xs: 16px;
+    --rel-lineHeights-2xs: 12px;
+
+    --rel-letterSpacing-normal: 0px;
+    --rel-letterSpacing-dense: -0.2px;
+    --rel-letterSpacing-denser: -0.3px;
+    --rel-letterSpacing-densest: -0.54px;
+
+    /* ------------------ OVERLAYS ------------------ */
+    --rel-overlay-scrim: rgba(0, 0, 0, 0.5);
+
+    /* ------------------ COMPAT / LEGACY ALIASES ------------------ */
+    --rel-colors-primary-500: var(--rel-colors-blue-primary);
+    --rel-colors-gray-body: var(--rel-text-primary);
+
+    /* ------------------ SEMANTIC ALIAS LAYER — LIGHT MODE ------------------ */
+    /* Components reference these. They flip automatically in dark mode.        */
+
+    /* Backgrounds */
+    --rel-color-bg-primary: var(--rel-colors-white);
+    /* #FFFFFF */
+    --rel-color-bg-secondary: var(--rel-colors-gray-light);
+    /* #FAFAFA */
+    --rel-color-bg-tertiary: var(--rel-colors-gray-surface);
+    /* #F5F5F5 */
+    --rel-color-bg-hover: var(--rel-colors-gray-surface);
+    /* #F5F5F5 */
+    --rel-color-bg-selected: var(--rel-colors-gray-screen-bg);
+    /* #EEEEEE */
+
+    /* Text */
+    --rel-color-text-primary: var(--rel-text-primary);
+    /* #333333 */
+    --rel-color-text-secondary: var(--rel-colors-gray-disabled-text);
+    /* #9E9E9E */
+    --rel-color-text-heading: var(--rel-text-heading);
+    /* #2B2B2B */
+    --rel-color-text-inverse: var(--rel-colors-white);
+    /* #FFFFFF — pinned */
+    --rel-color-text-disabled: var(--rel-text-disabled);
+    /* #9E9E9E */
+    --rel-color-text-placeholder: var(--rel-text-placeholder);
+    /* #A9A9A9 */
+
+    /* Borders */
+    --rel-color-border-default: var(--rel-border-default);
+    /* #DDDDDD */
+    --rel-color-border-strong: var(--rel-colors-black);
+    /* #000000 */
+    --rel-color-border-focus: var(--rel-colors-blue-primary);
+    /* #0091EA */
+    --rel-color-border-divider: var(--rel-border-divider);
+    /* #BDBDBD */
+
+    /* Icons */
+    --rel-color-icon-primary: var(--rel-colors-gray-placeholder);
+    /* #A9A9A9 */
+    --rel-color-icon-hover: var(--rel-colors-black);
+    /* #000000 */
+
+    /* Brand — pinned, never flips */
+    --rel-color-brand: var(--rel-colors-green-primary);
+    /* #00F49C */
+    --rel-color-brand-hover: var(--rel-colors-green-secondary);
+    /* #06D98C */
+}
+
+
+/* =============================================================================
+   DARK MODE
+   Activate by: <html data-theme="dark">  OR  <html class="dark">
+   ============================================================================= */
+:root[data-theme="dark"],
+.dark {
+
+    /* ------------------ OPACITY (dark: white overlays) ------------------ */
+    /* CHANGED: flipped from black to white-based overlays for dark mode     */
+    --rel-opacity-5pct: rgba(255, 255, 255, 0.05);
+    --rel-opacity-10pct: rgba(255, 255, 255, 0.10);
+    --rel-opacity-15pct: rgba(255, 255, 255, 0.15);
+    --rel-opacity-20pct: rgba(255, 255, 255, 0.20);
+    --rel-opacity-25pct: rgba(255, 255, 255, 0.25);
+    --rel-opacity-30pct: rgba(255, 255, 255, 0.30);
+    --rel-opacity-50pct: rgba(255, 255, 255, 0.50);
+
+    /* ------------------ PRIMITIVE OVERRIDES — Figma neutral scale --------- */
+    /* CHANGED: replaced blue-tinted grays with Figma's pure neutral scale    */
+    --rel-colors-white: #1A1A1A;
+    /* was #0f1115 (blue-tinted) */
+    --rel-colors-black: #F5F5F5;
+    /* was #e6e8ee (blue-tinted) */
+
+    --rel-colors-gray-primary: #F5F5F5;
+    /* was #e6e8ee */
+    --rel-colors-gray-heading: #D4D4D4;
+    /* was #f5f7ff */
+    --rel-colors-gray-placeholder: #A3A3A3;
+    /* was #8b95a7 */
+    --rel-colors-gray-dark-placeholder: #737373;
+    /* was #707a8c */
+    --rel-colors-gray-disabled-text: #737373;
+    /* was #667085 */
+
+    --rel-colors-gray-border: #404040;
+    /* was #2a3241 */
+    --rel-colors-gray-divider: #525252;
+    /* was #2a3241 */
+    --rel-colors-gray-tab-border: #404040;
+    /* was #323b4b */
+
+    --rel-colors-gray-screen-bg: #262626;
+    /* was #0f1115 */
+    --rel-colors-gray-surface: #2E2E2E;
+    /* was #141821 */
+    --rel-colors-gray-light: #1A1A1A;
+    /* was #1a1f2b */
+    --rel-colors-gray-warm: #1A1A1A;
+    /* was #161b22 — no Figma equivalent, using bg-light */
+    --rel-colors-gray-toast-bg: #525252;
+    /* was #1d2430 */
+
+    /* ------------------ SEMANTIC GRAYSCALE ALIASES (dark) ----------------- */
+    --rel-gray-text-primary: #F5F5F5;
+    --rel-gray-text-heading: #D4D4D4;
+    --rel-gray-text-placeholder: #A3A3A3;
+    --rel-gray-disabled-text: #737373;
+    --rel-gray-bg-light: #1A1A1A;
+    --rel-gray-bg-screen: #262626;
+    --rel-gray-bg-surface: #2E2E2E;
+    --rel-gray-bg-toast: #525252;
+    --rel-gray-border: #404040;
+    --rel-gray-divider-default: #525252;
+
+    /* ------------------ STATUS BACKGROUNDS (DARK) ------------------------- */
+    /* Error: adopt Figma dark values                                          */
+    --rel-colors-red-bg-alert: #FFE8EB;
+    /* CHANGED: was #2a1116 — Figma keeps light */
+    --rel-colors-red-light: #FFDEDE;
+    /* CHANGED: was #3a151c — Figma keeps light */
+    --rel-colors-red-secondary: #FF5252;
+    /* CHANGED: dark surface-default override   */
+
+    /* Warning: Figma has NO dark overrides — keep light values */
+    --rel-colors-orange-bg-light: #FFE9D9;
+    /* CHANGED: was #2a1a10 — Figma unchanged   */
+    --rel-colors-orange-bg-counter: #FFF3E0;
+    /* CHANGED: was #241a10 — Figma unchanged   */
+
+    /* Success: no Figma dark override for surface-light */
+    --rel-colors-green-bg-light: #E2FEEE;
+    /* was #0f231a — matches Figma light value  */
+
+    /* Info: no Figma semantic token — preserved as-is */
+    --rel-colors-blue-bg: #0f1e2c;
+    --rel-colors-blue-light: #1b6ea8;
+
+    /* ------------------ SEMANTIC STATUS ALIASES (dark) -------------------- */
+    /* Error dark overrides from semantic-vars.css */
+    --rel-error-surface-default: #FF5252;
+    /* FIXED: was not overridden in dark */
+    --rel-error-surface-light: #FFDEDE;
+    /* FIXED: was #2a1116 dark tint      */
+
+    /* Warning: unchanged in dark (Figma has no dark overrides) */
+    /* --rel-warning-* tokens stay at light values — no override needed */
+
+    /* Success: no dark overrides in Figma */
+    /* --rel-success-* tokens stay at light values — no override needed */
+
+    /* ------------------ SEMANTIC TEXT (dark) ------------------------------ */
+    --rel-text-primary: var(--rel-colors-gray-primary);
+    --rel-text-heading: var(--rel-colors-gray-heading);
+    --rel-text-placeholder: var(--rel-colors-gray-placeholder);
+    --rel-text-dark-placeholder: var(--rel-colors-gray-dark-placeholder);
+    --rel-text-disabled: var(--rel-colors-gray-disabled-text);
+    --rel-text-error-small: var(--rel-colors-red-secondary);
+    /* now #FF5252 in dark */
+
+    /* ------------------ SEMANTIC BORDERS (dark) --------------------------- */
+    --rel-border-default: var(--rel-colors-gray-border);
+    --rel-border-divider: var(--rel-colors-gray-divider);
+    --rel-border-tab: var(--rel-colors-gray-tab-border);
+
+    /* ------------------ SEMANTIC BACKGROUNDS (dark) ----------------------- */
+    --rel-background-error: var(--rel-colors-red-bg-alert);
+    --rel-background-error-light: var(--rel-colors-red-light);
+    --rel-background-warning: var(--rel-colors-orange-bg-light);
+    --rel-background-warning-counter: var(--rel-colors-orange-bg-counter);
+    --rel-background-success: var(--rel-colors-green-bg-light);
+    --rel-background-info: var(--rel-colors-blue-bg);
+    --rel-background-info-accent: var(--rel-colors-blue-light);
+
+    /* ------------------ SEMANTIC SURFACES (dark) -------------------------- */
+    --rel-surface-secondary: var(--rel-colors-gray-light);
+    --rel-surface-screen: var(--rel-colors-gray-screen-bg);
+    --rel-surface-surface: var(--rel-colors-gray-surface);
+    --rel-surface-warm: var(--rel-colors-gray-warm);
+    --rel-surface-toast: var(--rel-colors-gray-toast-bg);
+
+    /* ------------------ SHADOWS (dark-tuned) ------------------------------ */
+    --rel-shadows-shadow-100: 0px 1px 2px rgba(0, 0, 0, 0.6);
+    --rel-shadows-shadow-200: 0px 2px 6px rgba(0, 0, 0, 0.6);
+    --rel-shadows-shadow-300: 0px 4px 10px rgba(0, 0, 0, 0.65);
+    --rel-shadows-shadow-400: 0px 6px 16px rgba(0, 0, 0, 0.7);
+    --rel-shadows-shadow-500: 0px 10px 24px rgba(0, 0, 0, 0.75);
+
+    /* ------------------ OVERLAYS (dark) ----------------------------------- */
+    --rel-overlay-scrim: rgba(0, 0, 0, 0.6);
+
+    /* ------------------ COMPAT / LEGACY (dark) ---------------------------- */
+    --rel-colors-primary-500: var(--rel-colors-blue-primary);
+    --rel-colors-gray-body: var(--rel-text-primary);
+
+    /* ------------------ SEMANTIC ALIAS LAYER — DARK OVERRIDES ------------- */
+    /* Sourced from Figma neutral dark scale                                    */
+
+    /* Backgrounds */
+    --rel-color-bg-primary: #1A1A1A;
+    /* dark-50  — was same */
+    --rel-color-bg-secondary: #262626;
+    /* dark-100 — was same */
+    --rel-color-bg-tertiary: #2E2E2E;
+    /* dark-200 — was same */
+    --rel-color-bg-hover: #2E2E2E;
+    /* dark-200 — was same */
+    --rel-color-bg-selected: #404040;
+    /* dark-300 — was same */
+
+    /* Text */
+    --rel-color-text-primary: #F5F5F5;
+    /* dark-900 */
+    --rel-color-text-secondary: #D4D4D4;
+    /* dark-700 */
+    --rel-color-text-heading: #F5F5F5;
+    /* dark-900 */
+    --rel-color-text-inverse: #212121;
+    /* gray-900 */
+    --rel-color-text-disabled: #737373;
+    /* dark-500 */
+    --rel-color-text-placeholder: #737373;
+    /* dark-500 */
+
+    /* Borders */
+    --rel-color-border-default: #404040;
+    /* dark-300 */
+    --rel-color-border-strong: #D4D4D4;
+    /* dark-700 */
+    --rel-color-border-focus: #D4D4D4;
+    /* dark-700 */
+    --rel-color-border-divider: #404040;
+    /* dark-300 */
+
+    /* Icons */
+    --rel-color-icon-primary: #A3A3A3;
+    /* dark-600 */
+    --rel-color-icon-hover: #F5F5F5;
+    /* dark-900 */
+
+    /* Brand — intentionally pinned, no dark override */
+    /* --rel-color-brand and --rel-color-brand-hover stay green in dark mode  */
+}