npm - @foxeltech/angular-ui - Versions diffs - 0.4.0 → 0.7.75 - Mend

@foxeltech/angular-ui 0.4.0 → 0.7.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (189) hide show

package/theme.css CHANGED Viewed

@@ -1,73 +1,646 @@
-.light_theme {
-  --gradient-primary-start: 124 58 237;
-  --gradient-primary-end: 79 142 247;
-  --gradient-success-start: 16 185 129;
-  --gradient-success-end: 45 212 191;
-  --bg-primary: 255 255 255;
-  --bg-canvas: 245 247 250;
-  --primary: 124 58 237;
-  --success: 15 140 96;
-  --warning: 255 199 0;
-  --critical: 254 4 83;
-  --danger: 255 122 0;
-  --discovery: 156 129 255;
-  --information: 23 127 240;
-  --text-primary: 36 45 66;
-  --text-secondary: 97 101 108;
-  --border-default: 236 236 236;
-  --text-placeholder:148 151 156;
-  --step-bg: 12 14 18;
-  --text-link-primary: 29 122 252;
-  --bg-primary-hover: 247 247 247;
-  --text-focus: 255 255 255;
-  --bg-primary-neutral: 12 14 18;
-  --text-selected-primary: 124 58 237;
-  --button-default: 34 38 47;
-  --text-inverse: 255 255 255;
-  --bg-error-bold: 215 0 68;
-  --text-error: 215 0 68;
-  --border-interactive: 124 58 237;
-  --border-selected: 124 58 237;
-  --button-primary: 124 58 237;
-  --border-strong: 206 207 210;
-  --border-secondary-hover: 0 199 205;
-  --bg-secondary-hover: 6 59 70;
+/*
+ * OgeniumDashboards theme tokens — FILE SINH TỰ ĐỘNG bởi
+ * tools/build-theme-css.mjs từ tools/generated/og-themes.css. ĐỪNG SỬA TAY:
+ *   node tools/extract-og-tokens.mjs && node tools/build-theme-css.mjs
+ *
+ * Cơ chế: 6 theme switch bằng attribute data-og-theme trên <html>
+ * (ThemeService.setTheme). Màu = RGB triplet để rgb(var(--x)) + alpha
+ * modifier (bg-critical/10) và FxUtils.convertColorFromVariable hoạt động.
+ *
+ * :root = porcelain (default). Legacy alias (--bg-primary, --primary, …)
+ * khai báo qua var(--og-*) nên tự theo theme; sẽ gỡ sau campaign V2.
+ * Severity: dùng bộ tone LEGACY vivid (--og-tone-*) theo nhóm light/dark —
+ * quyết định anh Tú 28/08, palette severity của design V2 quá trầm.
+ */
+:root {
+  /* structural — giống nhau mọi theme */
+  --og-fs-2xs: 10.5px;
+  --og-fs-xs: 11.5px;
+  --og-fs-sm: 12.5px;
+  --og-fs-md: 13.5px;
+  --og-fs-lg: 15px;
+  --og-fs-xl: 17px;
+  --og-fs-2xl: 22px;
+  --og-fs-3xl: 26px;
+  --og-fs-4xl: 32px;
+  --og-space-1: 4px;
+  --og-space-2: 8px;
+  --og-space-3: 8px;
+  --og-space-4: 10px;
+  --og-space-5: 12px;
+  --og-space-6: 13px;
+  --og-space-7: 15px;
+  --og-space-8: 18px;
+  --og-track-h: 5px;
+  --og-rule: 1px;
+  --og-tracking-label: 0.08em;
+  /* porcelain (light, DEFAULT) */
+  --og-page-bg: 242 242 241; /* #f2f2f1 */
+  --og-surface: 255 255 255; /* #ffffff */
+  --og-surface-raised: 255 255 255; /* #ffffff */
+  --og-surface-sunken: 251 251 250; /* #fbfbfa */
+  --og-border: 232 232 232; /* #e8e8e8 */
+  --og-border-subtle: 242 243 243; /* #f2f3f3 */
+  --og-border-strong: 38 40 44; /* #26282c */
+  --og-text: 38 40 44; /* #26282c */
+  --og-text-body: 60 63 68; /* #3c3f44 */
+  --og-text-muted: 107 112 117; /* #6b7075 */
+  --og-text-faint: 155 160 166; /* #9ba0a6 */
+  --og-accent: 74 125 189; /* #4a7dbd */
+  --og-accent-fg: 64 105 156; /* #40699c */
+  --og-accent-contrast: 255 255 255; /* #ffffff */
+  --og-accent-soft-bg: 231 238 247; /* #e7eef7 */
+  --og-accent-soft-fg: 53 97 156; /* #35619c */
+  --og-positive: 63 125 85; /* #3f7d55 */
+  --og-positive-soft-bg: 230 241 234; /* #e6f1ea */
+  --og-negative: 192 69 47; /* #c0452f */
+  --og-negative-soft-bg: 251 234 231; /* #fbeae7 */
+  --og-warning: 168 116 31; /* #a8741f */
+  --og-warning-soft-bg: 251 241 222; /* #fbf1de */
+  --og-neutral-soft-bg: 238 240 242; /* #eef0f2 */
+  --og-neutral-soft-fg: 75 80 87; /* #4b5057 */
+  --og-track: 236 236 236; /* #ececec */
+  --og-radius-frame: 10px;
+  --og-radius-card: 9px;
+  --og-radius-control: 7px;
+  --og-radius-pill: 999px;
+  --og-font-body: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-display: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-mono: 'JetBrains Mono',ui-monospace,monospace;
+  --og-font-prose: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-figure: 'JetBrains Mono',ui-monospace,monospace;
+  /* derived (script-generated, KHÔNG có trong design gốc) */
+  --og-derived-critical: 169 0 42; /* #a9002a */
+  --og-derived-critical-soft-bg: 239 194 191; /* #efc2bf */
+  --og-derived-gradient-accent-end: 98 150 215; /* #6296d7 */
+  --og-derived-gradient-positive-end: 87 149 108; /* #57956c */
+  --shadow-color: 0 0 0;
+  /* severity tones — bộ LEGACY (vivid), không lấy từ design V2 */
+  --og-tone-success: 15 140 96;
+  --og-tone-warning: 255 199 0;
+  --og-tone-critical: 254 4 83;
+  --og-tone-danger: 255 122 0;
+  --og-tone-information: 23 127 240;
+  --og-tone-discovery: 156 129 255;
+  /* severity ramp cho CHART — literal đo trên demo, không phải token design */
+  --og-sev-critical: 127 29 29; /* #7f1d1d */
+  --og-sev-danger: 220 38 38; /* #dc2626 */
+  --og-sev-warning: 245 158 11; /* #f59e0b */
+  --og-sev-success: 22 163 74; /* #16a34a */
+  /* ---- LEGACY ALIASES (@deprecated — gỡ khi kết thúc campaign V2) ----
+     Các biến cũ trỏ vào --og-* qua var() nên chỉ cần khai báo MỘT lần:
+     var() resolve tại element sử dụng, giá trị og đúng theo theme đang active. */
+  --gradient-primary-start: var(--og-accent);
+  --gradient-primary-end: var(--og-derived-gradient-accent-end);
+  --gradient-success-start: var(--og-positive);
+  --gradient-success-end: var(--og-derived-gradient-positive-end);
+  --bg-primary: var(--og-surface);
+  --bg-canvas: var(--og-page-bg);
+  --primary: var(--og-accent);
+  --success: var(--og-tone-success);
+  --warning: var(--og-tone-warning);
+  --critical: var(--og-tone-critical);
+  --danger: var(--og-tone-danger);
+  --discovery: var(--og-tone-discovery);
+  --information: var(--og-tone-information);
+  --text-primary: var(--og-text);
+  --text-secondary: var(--og-text-muted);
+  --border-default: var(--og-border);
+  --text-placeholder: var(--og-text-faint);
+  --step-bg: var(--og-text);
+  --text-link-primary: var(--og-accent-fg);
+  --bg-primary-hover: var(--og-surface-sunken);
+  --text-focus: var(--og-accent-contrast);
+  --bg-primary-neutral: var(--og-border-strong);
+  --text-selected-primary: var(--og-accent-fg);
+  --button-default: var(--og-text);
+  --text-inverse: var(--og-surface);
+  --bg-error-bold: var(--og-negative);
+  --text-error: var(--og-negative);
+  --border-interactive: var(--og-accent);
+  --border-selected: var(--og-accent);
+  --button-primary: var(--og-accent);
+  --border-strong: var(--og-border-strong);
+  --border-secondary-hover: var(--og-accent);
+  --bg-secondary-hover: var(--og-neutral-soft-bg);
+}
+:root[data-og-theme='porcelain'] {
+  --og-page-bg: 242 242 241; /* #f2f2f1 */
+  --og-surface: 255 255 255; /* #ffffff */
+  --og-surface-raised: 255 255 255; /* #ffffff */
+  --og-surface-sunken: 251 251 250; /* #fbfbfa */
+  --og-border: 232 232 232; /* #e8e8e8 */
+  --og-border-subtle: 242 243 243; /* #f2f3f3 */
+  --og-border-strong: 38 40 44; /* #26282c */
+  --og-text: 38 40 44; /* #26282c */
+  --og-text-body: 60 63 68; /* #3c3f44 */
+  --og-text-muted: 107 112 117; /* #6b7075 */
+  --og-text-faint: 155 160 166; /* #9ba0a6 */
+  --og-accent: 74 125 189; /* #4a7dbd */
+  --og-accent-fg: 64 105 156; /* #40699c */
+  --og-accent-contrast: 255 255 255; /* #ffffff */
+  --og-accent-soft-bg: 231 238 247; /* #e7eef7 */
+  --og-accent-soft-fg: 53 97 156; /* #35619c */
+  --og-positive: 63 125 85; /* #3f7d55 */
+  --og-positive-soft-bg: 230 241 234; /* #e6f1ea */
+  --og-negative: 192 69 47; /* #c0452f */
+  --og-negative-soft-bg: 251 234 231; /* #fbeae7 */
+  --og-warning: 168 116 31; /* #a8741f */
+  --og-warning-soft-bg: 251 241 222; /* #fbf1de */
+  --og-neutral-soft-bg: 238 240 242; /* #eef0f2 */
+  --og-neutral-soft-fg: 75 80 87; /* #4b5057 */
+  --og-track: 236 236 236; /* #ececec */
+  --og-radius-frame: 10px;
+  --og-radius-card: 9px;
+  --og-radius-control: 7px;
+  --og-radius-pill: 999px;
+  --og-font-body: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-display: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-mono: 'JetBrains Mono',ui-monospace,monospace;
+  --og-font-prose: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-figure: 'JetBrains Mono',ui-monospace,monospace;
+  /* derived (script-generated, KHÔNG có trong design gốc) */
+  --og-derived-critical: 169 0 42; /* #a9002a */
+  --og-derived-critical-soft-bg: 239 194 191; /* #efc2bf */
+  --og-derived-gradient-accent-end: 98 150 215; /* #6296d7 */
+  --og-derived-gradient-positive-end: 87 149 108; /* #57956c */
   --shadow-color: 0 0 0;
+  /* severity tones — bộ LEGACY (vivid), không lấy từ design V2 */
+  --og-tone-success: 15 140 96;
+  --og-tone-warning: 255 199 0;
+  --og-tone-critical: 254 4 83;
+  --og-tone-danger: 255 122 0;
+  --og-tone-information: 23 127 240;
+  --og-tone-discovery: 156 129 255;
+  /* severity ramp cho CHART — literal đo trên demo, không phải token design */
+  --og-sev-critical: 127 29 29; /* #7f1d1d */
+  --og-sev-danger: 220 38 38; /* #dc2626 */
+  --og-sev-warning: 245 158 11; /* #f59e0b */
+  --og-sev-success: 22 163 74; /* #16a34a */
 }
-:root {
-  --gradient-primary-start: 124 58 237;
-  --gradient-primary-end: 79 142 247;
-  --gradient-success-start: 16 185 129;
-  --gradient-success-end: 45 212 191;
-  --bg-primary: 12 14 18;
-  --bg-canvas: 8 9 12;
-  --primary: 124 58 237;
-  --success: 76 175 80;
-  --warning: 255 188 59;
-  --critical: 236 25 56;
-  --danger: 249 133 7;
-  --discovery: 119 113 227;
-  --information: 62 175 240;
-  --text-primary: 247 247 247;
-  --text-secondary: 133 136 142;
-  --border-default: 55 58 65;
-  --text-placeholder: 133 136 142;
-  --step-bg: 255 255 255;
-  --text-link-primary: 87 157 255;
-  --bg-primary-hover: 34 38 47;
-  --text-focus: 255 255 255;
-  --bg-primary-neutral: 12 14 18;
-  --text-selected-primary: 124 58 237;
-  --button-default: 236 236 236;
-  --text-inverse: 12 14 18;
-  --bg-error-bold: 215 0 68;
-  --text-error: 255 0 81;
-  --border-interactive: 124 58 237;
-  --border-selected: 124 58 237;
-  --button-primary: 124 58 237;
-  --border-strong: 97 101 108;
-  --border-secondary-hover: 0 199 205;
-  --bg-secondary-hover: 6 59 70;
+:root[data-og-theme='charcoal'] {
+  --og-page-bg: 26 24 17; /* #1a1811 */
+  --og-surface: 34 31 22; /* #221f16 */
+  --og-surface-raised: 42 38 25; /* #2a2619 */
+  --og-surface-sunken: 23 21 9; /* #171509 */
+  --og-border: 58 54 38; /* #3a3626 */
+  --og-border-subtle: 44 41 25; /* #2c2919 */
+  --og-border-strong: 76 71 50; /* #4c4732 */
+  --og-text: 226 221 203; /* #e2ddcb */
+  --og-text-body: 193 188 166; /* #c1bca6 */
+  --og-text-muted: 147 141 118; /* #938d76 */
+  --og-text-faint: 107 102 83; /* #6b6653 */
+  --og-accent: 143 200 102; /* #8fc866 */
+  --og-accent-fg: 164 217 126; /* #a4d97e */
+  --og-accent-contrast: 23 21 9; /* #171509 */
+  --og-accent-soft-bg: 38 48 26; /* #26301a */
+  --og-accent-soft-fg: 164 217 126; /* #a4d97e */
+  --og-positive: 132 200 98; /* #84c862 */
+  --og-positive-soft-bg: 34 48 15; /* #22300f */
+  --og-negative: 229 130 142; /* #e5828e */
+  --og-negative-soft-bg: 63 30 36; /* #3f1e24 */
+  --og-warning: 214 178 90; /* #d6b25a */
+  --og-warning-soft-bg: 51 42 18; /* #332a12 */
+  --og-neutral-soft-bg: 42 39 25; /* #2a2719 */
+  --og-neutral-soft-fg: 164 158 134; /* #a49e86 */
+  --og-track: 48 44 30; /* #302c1e */
+  --og-radius-frame: 10px;
+  --og-radius-card: 9px;
+  --og-radius-control: 7px;
+  --og-radius-pill: 999px;
+  --og-font-body: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-display: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-mono: 'JetBrains Mono',ui-monospace,monospace;
+  --og-font-prose: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-figure: 'JetBrains Mono',ui-monospace,monospace;
+  --og-positive-soft-fg: 164 217 126; /* #a4d97e */
+  --og-negative-soft-fg: 238 163 171; /* #eea3ab */
+  --og-warning-soft-fg: 224 194 116; /* #e0c274 */
+  /* derived (script-generated, KHÔNG có trong design gốc) */
+  --og-derived-critical: 254 119 154; /* #fe779a */
+  --og-derived-critical-soft-bg: 97 46 57; /* #612e39 */
+  --og-derived-gradient-accent-end: 174 233 134; /* #aee986 */
+  --og-derived-gradient-positive-end: 157 226 123; /* #9de27b */
   --shadow-color: 255 255 255;
-}
+  /* severity tones — bộ LEGACY (vivid), không lấy từ design V2 */
+  --og-tone-success: 76 175 80;
+  --og-tone-warning: 255 188 59;
+  --og-tone-critical: 236 25 56;
+  --og-tone-danger: 249 133 7;
+  --og-tone-information: 62 175 240;
+  --og-tone-discovery: 119 113 227;
+  /* severity ramp cho CHART — literal đo trên demo, không phải token design */
+  --og-sev-critical: 207 103 96; /* #cf6760 — #7f1d1d nâng L cho nền tối */
+  --og-sev-danger: 246 68 61; /* #f6443d */
+  --og-sev-warning: 245 158 11; /* #f59e0b */
+  --og-sev-success: 22 163 74; /* #16a34a */
+}
+:root[data-og-theme='ivory'] {
+  --og-page-bg: 232 230 225; /* #e8e6e1 */
+  --og-surface: 250 249 245; /* #faf9f5 */
+  --og-surface-raised: 255 255 255; /* #ffffff */
+  --og-surface-sunken: 253 251 246; /* #fdfbf6 */
+  --og-border: 232 228 218; /* #e8e4da */
+  --og-border-subtle: 245 242 234; /* #f5f2ea */
+  --og-border-strong: 42 38 32; /* #2a2620 */
+  --og-text: 42 38 32; /* #2a2620 */
+  --og-text-body: 61 57 41; /* #3d3929 */
+  --og-text-muted: 138 131 113; /* #8a8371 */
+  --og-text-faint: 163 157 141; /* #a39d8d */
+  --og-accent: 217 119 87; /* #d97757 */
+  --og-accent-fg: 176 108 78; /* #b06c4e */
+  --og-accent-contrast: 250 249 245; /* #faf9f5 */
+  --og-accent-soft-bg: 247 237 231; /* #f7ede7 */
+  --og-accent-soft-fg: 176 108 78; /* #b06c4e */
+  --og-positive: 111 143 106; /* #6f8f6a */
+  --og-positive-soft-bg: 234 240 231; /* #eaf0e7 */
+  --og-negative: 176 74 74; /* #b04a4a */
+  --og-negative-soft-bg: 246 233 231; /* #f6e9e7 */
+  --og-warning: 168 116 31; /* #a8741f */
+  --og-warning-soft-bg: 247 239 221; /* #f7efdd */
+  --og-neutral-soft-bg: 241 237 227; /* #f1ede3 */
+  --og-neutral-soft-fg: 107 100 85; /* #6b6455 */
+  --og-track: 234 230 220; /* #eae6dc */
+  --og-radius-frame: 12px;
+  --og-radius-card: 14px;
+  --og-radius-control: 999px;
+  --og-radius-pill: 999px;
+  --og-font-body: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-display: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-mono: 'JetBrains Mono',ui-monospace,monospace;
+  --og-font-prose: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-figure: 'JetBrains Mono',ui-monospace,monospace;
+  /* derived (script-generated, KHÔNG có trong design gốc) */
+  --og-derived-critical: 154 11 57; /* #9a0b39 */
+  --og-derived-critical-soft-bg: 232 192 193; /* #e8c0c1 */
+  --og-derived-gradient-accent-end: 245 144 111; /* #f5906f */
+  --og-derived-gradient-positive-end: 135 168 130; /* #87a882 */
+  --shadow-color: 0 0 0;
+  /* severity tones — bộ LEGACY (vivid), không lấy từ design V2 */
+  --og-tone-success: 15 140 96;
+  --og-tone-warning: 255 199 0;
+  --og-tone-critical: 254 4 83;
+  --og-tone-danger: 255 122 0;
+  --og-tone-information: 23 127 240;
+  --og-tone-discovery: 156 129 255;
+  /* severity ramp cho CHART — literal đo trên demo, không phải token design */
+  --og-sev-critical: 127 29 29; /* #7f1d1d */
+  --og-sev-danger: 220 38 38; /* #dc2626 */
+  --og-sev-warning: 245 158 11; /* #f59e0b */
+  --og-sev-success: 22 163 74; /* #16a34a */
+}
+:root[data-og-theme='studio'] {
+  --og-page-bg: 14 14 16; /* #0e0e10 */
+  --og-surface: 35 35 34; /* #232322 */
+  --og-surface-raised: 43 43 41; /* #2b2b29 */
+  --og-surface-sunken: 38 38 37; /* #262625 */
+  --og-border: 58 58 55; /* #3a3a37 */
+  --og-border-subtle: 50 50 47; /* #32322f */
+  --og-border-strong: 85 85 79; /* #55554f */
+  --og-text: 236 235 230; /* #ecebe6 */
+  --og-text-body: 214 213 208; /* #d6d5d0 */
+  --og-text-muted: 181 180 174; /* #b5b4ae */
+  --og-text-faint: 143 142 136; /* #8f8e88 */
+  --og-accent: 90 143 214; /* #5a8fd6 */
+  --og-accent-fg: 126 168 224; /* #7ea8e0 */
+  --og-accent-contrast: 16 26 38; /* #101a26 */
+  --og-accent-soft-bg: 43 46 51; /* #2b2e33 */
+  --og-accent-soft-fg: 126 168 224; /* #7ea8e0 */
+  --og-positive: 107 189 133; /* #6bbd85 */
+  --og-positive-soft-bg: 31 49 38; /* #1f3126 */
+  --og-negative: 217 117 106; /* #d9756a */
+  --og-negative-soft-bg: 51 34 31; /* #33221f */
+  --og-warning: 217 154 61; /* #d99a3d */
+  --og-warning-soft-bg: 77 58 30; /* #4d3a1e */
+  --og-neutral-soft-bg: 46 46 44; /* #2e2e2c */
+  --og-neutral-soft-fg: 196 195 189; /* #c4c3bd */
+  --og-track: 32 52 77; /* #20344d */
+  --og-radius-frame: 14px;
+  --og-radius-card: 11px;
+  --og-radius-control: 9px;
+  --og-radius-pill: 999px;
+  --og-font-body: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-display: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-mono: 'JetBrains Mono',ui-monospace,monospace;
+  --og-font-prose: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-figure: 'JetBrains Mono',ui-monospace,monospace;
+  /* derived (script-generated, KHÔNG có trong design gốc) */
+  --og-derived-critical: 238 108 128; /* #ee6c80 */
+  --og-derived-critical-soft-bg: 85 48 49; /* #553031 */
+  --og-derived-gradient-accent-end: 120 174 248; /* #78aef8 */
+  --og-derived-gradient-positive-end: 132 215 158; /* #84d79e */
+  --shadow-color: 255 255 255;
+  /* severity tones — bộ LEGACY (vivid), không lấy từ design V2 */
+  --og-tone-success: 76 175 80;
+  --og-tone-warning: 255 188 59;
+  --og-tone-critical: 236 25 56;
+  --og-tone-danger: 249 133 7;
+  --og-tone-information: 62 175 240;
+  --og-tone-discovery: 119 113 227;
+  /* severity ramp cho CHART — literal đo trên demo, không phải token design */
+  --og-sev-critical: 207 103 96; /* #cf6760 — #7f1d1d nâng L cho nền tối */
+  --og-sev-danger: 246 68 61; /* #f6443d */
+  --og-sev-warning: 245 158 11; /* #f59e0b */
+  --og-sev-success: 22 163 74; /* #16a34a */
+}
+:root[data-og-theme='blueprint'] {
+  --og-page-bg: 14 14 16; /* #0e0e10 */
+  --og-surface: 15 15 17; /* #0f0f11 */
+  --og-surface-raised: 22 22 26; /* #16161a */
+  --og-surface-sunken: 28 28 32; /* #1c1c20 */
+  --og-border: 35 35 38; /* #232326 */
+  --og-border-subtle: 25 25 28; /* #19191c */
+  --og-border-strong: 58 58 64; /* #3a3a40 */
+  --og-text: 240 240 242; /* #f0f0f2 */
+  --og-text-body: 207 207 212; /* #cfcfd4 */
+  --og-text-muted: 115 115 120; /* #737378 */
+  --og-text-faint: 80 80 85; /* #505055 */
+  --og-accent: 224 122 58; /* #e07a3a */
+  --og-accent-fg: 240 160 113; /* #f0a071 */
+  --og-accent-contrast: 22 16 10; /* #16100a */
+  --og-accent-soft-bg: 42 29 18; /* #2a1d12 */
+  --og-accent-soft-fg: 240 160 113; /* #f0a071 */
+  --og-positive: 91 143 110; /* #5b8f6e */
+  --og-positive-soft-bg: 22 36 29; /* #16241d */
+  --og-negative: 179 101 79; /* #b3654f */
+  --og-negative-soft-bg: 42 26 21; /* #2a1a15 */
+  --og-warning: 201 160 78; /* #c9a04e */
+  --og-warning-soft-bg: 42 35 19; /* #2a2313 */
+  --og-neutral-soft-bg: 28 28 32; /* #1c1c20 */
+  --og-neutral-soft-fg: 168 168 174; /* #a8a8ae */
+  --og-track: 35 35 38; /* #232326 */
+  --og-radius-frame: 0px;
+  --og-radius-card: 0px;
+  --og-radius-control: 0px;
+  --og-radius-pill: 0px;
+  --og-font-body: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-display: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-mono: 'JetBrains Mono',ui-monospace,monospace;
+  --og-font-prose: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-figure: 'JetBrains Mono',ui-monospace,monospace;
+  /* derived (script-generated, KHÔNG có trong design gốc) */
+  --og-derived-critical: 216 93 120; /* #d85d78 */
+  --og-derived-critical-soft-bg: 73 39 39; /* #492727 */
+  --og-derived-gradient-accent-end: 255 154 91; /* #ff9a5b */
+  --og-derived-gradient-positive-end: 115 168 134; /* #73a886 */
+  --shadow-color: 255 255 255;
+  /* severity tones — bộ LEGACY (vivid), không lấy từ design V2 */
+  --og-tone-success: 76 175 80;
+  --og-tone-warning: 255 188 59;
+  --og-tone-critical: 236 25 56;
+  --og-tone-danger: 249 133 7;
+  --og-tone-information: 62 175 240;
+  --og-tone-discovery: 119 113 227;
+  /* severity ramp cho CHART — literal đo trên demo, không phải token design */
+  --og-sev-critical: 207 103 96; /* #cf6760 — #7f1d1d nâng L cho nền tối */
+  --og-sev-danger: 246 68 61; /* #f6443d */
+  --og-sev-warning: 245 158 11; /* #f59e0b */
+  --og-sev-success: 22 163 74; /* #16a34a */
+}
+:root[data-og-theme='terminal'] {
+  --og-page-bg: 232 230 225; /* #e8e6e1 */
+  --og-surface: 244 242 234; /* #f4f2ea */
+  --og-surface-raised: 250 249 243; /* #faf9f3 */
+  --og-surface-sunken: 235 232 221; /* #ebe8dd */
+  --og-border: 204 200 187; /* #ccc8bb */
+  --og-border-subtle: 232 229 218; /* #e8e5da */
+  --og-border-strong: 22 22 22; /* #161616 */
+  --og-text: 22 22 22; /* #161616 */
+  --og-text-body: 46 46 46; /* #2e2e2e */
+  --og-text-muted: 110 105 89; /* #6e6959 */
+  --og-text-faint: 138 132 116; /* #8a8474 */
+  --og-accent: 58 85 217; /* #3a55d9 */
+  --og-accent-fg: 58 85 217; /* #3a55d9 */
+  --og-accent-contrast: 244 242 234; /* #f4f2ea */
+  --og-accent-soft-bg: 227 230 247; /* #e3e6f7 */
+  --og-accent-soft-fg: 44 66 171; /* #2c42ab */
+  --og-positive: 47 143 88; /* #2f8f58 */
+  --og-positive-soft-bg: 226 239 230; /* #e2efe6 */
+  --og-negative: 192 69 47; /* #c0452f */
+  --og-negative-soft-bg: 247 230 226; /* #f7e6e2 */
+  --og-warning: 168 122 34; /* #a87a22 */
+  --og-warning-soft-bg: 245 236 216; /* #f5ecd8 */
+  --og-neutral-soft-bg: 226 223 212; /* #e2dfd4 */
+  --og-neutral-soft-fg: 90 86 74; /* #5a564a */
+  --og-track: 226 223 212; /* #e2dfd4 */
+  --og-radius-frame: 0px;
+  --og-radius-card: 0px;
+  --og-radius-control: 0px;
+  --og-radius-pill: 0px;
+  --og-font-body: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-display: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-mono: 'JetBrains Mono',ui-monospace,monospace;
+  --og-font-prose: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-figure: 'JetBrains Mono',ui-monospace,monospace;
+  /* derived (script-generated, KHÔNG có trong design gốc) */
+  --og-derived-critical: 169 0 42; /* #a9002a */
+  --og-derived-critical-soft-bg: 236 191 187; /* #ecbfbb */
+  --og-derived-gradient-accent-end: 78 111 245; /* #4e6ff5 */
+  --og-derived-gradient-positive-end: 75 168 111; /* #4ba86f */
+  --shadow-color: 0 0 0;
+  /* severity tones — bộ LEGACY (vivid), không lấy từ design V2 */
+  --og-tone-success: 15 140 96;
+  --og-tone-warning: 255 199 0;
+  --og-tone-critical: 254 4 83;
+  --og-tone-danger: 255 122 0;
+  --og-tone-information: 23 127 240;
+  --og-tone-discovery: 156 129 255;
+  /* severity ramp cho CHART — literal đo trên demo, không phải token design */
+  --og-sev-critical: 127 29 29; /* #7f1d1d */
+  --og-sev-danger: 220 38 38; /* #dc2626 */
+  --og-sev-warning: 245 158 11; /* #f59e0b */
+  --og-sev-success: 22 163 74; /* #16a34a */
+}
+/* ---- SKEW SHIELD (transitional) -------------------------------------
+   Remote build CŨ ship stylesheet tự khai legacy vars literal trên :root
+   (dark) và .light_theme — load SAU css host nên thắng ở :root. Khai lại
+   alias ở body-level (0,1,1) để thắng cả .light_theme (0,1,0) của bundle
+   cũ lẫn :root literal, bất kể thứ tự load. Gỡ khi mọi app đã lên V2. */
+[data-og-theme] body {
+  /* ---- LEGACY ALIASES (@deprecated — gỡ khi kết thúc campaign V2) ----
+     Các biến cũ trỏ vào --og-* qua var() nên chỉ cần khai báo MỘT lần:
+     var() resolve tại element sử dụng, giá trị og đúng theo theme đang active. */
+  --gradient-primary-start: var(--og-accent);
+  --gradient-primary-end: var(--og-derived-gradient-accent-end);
+  --gradient-success-start: var(--og-positive);
+  --gradient-success-end: var(--og-derived-gradient-positive-end);
+  --bg-primary: var(--og-surface);
+  --bg-canvas: var(--og-page-bg);
+  --primary: var(--og-accent);
+  --success: var(--og-tone-success);
+  --warning: var(--og-tone-warning);
+  --critical: var(--og-tone-critical);
+  --danger: var(--og-tone-danger);
+  --discovery: var(--og-tone-discovery);
+  --information: var(--og-tone-information);
+  --text-primary: var(--og-text);
+  --text-secondary: var(--og-text-muted);
+  --border-default: var(--og-border);
+  --text-placeholder: var(--og-text-faint);
+  --step-bg: var(--og-text);
+  --text-link-primary: var(--og-accent-fg);
+  --bg-primary-hover: var(--og-surface-sunken);
+  --text-focus: var(--og-accent-contrast);
+  --bg-primary-neutral: var(--og-border-strong);
+  --text-selected-primary: var(--og-accent-fg);
+  --button-default: var(--og-text);
+  --text-inverse: var(--og-surface);
+  --bg-error-bold: var(--og-negative);
+  --text-error: var(--og-negative);
+  --border-interactive: var(--og-accent);
+  --border-selected: var(--og-accent);
+  --button-primary: var(--og-accent);
+  --border-strong: var(--og-border-strong);
+  --border-secondary-hover: var(--og-accent);
+  --bg-secondary-hover: var(--og-neutral-soft-bg);
+}
+/* ---- STALE-HOST FALLBACK (transitional) -----------------------------
+   Host CŨ không set data-og-theme, chỉ toggle .light_theme trên body.
+   Map light→porcelain (đã là :root default), dark→charcoal — cả hai kèm
+   alias ở body-level để đè literal của stylesheet host cũ. Remote chạy
+   standalone không set theme cũng rơi vào nhánh charcoal (khớp hành vi
+   dark-default cũ). */
+html:not([data-og-theme]) body:not(.light_theme) {
+  --og-page-bg: 26 24 17; /* #1a1811 */
+  --og-surface: 34 31 22; /* #221f16 */
+  --og-surface-raised: 42 38 25; /* #2a2619 */
+  --og-surface-sunken: 23 21 9; /* #171509 */
+  --og-border: 58 54 38; /* #3a3626 */
+  --og-border-subtle: 44 41 25; /* #2c2919 */
+  --og-border-strong: 76 71 50; /* #4c4732 */
+  --og-text: 226 221 203; /* #e2ddcb */
+  --og-text-body: 193 188 166; /* #c1bca6 */
+  --og-text-muted: 147 141 118; /* #938d76 */
+  --og-text-faint: 107 102 83; /* #6b6653 */
+  --og-accent: 143 200 102; /* #8fc866 */
+  --og-accent-fg: 164 217 126; /* #a4d97e */
+  --og-accent-contrast: 23 21 9; /* #171509 */
+  --og-accent-soft-bg: 38 48 26; /* #26301a */
+  --og-accent-soft-fg: 164 217 126; /* #a4d97e */
+  --og-positive: 132 200 98; /* #84c862 */
+  --og-positive-soft-bg: 34 48 15; /* #22300f */
+  --og-negative: 229 130 142; /* #e5828e */
+  --og-negative-soft-bg: 63 30 36; /* #3f1e24 */
+  --og-warning: 214 178 90; /* #d6b25a */
+  --og-warning-soft-bg: 51 42 18; /* #332a12 */
+  --og-neutral-soft-bg: 42 39 25; /* #2a2719 */
+  --og-neutral-soft-fg: 164 158 134; /* #a49e86 */
+  --og-track: 48 44 30; /* #302c1e */
+  --og-radius-frame: 10px;
+  --og-radius-card: 9px;
+  --og-radius-control: 7px;
+  --og-radius-pill: 999px;
+  --og-font-body: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-display: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-mono: 'JetBrains Mono',ui-monospace,monospace;
+  --og-font-prose: 'Familjen Grotesk',ui-sans-serif,system-ui,sans-serif;
+  --og-font-figure: 'JetBrains Mono',ui-monospace,monospace;
+  --og-positive-soft-fg: 164 217 126; /* #a4d97e */
+  --og-negative-soft-fg: 238 163 171; /* #eea3ab */
+  --og-warning-soft-fg: 224 194 116; /* #e0c274 */
+  /* derived (script-generated, KHÔNG có trong design gốc) */
+  --og-derived-critical: 254 119 154; /* #fe779a */
+  --og-derived-critical-soft-bg: 97 46 57; /* #612e39 */
+  --og-derived-gradient-accent-end: 174 233 134; /* #aee986 */
+  --og-derived-gradient-positive-end: 157 226 123; /* #9de27b */
+  --shadow-color: 255 255 255;
+  /* severity tones — bộ LEGACY (vivid), không lấy từ design V2 */
+  --og-tone-success: 76 175 80;
+  --og-tone-warning: 255 188 59;
+  --og-tone-critical: 236 25 56;
+  --og-tone-danger: 249 133 7;
+  --og-tone-information: 62 175 240;
+  --og-tone-discovery: 119 113 227;
+  /* severity ramp cho CHART — literal đo trên demo, không phải token design */
+  --og-sev-critical: 207 103 96; /* #cf6760 — #7f1d1d nâng L cho nền tối */
+  --og-sev-danger: 246 68 61; /* #f6443d */
+  --og-sev-warning: 245 158 11; /* #f59e0b */
+  --og-sev-success: 22 163 74; /* #16a34a */
+  /* ---- LEGACY ALIASES (@deprecated — gỡ khi kết thúc campaign V2) ----
+     Các biến cũ trỏ vào --og-* qua var() nên chỉ cần khai báo MỘT lần:
+     var() resolve tại element sử dụng, giá trị og đúng theo theme đang active. */
+  --gradient-primary-start: var(--og-accent);
+  --gradient-primary-end: var(--og-derived-gradient-accent-end);
+  --gradient-success-start: var(--og-positive);
+  --gradient-success-end: var(--og-derived-gradient-positive-end);
+  --bg-primary: var(--og-surface);
+  --bg-canvas: var(--og-page-bg);
+  --primary: var(--og-accent);
+  --success: var(--og-tone-success);
+  --warning: var(--og-tone-warning);
+  --critical: var(--og-tone-critical);
+  --danger: var(--og-tone-danger);
+  --discovery: var(--og-tone-discovery);
+  --information: var(--og-tone-information);
+  --text-primary: var(--og-text);
+  --text-secondary: var(--og-text-muted);
+  --border-default: var(--og-border);
+  --text-placeholder: var(--og-text-faint);
+  --step-bg: var(--og-text);
+  --text-link-primary: var(--og-accent-fg);
+  --bg-primary-hover: var(--og-surface-sunken);
+  --text-focus: var(--og-accent-contrast);
+  --bg-primary-neutral: var(--og-border-strong);
+  --text-selected-primary: var(--og-accent-fg);
+  --button-default: var(--og-text);
+  --text-inverse: var(--og-surface);
+  --bg-error-bold: var(--og-negative);
+  --text-error: var(--og-negative);
+  --border-interactive: var(--og-accent);
+  --border-selected: var(--og-accent);
+  --button-primary: var(--og-accent);
+  --border-strong: var(--og-border-strong);
+  --border-secondary-hover: var(--og-accent);
+  --bg-secondary-hover: var(--og-neutral-soft-bg);
+}
+html:not([data-og-theme]) body.light_theme {
+  /* ---- LEGACY ALIASES (@deprecated — gỡ khi kết thúc campaign V2) ----
+     Các biến cũ trỏ vào --og-* qua var() nên chỉ cần khai báo MỘT lần:
+     var() resolve tại element sử dụng, giá trị og đúng theo theme đang active. */
+  --gradient-primary-start: var(--og-accent);
+  --gradient-primary-end: var(--og-derived-gradient-accent-end);
+  --gradient-success-start: var(--og-positive);
+  --gradient-success-end: var(--og-derived-gradient-positive-end);
+  --bg-primary: var(--og-surface);
+  --bg-canvas: var(--og-page-bg);
+  --primary: var(--og-accent);
+  --success: var(--og-tone-success);
+  --warning: var(--og-tone-warning);
+  --critical: var(--og-tone-critical);
+  --danger: var(--og-tone-danger);
+  --discovery: var(--og-tone-discovery);
+  --information: var(--og-tone-information);
+  --text-primary: var(--og-text);
+  --text-secondary: var(--og-text-muted);
+  --border-default: var(--og-border);
+  --text-placeholder: var(--og-text-faint);
+  --step-bg: var(--og-text);
+  --text-link-primary: var(--og-accent-fg);
+  --bg-primary-hover: var(--og-surface-sunken);
+  --text-focus: var(--og-accent-contrast);
+  --bg-primary-neutral: var(--og-border-strong);
+  --text-selected-primary: var(--og-accent-fg);
+  --button-default: var(--og-text);
+  --text-inverse: var(--og-surface);
+  --bg-error-bold: var(--og-negative);
+  --text-error: var(--og-negative);
+  --border-interactive: var(--og-accent);
+  --border-selected: var(--og-accent);
+  --button-primary: var(--og-accent);
+  --border-strong: var(--og-border-strong);
+  --border-secondary-hover: var(--og-accent);
+  --bg-secondary-hover: var(--og-neutral-soft-bg);
+}