@foxeltech/angular-ui 0.7.44 → 0.7.75

package/theme.css

@@ -26,12 +26,12 @@
   --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-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;
@@ -48,11 +48,11 @@
   --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: 74 125 189; /* #4a7dbd */
+  --og-accent-fg: 64 105 156; /* #40699c */
   --og-accent-contrast: 255 255 255; /* #ffffff */
-  --og-accent-soft-bg: 242 235 253; /* #f2ebfd */
-  --og-accent-soft-fg: 102 48 194; /* #6630c2 */
+  --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 */
@@ -66,15 +66,15 @@
   --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);
+  --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: 79 142 247; /* #4f8ef7 — gradient end V1 */
+  --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 */
@@ -84,6 +84,11 @@
   --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:
@@ -135,11 +140,11 @@
   --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: 74 125 189; /* #4a7dbd */
+  --og-accent-fg: 64 105 156; /* #40699c */
   --og-accent-contrast: 255 255 255; /* #ffffff */
-  --og-accent-soft-bg: 242 235 253; /* #f2ebfd */
-  --og-accent-soft-fg: 102 48 194; /* #6630c2 */
+  --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 */
@@ -153,15 +158,15 @@
   --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);
+  --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: 79 142 247; /* #4f8ef7 — gradient end V1 */
+  --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 */
@@ -171,48 +176,56 @@
   --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='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-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: "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);
+  --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: 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 */
+  --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;
@@ -221,6 +234,11 @@
   --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'] {
@@ -253,11 +271,11 @@
   --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);
+  --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 */
@@ -271,6 +289,11 @@
   --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'] {
@@ -303,11 +326,11 @@
   --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);
+  --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 */
@@ -321,6 +344,11 @@
   --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'] {
@@ -353,11 +381,11 @@
   --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);
+  --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 */
@@ -371,6 +399,11 @@
   --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'] {
@@ -403,11 +436,11 @@
   --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);
+  --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 */
@@ -421,6 +454,11 @@
   --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) -------------------------------------
@@ -474,45 +512,48 @@
    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-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: "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);
+  --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: 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 */
+  --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;
@@ -521,6 +562,11 @@ html:not([data-og-theme]) body:not(.light_theme) {
   --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:

package/tokens.css

@@ -37,6 +37,23 @@
   --color-neutral-soft-fg: rgb(var(--og-neutral-soft-fg));
   --color-track: rgb(var(--og-track));
 
+  /* ---- CTA (New Analysis / New Scan) ----
+     Demo dùng một màu CỐ ĐỊNH cho nút hành động chính (`.bi-newbtn`), không
+     đổi theo theme và KHÔNG phải accent — nên để literal ở đây thay vì thành
+     token theme. Nguồn: lớp override của design, #c2582a / hover #b34e24. */
+  /* ---- Severity ramp CHO CHART ----
+     Màu literal đo trên demo (Critical #7f1d1d · High #dc2626 · Medium
+     #f59e0b · Low #16a34a; bộ dark nâng L cho đủ tương phản). TÁCH khỏi
+     `--color-critical/danger/warning/success` — mấy tên đó trỏ vào bộ LEGACY
+     `--og-tone-*` dùng cho text/nền, không phải màu chart của design. */
+  --color-sev-critical: rgb(var(--og-sev-critical));
+  --color-sev-danger: rgb(var(--og-sev-danger));
+  --color-sev-warning: rgb(var(--og-sev-warning));
+  --color-sev-success: rgb(var(--og-sev-success));
+
+  --color-cta: #c2582a;
+  --color-cta-hover: #b34e24;
+
   /* ---- Legacy colour names (@deprecated — remove after the V2 campaign;
      they resolve through the alias layer in theme.css, so every existing
      class already renders the OG palette) ---- */
@@ -73,6 +90,14 @@
   --color-button-primary: rgb(var(--button-primary));
 
   /* Breakpoints (v3 custom screens) */
+  /* ⚠️ THANG NÀY KHÔNG PHẢI MẶC ĐỊNH CỦA TAILWIND (640/768/1024/1280).
+     `lg` ở đây là **1080px**, không phải 1024px — đã gây lỗi "màn lg mà render
+     layout sm" (03/09): mọi viewport 1024-1079 (rất dễ gặp khi OS scaling
+     125-150% hoặc browser zoom) rơi xuống layout nhỏ. Anh Tú chốt GIỮ thang
+     này; đổi nó sẽ dịch ngưỡng của mọi `lg:`/`xl:` trong 5 app.
+     👉 Layout nào cần biết "có đủ chỗ thật hay không" thì dùng CONTAINER QUERY
+     theo bề rộng của chính nó (xem master-detail.component.css), đừng bám `lg:`.
+     `xl` là 1920px nên màn 1900px KHÔNG BAO GIỜ đạt `xl:`. */
   --breakpoint-sm: 480px;
   --breakpoint-md: 720px;
   --breakpoint-lg: 1080px;

package/types/foxeltech-angular-ui-chart.d.ts

@@ -28,21 +28,96 @@ declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
     readonly chartInit: _angular_core.OutputEmitterRef<ECharts>;
     chartOptions: EChartsOption;
     isEmpty: boolean;
+    /**
+     * ⚠️ Cổng cho `<div echarts>` trong template. Trước đây div render NGAY với
+     * `chartOptions = {}`, nên NgxEchartsDirective khởi tạo chart bằng options
+     * RỖNG; options thật gán vào giữa lúc `await createChart()` của lần đó ⇒
+     * onOptionsChange() thấy `chart == null` và createChart() LẦN HAI trên cùng
+     * DOM node ⇒ "[ECharts] There is a chart instance already initialized on the
+     * dom.". Chỉ dựng directive khi đã có options thật ⇒ đúng một lần init.
+     */
+    hasOptions: boolean;
     labelFontSize: number;
     private chartInstance?;
     private resizeObserver?;
     private intersectionObserver?;
     private canInit;
+    private destroyed;
+    /**
+     * ⚠️ Đang chờ init đầu tiên của directive hoàn tất?
+     *
+     * NgxEchartsDirective đăng ký `changeFilter.notFirstAndEmpty('options', …)`:
+     * lần gán `options` ĐẦU bị bỏ qua (ngAfterViewInit lo), lần gán THỨ HAI gọi
+     * onOptionsChange(). Mà onOptionsChange() chỉ createChart() khi `this.chart`
+     * còn null — và nó null suốt thời gian `await createChart()` của lần đầu.
+     * Nên nếu ta gán `chartOptions` (object mới) trong khoảng await đó thì
+     * init() chạy HAI LẦN trên cùng DOM node ⇒
+     * "[ECharts] There is a chart instance already initialized on the dom."
+     *
+     * Cách chặn: trong khoảng chờ, giữ options ở `deferredOptions` chứ không đụng
+     * vào property đang bind; init xong thì áp một lần qua instance.
+     */
+    private awaitingFirstInit;
+    private deferredOptions?;
+    private pendingFrames;
     private isMobile;
     private containerWidth;
     constructor(ref: ElementRef<HTMLElement>, cdr: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngOnChanges(): void;
     ngOnDestroy(): void;
+    /**
+     * ⚠️ RACE TRONG NGX-ECHARTS v20 — nguồn của
+     * "[ECharts] There is a chart instance already initialized on the dom."
+     *
+     * NgxEchartsDirective.onOptionsChange() làm:
+     *   this.chart = await this.createChart();   // ← destroy có thể rơi vào đây
+     *   this.chart$.next(this.chart);
+     *   this.chartInit.emit(this.chart);
+     *
+     * Destroy đúng lúc đang await thì ngOnDestroy → dispose() thấy `this.chart == null`
+     * nên KHÔNG dispose gì. Sau đó await resolve, gán một instance ECharts còn sống cho
+     * directive đã chết → instance MỒ CÔI, vẫn nằm trong registry của echarts gắn với
+     * DOM node đó. Angular tái dùng node ⇒ init() lần sau báo "already initialized".
+     *
+     * Không thể bắt qua (chartInit): Angular v20 TỪ CHỐI emit trên OutputRef đã destroy
+     * (chỉ log NG0953, listener không hề được gọi). Nên đường duy nhất là hỏi thẳng
+     * echarts xem node còn instance nào không, ở các macrotask SAU destroy.
+     */
+    private sweepOrphanInstance;
+    /** rAF có thể huỷ được khi destroy — tránh chạm instance đã dispose. */
+    private schedule;
+    /** Instance còn dùng được? (đã dispose thì mọi API echarts đều ném lỗi) */
+    private get liveChart();
     onThemeChange(): void;
     onChartClick(event: any): void;
-    onChartInit(chart: any): void;
+    onChartInit(raw: any): void;
+    /**
+     * @returns true nếu trạng thái responsive THỰC SỰ đổi (nên dựng lại options).
+     *
+     * Trả về boolean là điều then chốt cho animation lúc chart xuất hiện — xem
+     * ghi chú ở `forceMediaRecalc`.
+     */
     private updateResponsiveState;
+    /**
+     * ⚠️ CHỈ dựng lại options khi kích thước thật sự đổi — nếu không thì
+     * **animation lúc chart xuất hiện bị giết**.
+     *
+     * Đường đi: `onChartInit` → schedule(forceMediaRecalc) → chạy ở frame KẾ
+     * TIẾP. Nếu chỗ này vô điều kiện `rebuildChart()` (clear + setOption notMerge)
+     * thì nó xoá sạch và vẽ lại từ đầu ~16ms sau lần vẽ đầu, trong khi animation
+     * xuất hiện dài ~1000ms ⇒ người dùng thấy chart hiện ra đứng im.
+     *
+     * Đo được: lần xuất hiện đầu 1/12 frame khác nhau (đứng yên) trong khi vẽ lại
+     * bằng `theme-changed` cho 9/12 → animation của ECharts vẫn bật, chỉ lần đầu
+     * bị cắt.
+     *
+     * Trước Pha 0 lỗi này bị che: lần init đầu dùng `chartOptions = {}` nên
+     * animation xuất hiện xảy ra ở lần cập nhật SAU, tức sau khi forceMediaRecalc
+     * đã chạy xong. Cổng `hasOptions` đưa options thật về ngay lần init nên lộ ra.
+     *
+     * `resize()` thì luôn gọi được — nó không cắt animation.
+     */
     private forceMediaRecalc;
     private rebuildChart;
     private checkEmpty;