@foxeltech/angular-ui 0.7.44 → 0.7.75

package/src/lib/styles/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/src/lib/styles/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/src/lib/styles/utilities.css

@@ -18,6 +18,18 @@
   @apply flex flex-row items-center px-semi;
 }
 
+/* Nhãn "eyebrow" (tiêu đề panel, nhóm facet) — spec CUỐI của demo sau khi
+   lớp override đè lên base: font MONO, 11.5px, weight 600, letter-spacing
+   0.02em và KHÔNG viết hoa. Base DS viết hoa + tracking 0.08em, nhưng
+   override đặt `text-transform: none` nên demo hiển thị chữ thường. */
+@utility txt-eyebrow {
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-xs);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: rgb(var(--og-text-muted));
+}
+
 @utility card-common {
   @apply text-left px-xl py-large border border-border-default rounded-lg shadow-sm transition-colors duration-500 ease-in-out;
 }

package/src/lib/ui/components/button/button.component.html

@@ -7,6 +7,7 @@
     'btn-default': buttonVariant() === 'default',
     'btn-primary': buttonVariant() === 'primary',
     'btn-success': buttonVariant() === 'success',
+    'btn-cta': buttonVariant() === 'cta',
     'btn-alternative': buttonVariant() === 'alternative',
   }"
   [disabled]="disabled() || loading()"
@@ -226,6 +227,7 @@
               'text-text-primary': buttonVariant() === 'alternative',
               'text-accent-contrast': buttonVariant() === 'primary',
               'text-surface': buttonVariant() === 'success',
+              'text-white': buttonVariant() === 'cta',
             }"
           ></fx-ui-hero-icon>
         }

package/src/lib/ui/components/drawer/drawer.component.scss

@@ -123,7 +123,9 @@
 }
 
 .drawer-section-label {
-  @apply px-large pt-4 pb-1 text-[11px] font-semibold uppercase text-faint select-none;
+  /* Demo (.og-sidebar__section sau override): 10.5px, text-faint, giãn chữ
+     .08em và KHÔNG viết hoa — override đặt `text-transform: none`. */
+  @apply px-large pt-4 pb-1 text-[10.5px]/[1.4] font-semibold text-faint select-none;
   letter-spacing: var(--og-tracking-label);
 }
 

package/src/lib/ui/components/facets-rail/facets-rail.component.html

@@ -6,12 +6,7 @@
   }
   @for (group of groups(); track group.id) {
     <div role="group" [attr.aria-label]="group.label">
-      <div
-        class="txt-table-header uppercase mb-small"
-        [style.letter-spacing]="'var(--og-tracking-label)'"
-      >
-        {{ group.label }}
-      </div>
+      <div class="txt-eyebrow mb-small">{{ group.label }}</div>
       <div class="flex flex-col gap-xs">
         @for (option of group.options; track option.value) {
           <button

package/src/lib/ui/components/master-detail/master-detail.component.css

@@ -1,24 +1,76 @@
-/* Full-width when stacked; fixed width beside the detail pane on lg+ (1080px). */
-.fx-md-list {
-  width: 100%;
-}
+/* ============================================================================
+   Layout 3 cụm quyết định theo BỀ RỘNG CỦA CHÍNH HÀNG ĐÓ, không theo viewport.
 
-@media (min-width: 1080px) {
-  .fx-md-list {
-    width: var(--fx-md-list-width, 420px);
-    flex-shrink: 0;
-  }
+   🔬 Vì sao đổi (truy ra 03/09): trước đây dùng `@media (min-width: 1080px)`
+   cộng với `lg:flex-row` (mà `lg` trong lib này là **1080px**, không phải
+   1024px). Viewport là proxy SAI cho câu hỏi "có đủ chỗ cho 3 cụm không":
+   hàng thật = viewport − drawer(261px) − padding. Đo được:
+
+     viewport 1080 → hàng 787px → facets 230 + list 420 + gap ≈ 690
+                                  ⇒ cụm detail chỉ còn **97px**
+     viewport 1280 → hàng 987px ⇒ detail 297px (vẫn vỡ)
+     viewport 1440 → hàng 1147px ⇒ detail 457px (mới dùng được)
+
+   Nên có HAI vùng hỏng: <1080px xếp dọc dù màn to (đúng cái anh Tú gặp: OS
+   scaling 125-150% hoặc zoom kéo viewport xuống dưới 1080), và 1080-1280px
+   "ba cột nhưng detail quá hẹp".
+
+   Container query chữa cả hai: hàng tự biết mình rộng bao nhiêu, nên drawer
+   thu lại là có thêm chỗ ngay, và không phụ thuộc thang breakpoint toàn cục.
+   ============================================================================ */
+
+/* Host là containment context. `display: block` là BẮT BUỘC — host component
+   mặc định `display: inline` thì `container-type: inline-size` không có
+   inline-size xác định để đo. */
+:host {
+  display: block;
+  container-type: inline-size;
+  container-name: fx-md;
 }
 
-/* Facets rail: full-width when stacked; fixed narrow column on lg+. */
+/* Mặc định: xếp dọc, mỗi cụm full width, chiều cao tự nhiên.
+   KHÔNG ép chiều cao khi xếp dọc — sẽ sinh ba hộp cuộn tí hon lồng trong
+   trang đang cuộn, tệ hơn hẳn. */
+.fx-md-list,
 .fx-md-facets {
   width: 100%;
 }
 
-@media (min-width: 1080px) {
+/*
+ * Ngưỡng 968px = ĐÚNG tổng bề rộng tối thiểu dùng được của ba cụm:
+ *   facets 200 + list 320 + detail 400 + 2 gap (~48) = 968px
+ * Dưới ngưỡng thì thật sự không đủ chỗ → xếp dọc là đúng, không phải lỗi.
+ *
+ * ⚠️ Đừng làm tròn lên 1000px: viewport 1280 (rất phổ biến) cho hàng đúng
+ * 987px — trượt ngưỡng 1000 chỉ vì 13px dù thừa sức xếp 3 cụm ở mức sàn
+ * (đo được: facets 200 / list 320 / detail 419).
+ */
+@container fx-md (min-width: 968px) {
+  .fx-md-row {
+    flex-direction: row;
+    height: var(--fx-md-pane-h, calc(100vh - 300px));
+    min-height: 420px;
+  }
+
+  /* Panes CO GIÃN: facets/list nhường chỗ để cụm detail luôn có sàn 400px.
+     `--fx-md-list-width` (input `listWidth`) giờ là bề rộng MONG MUỐN kiêm
+     tối đa của cụm list, không còn là con số cứng. */
   .fx-md-facets {
-    width: 230px;
-    flex-shrink: 0;
+    flex: 0 1 230px;
+    min-width: 200px;
+    max-width: 260px;
+  }
+
+  .fx-md-list {
+    width: auto;
+    flex: 0 1 var(--fx-md-list-width, 420px);
+    min-width: 320px;
+    max-width: var(--fx-md-list-width, 420px);
+  }
+
+  .fx-md-detail {
+    flex: 1 1 400px;
+    min-width: 400px;
   }
 }