@reliability-design/web 1.1.1 → 1.3.0

package/dist/styles/vars.css

@@ -1,346 +1,346 @@
-/* AUTO-GENERATED from tokens/*.json — DO NOT EDIT */
-/* To regenerate: npm run sync-tokens -w @reliability-design/figma-pipeline */
-
-/* ------------------ THEME TRANSITIONS ------------------ */
-/* Smooth transitions for theme switching (light/dark) */
-* {
-  transition-property: color, background-color, border-color, box-shadow, fill, stroke;
-  transition-duration: 0.2s;
-  transition-timing-function: ease;
-}
-
-/* Disable theme transitions for reduced motion */
-@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;
-
-  /* ------------------ 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: #E8F5E8;
-  --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 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);
-  --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);
-
-  /* ------------------ NEW ADDITIONS / COMPAT TOKENS ------------------ */
-  /* Keep expected/legacy token names working across components */
-  --rel-colors-primary-500: var(--rel-colors-blue-primary);
-  --rel-colors-gray-body: var(--rel-text-primary);
-}
-
-/* !!MANUAL_START!! */
-
-/* ------------------ SEMANTIC ALIAS LAYER — LIGHT MODE DEFAULTS ------------------
-   Components should reference these tokens. They automatically flip in dark mode.
-   Each must resolve to the same effective value as the primitive it wraps.        */
-:root {
-
-  /* Backgrounds */
-  --rel-color-bg-primary: var(--rel-colors-white);            /* #FFFFFF — Main page/card surface */
-  --rel-color-bg-secondary: var(--rel-colors-gray-light);     /* #FAFAFA — Subtle surface lift */
-  --rel-color-bg-tertiary: var(--rel-colors-gray-surface);    /* #F5F5F5 — Input fill, code bg */
-  --rel-color-bg-hover: var(--rel-colors-gray-surface);       /* #F5F5F5 — Hover state */
-  --rel-color-bg-selected: var(--rel-colors-gray-screen-bg);  /* #EEEEEE — Selected/active bg */
-
-  /* Text */
-  --rel-color-text-primary: var(--rel-text-primary);          /* #333333 — Body text */
-  --rel-color-text-secondary: var(--rel-colors-gray-disabled-text);/* #9E9E9E — Muted text */
-  --rel-color-text-heading: var(--rel-text-heading);          /* #2B2B2B — Headings */
-  --rel-color-text-inverse: var(--rel-colors-white);          /* #FFFFFF — Text on dark/colored fills — PINNED */
-  --rel-color-text-disabled: var(--rel-text-disabled);        /* #9E9E9E — Disabled text */
-  --rel-color-text-placeholder: var(--rel-text-placeholder);  /* #A9A9A9 — Input placeholder */
-
-  /* Borders */
-  --rel-color-border-default: var(--rel-border-default);      /* #DDDDDD — Default border */
-  --rel-color-border-strong: var(--rel-colors-black);         /* #000000 — High-contrast border (secondary buttons) */
-  --rel-color-border-focus: var(--rel-colors-blue-primary);   /* #0091EA — Focus ring */
-  --rel-color-border-divider: var(--rel-border-divider);      /* #BDBDBD — Divider line */
-
-  /* Icons */
-  --rel-color-icon-primary: var(--rel-colors-gray-placeholder);/* #A9A9A9 — Default icon */
-  --rel-color-icon-hover: var(--rel-colors-black);            /* #000000 — Hovered icon */
-
-  /* Brand */
-  --rel-color-brand: var(--rel-colors-green-primary);         /* #00F49C — Brand accent — pinned, never flips */
-  --rel-color-brand-hover: var(--rel-colors-green-secondary); /* #06D98C — Brand hover — pinned */
-}
-
-/* ------------------ DARK MODE ------------------ */
-/* Enable by setting: <html data-theme="dark"> or adding class="dark" */
-:root[data-theme="dark"], .dark {
-
-  /* ------------------ COLORS (OVERRIDES) ------------------ */
-  /* Inverted base colors for dark theme */
-  --rel-colors-white: #0f1115;
-  --rel-colors-black: #e6e8ee;
-
-  /* Text colors - refined for better readability */
-  --rel-colors-gray-primary: #e6e8ee;
-  --rel-colors-gray-heading: #f5f7ff;
-  --rel-colors-gray-placeholder: #8b95a7;
-  --rel-colors-gray-dark-placeholder: #707a8c;
-  --rel-colors-gray-disabled-text: #667085;
-
-  /* Border & divider colors - subtle but clear */
-  --rel-colors-gray-border: #2a3241;
-  --rel-colors-gray-divider: #2a3241;
-  --rel-colors-gray-tab-border: #323b4b;
-
-  /* Surface hierarchy - screen < surface < secondary, warm, toast */
-  --rel-colors-gray-screen-bg: #0f1115;
-  --rel-colors-gray-surface: #141821;
-  --rel-colors-gray-light: #1a1f2b;
-  --rel-colors-gray-warm: #161b22;
-  --rel-colors-gray-toast-bg: #1d2430;
-
-
-  /* ------------------ STATUS BACKGROUNDS (DARK TINTS) ------------------ */
-  --rel-colors-red-bg-alert: #2a1116;
-  --rel-colors-red-light: #3a151c;
-
-  --rel-colors-orange-bg-light: #2a1a10;
-  --rel-colors-orange-bg-counter: #241a10;
-
-  --rel-colors-green-bg-light: #0f231a;
-
-  --rel-colors-blue-bg: #0f1e2c;
-  --rel-colors-blue-light: #1b6ea8;
-
-  /* ------------------ SEMANTIC TEXT (EXPLICIT) ------------------ */
-  --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);
-
-  /* ------------------ SEMANTIC BORDERS (EXPLICIT) ------------------ */
-  --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 ------------------ */
-  --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 (EXPLICIT) ------------------ */
-  --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 ------------------ */
-  --rel-overlay-scrim: rgba(0, 0, 0, 0.6);
-
-  /* ------------------ NEW ADDITIONS / COMPAT TOKENS ------------------ */
-  /* Keep expected/legacy token names working across components */
-  --rel-colors-primary-500: var(--rel-colors-blue-primary);
-  --rel-colors-gray-body: var(--rel-text-primary);
-
-  /* ------------------ SEMANTIC ALIAS LAYER — DARK MODE OVERRIDES ------------------
-     Values sourced from tokens/semantic-colors.json § dark */
-
-  /* Backgrounds */
-  --rel-color-bg-primary: #1A1A1A;            /* --color-dark-50 */
-  --rel-color-bg-secondary: #262626;          /* --color-dark-100 */
-  --rel-color-bg-tertiary: #2E2E2E;           /* --color-dark-200 */
-  --rel-color-bg-hover: #2E2E2E;              /* --color-dark-200 */
-  --rel-color-bg-selected: #404040;           /* --color-dark-300 */
-
-  /* Text */
-  --rel-color-text-primary: #F5F5F5;          /* --color-dark-900 */
-  --rel-color-text-secondary: #D4D4D4;        /* --color-dark-700 */
-  --rel-color-text-heading: #F5F5F5;          /* --color-dark-900 */
-  --rel-color-text-inverse: #212121;          /* --color-gray-900 */
-  --rel-color-text-disabled: #737373;         /* --color-dark-500 */
-  --rel-color-text-placeholder: #737373;      /* --color-dark-500 */
-
-  /* Borders */
-  --rel-color-border-default: #404040;        /* --color-dark-300 */
-  --rel-color-border-strong: #D4D4D4;         /* --color-dark-700 */
-  --rel-color-border-focus: #D4D4D4;          /* --color-dark-700 */
-  --rel-color-border-divider: #404040;        /* --color-dark-300 */
-
-  /* Icons */
-  --rel-color-icon-primary: #A3A3A3;          /* --color-dark-600 */
-  --rel-color-icon-hover: #F5F5F5;            /* --color-dark-900 */
-}
+/* AUTO-GENERATED from tokens/*.json — DO NOT EDIT */
+/* To regenerate: npm run sync-tokens -w @reliability-design/figma-pipeline */
+
+/* ------------------ THEME TRANSITIONS ------------------ */
+/* Smooth transitions for theme switching (light/dark) */
+* {
+  transition-property: color, background-color, border-color, box-shadow, fill, stroke;
+  transition-duration: 0.2s;
+  transition-timing-function: ease;
+}
+
+/* Disable theme transitions for reduced motion */
+@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;
+
+  /* ------------------ 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: #E8F5E8;
+  --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 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);
+  --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);
+
+  /* ------------------ NEW ADDITIONS / COMPAT TOKENS ------------------ */
+  /* Keep expected/legacy token names working across components */
+  --rel-colors-primary-500: var(--rel-colors-blue-primary);
+  --rel-colors-gray-body: var(--rel-text-primary);
+}
+
+/* !!MANUAL_START!! */
+
+/* ------------------ SEMANTIC ALIAS LAYER — LIGHT MODE DEFAULTS ------------------
+   Components should reference these tokens. They automatically flip in dark mode.
+   Each must resolve to the same effective value as the primitive it wraps.        */
+:root {
+
+  /* Backgrounds */
+  --rel-color-bg-primary: var(--rel-colors-white);            /* #FFFFFF — Main page/card surface */
+  --rel-color-bg-secondary: var(--rel-colors-gray-light);     /* #FAFAFA — Subtle surface lift */
+  --rel-color-bg-tertiary: var(--rel-colors-gray-surface);    /* #F5F5F5 — Input fill, code bg */
+  --rel-color-bg-hover: var(--rel-colors-gray-surface);       /* #F5F5F5 — Hover state */
+  --rel-color-bg-selected: var(--rel-colors-gray-screen-bg);  /* #EEEEEE — Selected/active bg */
+
+  /* Text */
+  --rel-color-text-primary: var(--rel-text-primary);          /* #333333 — Body text */
+  --rel-color-text-secondary: var(--rel-colors-gray-disabled-text);/* #9E9E9E — Muted text */
+  --rel-color-text-heading: var(--rel-text-heading);          /* #2B2B2B — Headings */
+  --rel-color-text-inverse: var(--rel-colors-white);          /* #FFFFFF — Text on dark/colored fills — PINNED */
+  --rel-color-text-disabled: var(--rel-text-disabled);        /* #9E9E9E — Disabled text */
+  --rel-color-text-placeholder: var(--rel-text-placeholder);  /* #A9A9A9 — Input placeholder */
+
+  /* Borders */
+  --rel-color-border-default: var(--rel-border-default);      /* #DDDDDD — Default border */
+  --rel-color-border-strong: var(--rel-colors-black);         /* #000000 — High-contrast border (secondary buttons) */
+  --rel-color-border-focus: var(--rel-colors-blue-primary);   /* #0091EA — Focus ring */
+  --rel-color-border-divider: var(--rel-border-divider);      /* #BDBDBD — Divider line */
+
+  /* Icons */
+  --rel-color-icon-primary: var(--rel-colors-gray-placeholder);/* #A9A9A9 — Default icon */
+  --rel-color-icon-hover: var(--rel-colors-black);            /* #000000 — Hovered icon */
+
+  /* Brand */
+  --rel-color-brand: var(--rel-colors-green-primary);         /* #00F49C — Brand accent — pinned, never flips */
+  --rel-color-brand-hover: var(--rel-colors-green-secondary); /* #06D98C — Brand hover — pinned */
+}
+
+/* ------------------ DARK MODE ------------------ */
+/* Enable by setting: <html data-theme="dark"> or adding class="dark" */
+:root[data-theme="dark"], .dark {
+
+  /* ------------------ COLORS (OVERRIDES) ------------------ */
+  /* Inverted base colors for dark theme */
+  --rel-colors-white: #0f1115;
+  --rel-colors-black: #e6e8ee;
+
+  /* Text colors - refined for better readability */
+  --rel-colors-gray-primary: #e6e8ee;
+  --rel-colors-gray-heading: #f5f7ff;
+  --rel-colors-gray-placeholder: #8b95a7;
+  --rel-colors-gray-dark-placeholder: #707a8c;
+  --rel-colors-gray-disabled-text: #667085;
+
+  /* Border & divider colors - subtle but clear */
+  --rel-colors-gray-border: #2a3241;
+  --rel-colors-gray-divider: #2a3241;
+  --rel-colors-gray-tab-border: #323b4b;
+
+  /* Surface hierarchy - screen < surface < secondary, warm, toast */
+  --rel-colors-gray-screen-bg: #0f1115;
+  --rel-colors-gray-surface: #141821;
+  --rel-colors-gray-light: #1a1f2b;
+  --rel-colors-gray-warm: #161b22;
+  --rel-colors-gray-toast-bg: #1d2430;
+
+
+  /* ------------------ STATUS BACKGROUNDS (DARK TINTS) ------------------ */
+  --rel-colors-red-bg-alert: #2a1116;
+  --rel-colors-red-light: #3a151c;
+
+  --rel-colors-orange-bg-light: #2a1a10;
+  --rel-colors-orange-bg-counter: #241a10;
+
+  --rel-colors-green-bg-light: #0f231a;
+
+  --rel-colors-blue-bg: #0f1e2c;
+  --rel-colors-blue-light: #1b6ea8;
+
+  /* ------------------ SEMANTIC TEXT (EXPLICIT) ------------------ */
+  --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);
+
+  /* ------------------ SEMANTIC BORDERS (EXPLICIT) ------------------ */
+  --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 ------------------ */
+  --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 (EXPLICIT) ------------------ */
+  --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 ------------------ */
+  --rel-overlay-scrim: rgba(0, 0, 0, 0.6);
+
+  /* ------------------ NEW ADDITIONS / COMPAT TOKENS ------------------ */
+  /* Keep expected/legacy token names working across components */
+  --rel-colors-primary-500: var(--rel-colors-blue-primary);
+  --rel-colors-gray-body: var(--rel-text-primary);
+
+  /* ------------------ SEMANTIC ALIAS LAYER — DARK MODE OVERRIDES ------------------
+     Values sourced from tokens/semantic-colors.json § dark */
+
+  /* Backgrounds */
+  --rel-color-bg-primary: #1A1A1A;            /* --color-dark-50 */
+  --rel-color-bg-secondary: #262626;          /* --color-dark-100 */
+  --rel-color-bg-tertiary: #2E2E2E;           /* --color-dark-200 */
+  --rel-color-bg-hover: #2E2E2E;              /* --color-dark-200 */
+  --rel-color-bg-selected: #404040;           /* --color-dark-300 */
+
+  /* Text */
+  --rel-color-text-primary: #F5F5F5;          /* --color-dark-900 */
+  --rel-color-text-secondary: #D4D4D4;        /* --color-dark-700 */
+  --rel-color-text-heading: #F5F5F5;          /* --color-dark-900 */
+  --rel-color-text-inverse: #212121;          /* --color-gray-900 */
+  --rel-color-text-disabled: #737373;         /* --color-dark-500 */
+  --rel-color-text-placeholder: #737373;      /* --color-dark-500 */
+
+  /* Borders */
+  --rel-color-border-default: #404040;        /* --color-dark-300 */
+  --rel-color-border-strong: #D4D4D4;         /* --color-dark-700 */
+  --rel-color-border-focus: #D4D4D4;          /* --color-dark-700 */
+  --rel-color-border-divider: #404040;        /* --color-dark-300 */
+
+  /* Icons */
+  --rel-color-icon-primary: #A3A3A3;          /* --color-dark-600 */
+  --rel-color-icon-hover: #F5F5F5;            /* --color-dark-900 */
+}