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

@foxeltech/angular-ui 0.4.0 → 0.7.44

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 (165) hide show

package/theme.css CHANGED Viewed

@@ -1,73 +1,600 @@
-.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: 12px;
+  --og-space-4: 16px;
+  --og-space-5: 20px;
+  --og-space-6: 26px;
+  --og-space-7: 32px;
+  --og-space-8: 40px;
+  --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: 124 58 237; /* #7c3aed — violet V1 */
+  --og-accent-fg: 124 58 237; /* #7c3aed */
+  --og-accent-contrast: 255 255 255; /* #ffffff */
+  --og-accent-soft-bg: 242 235 253; /* #f2ebfd */
+  --og-accent-soft-fg: 102 48 194; /* #6630c2 */
+  --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: "Archivo", system-ui, sans-serif;
+  --og-font-display: "Archivo", system-ui, sans-serif;
+  --og-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --og-font-prose: "Source Serif 4", Georgia, serif;
+  --og-font-figure: var(--og-font-body);
+  /* 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: 79 142 247; /* #4f8ef7 — gradient end V1 */
+  --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;
+  /* ---- 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: 124 58 237; /* #7c3aed — violet V1 */
+  --og-accent-fg: 124 58 237; /* #7c3aed */
+  --og-accent-contrast: 255 255 255; /* #ffffff */
+  --og-accent-soft-bg: 242 235 253; /* #f2ebfd */
+  --og-accent-soft-fg: 102 48 194; /* #6630c2 */
+  --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: "Archivo", system-ui, sans-serif;
+  --og-font-display: "Archivo", system-ui, sans-serif;
+  --og-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --og-font-prose: "Source Serif 4", Georgia, serif;
+  --og-font-figure: var(--og-font-body);
+  /* 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: 79 142 247; /* #4f8ef7 — gradient end V1 */
+  --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;
 }
-: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: 14 14 16; /* #0e0e10 */
+  --og-surface: 26 23 23; /* #1a1717 */
+  --og-surface-raised: 33 28 27; /* #211c1b */
+  --og-surface-sunken: 40 34 33; /* #282221 */
+  --og-border: 48 41 40; /* #302928 */
+  --og-border-subtle: 36 31 30; /* #241f1e */
+  --og-border-strong: 74 63 61; /* #4a3f3d */
+  --og-text: 240 239 236; /* #f0efec */
+  --og-text-body: 214 212 207; /* #d6d4cf */
+  --og-text-muted: 139 138 132; /* #8b8a84 */
+  --og-text-faint: 110 109 104; /* #6e6d68 */
+  --og-accent: 255 107 74; /* #ff6b4a */
+  --og-accent-fg: 255 107 74; /* #ff6b4a */
+  --og-accent-contrast: 46 21 13; /* #2e150d */
+  --og-accent-soft-bg: 46 29 24; /* #2e1d18 */
+  --og-accent-soft-fg: 255 143 117; /* #ff8f75 */
+  --og-positive: 95 191 122; /* #5fbf7a */
+  --og-positive-soft-bg: 29 47 40; /* #1d2f28 */
+  --og-negative: 224 118 106; /* #e0766a */
+  --og-negative-soft-bg: 51 35 35; /* #332323 */
+  --og-warning: 217 146 78; /* #d9924e */
+  --og-warning-soft-bg: 51 40 15; /* #33280f */
+  --og-neutral-soft-bg: 40 34 33; /* #282221 */
+  --og-neutral-soft-fg: 179 176 169; /* #b3b0a9 */
+  --og-track: 46 39 38; /* #2e2726 */
+  --og-radius-frame: 10px;
+  --og-radius-card: 9px;
+  --og-radius-control: 7px;
+  --og-radius-pill: 999px;
+  --og-font-body: "Archivo", system-ui, sans-serif;
+  --og-font-display: "Archivo", system-ui, sans-serif;
+  --og-font-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --og-font-prose: "Source Serif 4", Georgia, serif;
+  --og-font-figure: var(--og-font-body);
+  /* derived (script-generated, KHÔNG có trong design gốc) */
+  --og-derived-critical: 246 107 130; /* #f66b82 */
+  --og-derived-critical-soft-bg: 86 49 52; /* #563134 */
+  --og-derived-gradient-accent-end: 255 140 106; /* #ff8c6a */
+  --og-derived-gradient-positive-end: 121 217 147; /* #79d993 */
   --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;
+}
+: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: "Archivo", system-ui, sans-serif;
+  --og-font-display: "Newsreader", Georgia, serif;
+  --og-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --og-font-prose: "Source Serif 4", Georgia, serif;
+  --og-font-figure: var(--og-font-display);
+  /* 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;
+}
+: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: "Archivo", system-ui, sans-serif;
+  --og-font-display: "Archivo", system-ui, sans-serif;
+  --og-font-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --og-font-prose: "Source Serif 4", Georgia, serif;
+  --og-font-figure: var(--og-font-body);
+  /* 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;
+}
+: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: "IBM Plex Mono", ui-monospace, monospace;
+  --og-font-display: "Newsreader", Georgia, serif;
+  --og-font-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --og-font-prose: "Source Serif 4", Georgia, serif;
+  --og-font-figure: var(--og-font-mono);
+  /* 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;
+}
+: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: "JetBrains Mono", ui-monospace, monospace;
+  --og-font-display: "JetBrains Mono", ui-monospace, monospace;
+  --og-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --og-font-prose: "Source Serif 4", Georgia, serif;
+  --og-font-figure: var(--og-font-mono);
+  /* 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;
+}
+/* ---- 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: 14 14 16; /* #0e0e10 */
+  --og-surface: 26 23 23; /* #1a1717 */
+  --og-surface-raised: 33 28 27; /* #211c1b */
+  --og-surface-sunken: 40 34 33; /* #282221 */
+  --og-border: 48 41 40; /* #302928 */
+  --og-border-subtle: 36 31 30; /* #241f1e */
+  --og-border-strong: 74 63 61; /* #4a3f3d */
+  --og-text: 240 239 236; /* #f0efec */
+  --og-text-body: 214 212 207; /* #d6d4cf */
+  --og-text-muted: 139 138 132; /* #8b8a84 */
+  --og-text-faint: 110 109 104; /* #6e6d68 */
+  --og-accent: 255 107 74; /* #ff6b4a */
+  --og-accent-fg: 255 107 74; /* #ff6b4a */
+  --og-accent-contrast: 46 21 13; /* #2e150d */
+  --og-accent-soft-bg: 46 29 24; /* #2e1d18 */
+  --og-accent-soft-fg: 255 143 117; /* #ff8f75 */
+  --og-positive: 95 191 122; /* #5fbf7a */
+  --og-positive-soft-bg: 29 47 40; /* #1d2f28 */
+  --og-negative: 224 118 106; /* #e0766a */
+  --og-negative-soft-bg: 51 35 35; /* #332323 */
+  --og-warning: 217 146 78; /* #d9924e */
+  --og-warning-soft-bg: 51 40 15; /* #33280f */
+  --og-neutral-soft-bg: 40 34 33; /* #282221 */
+  --og-neutral-soft-fg: 179 176 169; /* #b3b0a9 */
+  --og-track: 46 39 38; /* #2e2726 */
+  --og-radius-frame: 10px;
+  --og-radius-card: 9px;
+  --og-radius-control: 7px;
+  --og-radius-pill: 999px;
+  --og-font-body: "Archivo", system-ui, sans-serif;
+  --og-font-display: "Archivo", system-ui, sans-serif;
+  --og-font-mono: "IBM Plex Mono", ui-monospace, monospace;
+  --og-font-prose: "Source Serif 4", Georgia, serif;
+  --og-font-figure: var(--og-font-body);
+  /* derived (script-generated, KHÔNG có trong design gốc) */
+  --og-derived-critical: 246 107 130; /* #f66b82 */
+  --og-derived-critical-soft-bg: 86 49 52; /* #563134 */
+  --og-derived-gradient-accent-end: 255 140 106; /* #ff8c6a */
+  --og-derived-gradient-positive-end: 121 217 147; /* #79d993 */
+  --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;
+  /* ---- 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);
+}