MIH Design System — tokens.css

1/* ─────────────────────────────────────────────────────────────

2 * GENERATED FILE — DO NOT EDIT BY HAND

3 *

4 * Mirror ของ @mih/design-tokens/tokens.css (namonlims/mih-design →

5 * packages/design-tokens). แก้ token ที่ repo mih-design แล้วรัน

6 * `npm run tokens:pull` ที่นี่เพื่ออัปเดตไฟล์นี้ + design.md แล้ว commit

7 *

8 * ที่ commit ไฟล์ generate ไว้ในรีโปเพราะ build ต้องทำงานได้บนเครื่องที่

9 * ไม่มีสิทธิ์อ่าน mih-design (office-202 cron, GitHub runner, dev ใหม่)

10 * ───────────────────────────────────────────────────────────── */

11/*

12 * @mih/design-tokens — MIH PHCIS design tokens (CSS custom properties)

13 * Source of truth extracted from bma.health src/index.css + design.md

14 * Do not put app/component chrome here — tokens only.

15 */

16

17/* ─────────────────────────────────────────────────────────────

18 DESIGN TOKENS · MIH PHCIS

19 Two-layer system per design.md:

20 1. Brand primitives (var(--brand-p50..950)) — switch per mode

21 2. Semantic tokens — alias the primitives

22 Switch brand by setting <html data-brand="..."> (10 modes).

23 All semantic tokens that reference --brand-p* update atomically.

24 ───────────────────────────────────────────────────────────── */

25

26/* ── 1. Brand primitives — DEFAULT (emerald + forest) ──────── */

27/* Values match design.md §1a "emerald" palette (rows 28-40).

28 Do NOT diverge: many semantic tokens (border/brandPrimary/tertiary,

29 border/brandPrimaryButton/tertiary, surface/steps/hover, brandTag …)

30 resolve through these primitives. */

31:root {

32 --brand-p50: #F4FBF8;

33 --brand-p100: #E2F3EB;

34 --brand-p200: #C5EDDA; /* emerald/200 — Selected radio/border tint */

35 --brand-p300: #91DFBB; /* emerald/300 */

36 --brand-p400: #6AD6A5;

37 --brand-p500: #54CF97;

38 --brand-p600: #08A768;

39 --brand-p700: #007549;

40 --brand-p800: #004C31;

41 --brand-p900: #003322;

42 --brand-p950: #002318;

43 --sky-cyan-50: #F4F9FD;

44 --sky-cyan-950: #081E40;

45

46 --brand-s100: #EFF5EF;

47 --brand-s200: #E1F0E0;

48 --brand-s700: #366233;

49

50 /* RGB triplets (space-separated for rgb() modern syntax) */

51 --brand-p400-rgb: 106 214 165;

52 --brand-p500-rgb: 84 207 151;

53 --brand-p600-rgb: 8 167 104;

54 --brand-p700-rgb: 0 117 73;

55 --brand-p800-rgb: 0 76 49;

56

57 /* PatientCard defaults (keep original default visual) */

58 --patient-card-grad-start: rgb(0 164 172);

59 --patient-card-grad-end: rgb(31 160 145);

60 --patient-card-avatar-bg: #6EBBD0;

61}

62

63/* Non-default themed modes should follow active brand tokens */

64[data-brand]:not([data-brand="default"]) {

65 --patient-card-grad-start: var(--brand-p700);

66 --patient-card-grad-end: var(--brand-p600);

67 --patient-card-avatar-bg: var(--brand-p400);

68}

69

70

71/* ── Brand mode overrides (per design.md §2) ─────────── */

72[data-brand="blue-serenity"] {

73 --brand-p50: #F0F2FF; --brand-p100: #E4E8FF; --brand-p200: #D0D7FF;

74 --brand-p300: #BBC6FE; --brand-p400: #A5B3FC; --brand-p500: #8EA0F8;

75 --brand-p600: #7A8CF0; --brand-p700: #6676E0; --brand-p800: #5060C8;

76 --brand-p900: #3A4AAA; --brand-p950: #2A3488;

77 --brand-s100: #E4E8FF; --brand-s200: #D0D7FF; --brand-s700: #6676E0;

78 --brand-p400-rgb: 165 179 252; --brand-p500-rgb: 142 160 248;

79 --brand-p600-rgb: 122 140 240; --brand-p700-rgb: 102 118 224;

80 --brand-p800-rgb: 80 96 200;

81}

82[data-brand="soft-lavender"] {

83 --brand-p50: #FAF7FF; --brand-p100: #F2ECFF; --brand-p200: #E5D9FF;

84 --brand-p300: #D6C6FA; --brand-p400: #C5B2F5; --brand-p500: #B49EEE;

85 --brand-p600: #9D87D8; --brand-p700: #836FC0; --brand-p800: #6655A0;

86 --brand-p900: #4A3D7A; --brand-p950: #302754;

87 --brand-s100: #F2ECFF; --brand-s200: #E5D9FF; --brand-s700: #836FC0;

88 --brand-p400-rgb: 197 178 245; --brand-p500-rgb: 180 158 238;

89 --brand-p600-rgb: 157 135 216; --brand-p700-rgb: 131 111 192;

90 --brand-p800-rgb: 102 85 160;

91}

92[data-brand="dusty-mauve"] {

93 --brand-p50: #F9F4F5; --brand-p100: #F2E6E8; --brand-p200: #E4CDD0;

94 --brand-p300: #D0ADB2; --brand-p400: #B58E94; --brand-p500: #977177;

95 --brand-p600: #7E5A60; --brand-p700: #664750; --brand-p800: #503840;

96 --brand-p900: #3C2A30; --brand-p950: #281C21;

97 --brand-s100: #F2E6E8; --brand-s200: #E4CDD0; --brand-s700: #664750;

98 --brand-p400-rgb: 181 142 148; --brand-p500-rgb: 151 113 119;

99 --brand-p600-rgb: 126 90 96; --brand-p700-rgb: 102 71 80;

100 --brand-p800-rgb: 80 56 64;

101}

102[data-brand="muted-teal"] {

103 --brand-p50: #F0F8F7; --brand-p100: #DAEEED; --brand-p200: #B5DBD9;

104 --brand-p300: #8DC3C0; --brand-p400: #7AABA8; --brand-p500: #6F9693;

105 --brand-p600: #5A7D7A; --brand-p700: #486462; --brand-p800: #374E4C;

106 --brand-p900: #283A38; --brand-p950: #1A2726;

107 --brand-s100: #DAEEED; --brand-s200: #B5DBD9; --brand-s700: #486462;

108 --brand-p400-rgb: 122 171 168; --brand-p500-rgb: 111 150 147;

109 --brand-p600-rgb: 90 125 122; --brand-p700-rgb: 72 100 98;

110 --brand-p800-rgb: 55 78 76;

111}

112[data-brand="sakura"] {

113 --brand-p50: #FFF8FA; --brand-p100: #FFEDF3; --brand-p200: #FFE0EC;

114 --brand-p300: #FFCFDF; --brand-p400: #FFC0D4; --brand-p500: #F5AFCA;

115 --brand-p600: #E89DBA; --brand-p700: #D687A8; --brand-p800: #C07494;

116 --brand-p900: #A35C7C; --brand-p950: #8A4665;

117 --brand-s100: #FFEDF3; --brand-s200: #FFE0EC; --brand-s700: #D687A8;

118 --brand-p400-rgb: 255 192 212; --brand-p500-rgb: 245 175 202;

119 --brand-p600-rgb: 232 157 186; --brand-p700-rgb: 214 135 168;

120 --brand-p800-rgb: 192 116 148;

121}

122[data-brand="rose-mist"] {

123 --brand-p50: #FFF9F9; --brand-p100: #FCEEED; --brand-p200: #F8E0DF;

124 --brand-p300: #F4D0CF; --brand-p400: #EEBFBE; --brand-p500: #E5ADAC;

125 --brand-p600: #D49A99; --brand-p700: #BC8584; --brand-p800: #A06F6E;

126 --brand-p900: #7E5554; --brand-p950: #5E3C3C;

127 --brand-s100: #FCEEED; --brand-s200: #F8E0DF; --brand-s700: #BC8584;

128 --brand-p400-rgb: 238 191 190; --brand-p500-rgb: 229 173 172;

129 --brand-p600-rgb: 212 154 153; --brand-p700-rgb: 188 133 132;

130 --brand-p800-rgb: 160 111 110;

131}

132[data-brand="soft-sky"] {

133 --brand-p50: #F5FBFF; --brand-p100: #E8F5FD; --brand-p200: #D6ECFA;

134 --brand-p300: #D6ECFA; --brand-p400: #A8D3EE; --brand-p500: #8EC4E5;

135 --brand-p600: #8EC4E5; --brand-p700: #5594C4; --brand-p800: #3D78A8;

136 --brand-p900: #285A82; --brand-p950: #183D5C;

137 --brand-s100: #E8F5FD; --brand-s200: #D6ECFA; --brand-s700: #5594C4;

138 --brand-p400-rgb: 168 211 238; --brand-p500-rgb: 142 196 229;

139 --brand-p600-rgb: 142 196 229; --brand-p700-rgb: 85 148 196;

140 --brand-p800-rgb: 61 120 168;

141}

142[data-brand="soft-peach"] {

143 --brand-p50: #FFFAF7; --brand-p100: #FEF0E8; --brand-p200: #FDE2D0;

144 --brand-p300: #FCD1B8; --brand-p400: #FBBEA0; --brand-p500: #FAA381;

145 --brand-p600: #E88A66; --brand-p700: #D0714D; --brand-p800: #B05A38;

146 --brand-p900: #844026; --brand-p950: #562814;

147 --brand-s100: #FEF0E8; --brand-s200: #FDE2D0; --brand-s700: #D0714D;

148 --brand-p400-rgb: 251 190 160; --brand-p500-rgb: 250 163 129;

149 --brand-p600-rgb: 232 138 102; --brand-p700-rgb: 208 113 77;

150 --brand-p800-rgb: 176 90 56;

151}

152[data-brand="warm-gray"] {

153 --brand-p50: #F5F3F1; --brand-p100: #EBE7E4; --brand-p200: #D5CEC9;

154 --brand-p300: #BDB5AF; --brand-p400: #A39A94; --brand-p500: #8A8078;

155 --brand-p600: #726760; --brand-p700: #5C504A; --brand-p800: #463C37;

156 --brand-p900: #312B26; --brand-p950: #211D19;

157 --brand-s100: #EBE7E4; --brand-s200: #D5CEC9; --brand-s700: #5C504A;

158 --brand-p400-rgb: 163 154 148; --brand-p500-rgb: 138 128 120;

159 --brand-p600-rgb: 114 103 96; --brand-p700-rgb: 92 80 74;

160 --brand-p800-rgb: 70 60 55;

161}

162

163/* ── 2. Semantic tokens — alias primitives + neutrals ──────── */

164:root {

165 /* — Surface · brand-aware — */

166 --surface-brandPrimary-default: var(--brand-p700);

167 --surface-brandPrimary-default-hover: var(--brand-p800);

168 --surface-brandPrimary-secondary: var(--brand-p200);

169 --surface-brandPrimary-tertiary: var(--brand-p100);

170 --surface-brandPrimary-quaternary: var(--brand-p50);

171

172 --surface-brandPrimaryButton-default: var(--brand-p700);

173 --surface-brandPrimaryButton-hover: var(--brand-p800);

174 --surface-brandPrimaryButton-tertiary: var(--brand-p100);

175

176 /* Danger Button — Figma 2024:3590, design.md §4.5 */

177 --surface-dangerButton-default: #B91C1C; /* red/700 */

178 --surface-dangerButton-default-hover: #991B1B; /* red/800 */

179 --surface-dangerButton-secondary: #FECACA; /* red/200 */

180 --surface-dangerButton-secondary-hover:#FCA5A5; /* red/300 */

181 --surface-dangerButton-tertiary: #FEE2E2; /* red/100 */

182 --surface-dangerButton-tertiary-hover: #FECACA; /* red/200 */

183 --surface-dangerButton-quaternary: #FFF0F0; /* red/50 */

184 --surface-dangerButton-quaternary-hover:#FEE2E2; /* red/100 */

185 --surface-dangerButton-quinary: #FFFFFF;

186 --surface-dangerButton-quinary-hover: #FFF0F0; /* red/50 */

187 --border-dangerButton-default: #DC2626; /* red/600 — Figma `border/dangerbutton/default` (Outline border is one step lighter than the red/700 fill) */

188 --border-dangerButton-default-hover: #B91C1C; /* red/700 */

189 --border-dangerButton-secondary: #F87171; /* red/400 — Subdue Outline hover border (Figma 2024:4434) */

190 --border-dangerButton-secondary-hover: #EF4444; /* red/500 */

191 --border-dangerButton-tertiary: #FECACA; /* red/200 — Focus ring (4px) Figma 2024:3701 */

192 --border-dangerButton-quaternary: #FEE2E2; /* red/100 — Active state border Figma 2024:3701 */

193 --border-dangerButton-quaternary-hover:#FECACA; /* red/200 — Active+hover border (Danger Circle Subdue, Figma 3853:1298) */

194 --text-dangerButton-default: #B91C1C; /* red/700 */

195 --text-dangerButton-default-hover: #991B1B;

196 --text-dangerButton-on-danger: #FFFFFF;

197 --text-danger-default: #B91C1C; /* text/danger/default — elevated vitals (Figma 184:17588) */

198 --text-warning-default: #C2410C; /* text/warning/default — orange/700 */

199 --text-info-default: #1D4ED8; /* text/info/default — blue/700 (design.md §4.2) */

200 --text-info-emphasis: #3B82F6; /* text/info/emphasis — blue/500 (health BMI value) */

201 --text-info-secondary: #2563EB; /* text/info/secondary — blue/600 */

202 --text-info-tertiary: #60A5FA; /* text/info/tertiary — blue/400 */

203 /* Status-tertiary surfaces — soft tonal tile fills for Status Summary

204 Cards (Figma PHCIS | Consent 297:83830). design.md §4.5. */

205 --surface-danger-tertiary: #FEE2E2; /* red/100 */

206 --surface-info-tertiary: #DBEAFE; /* blue/100 */

207 --surface-neutral-tertiary: #F4F5F5; /* neutral/100 */

208 --icon-dangerButton-default: #B91C1C;

209 --icon-dangerButton-default-hover: #991B1B;

210 --icon-dangerButton-on-danger: #FFFFFF;

211

212 /* Neutral Button — Figma 2024:3591, design.md §4.5 */

213 --surface-neutralButton-default: #4D5358; /* neutral/700 */

214 --surface-neutralButton-default-hover: #363B3F; /* neutral/800 */

215 --surface-neutralButton-secondary: #E2E4E6; /* neutral/200 */

216 --surface-neutralButton-secondary-hover:#C9CDD0; /* neutral/300 */

217 --surface-neutralButton-tertiary: #F4F5F5; /* neutral/100 */

218 --surface-neutralButton-tertiary-hover:#E2E4E6; /* neutral/200 */

219 --surface-neutralButton-quaternary: #F9FBFB; /* neutral/50 */

220 --surface-neutralButton-quaternary-hover:#F4F5F5; /* neutral/100 */

221 --surface-neutralButton-quinary: #FFFFFF;

222 --surface-neutralButton-quinary-hover: #F9FBFB;

223 --border-neutralButton-default: #4D5358;

224 --border-neutralButton-default-hover: #363B3F;

225 --border-neutralButton-secondary: #ADB2B7; /* neutral/400 — Focus ring (4px) for Fill Neutral (Figma 2024:4189) */

226 --border-neutralButton-tertiary: #E2E4E6; /* neutral/200 — Outline default border + Focus ring for Outline/Ghost */

227 --border-neutralButton-quaternary: #F4F5F5; /* neutral/100 — Active state border (Figma 2024:4189) */

228 --text-neutralButton-default: #4D5358;

229 --text-neutralButton-default-hover: #363B3F;

230 --text-neutralButton-on-neutral: #FFFFFF;

231 --icon-neutralButton-default: #4D5358;

232 --icon-neutralButton-default-hover: #363B3F;

233 --icon-neutralButton-on-neutral: #FFFFFF;

234 /* design.md row 3979 · icon/neutral/default → neutral/700.

235 Used as the inline-icon color for RadioButton (Figma node 2831:6734)

236 and any caller asking for the canonical neutral icon shade. */

237 --icon-neutral-default: #4D5358;

238 --icon-neutral-secondary: #636B72; /* icon/neutral/secondary → neutral/500 */

239 --icon-neutral-tertiary: #ADB2B7; /* icon/neutral/tertiary → neutral/400 */

240

241 --surface-steps-default: var(--brand-p100); /* surface/steps/default → primary/100 */

242 --surface-steps-hover: var(--brand-p200); /* surface/steps/hover → primary/200 */

243 --surface-steps-selected: var(--brand-p700); /* surface/steps/selected → primary/700 */

244 --surface-steps-success: #24A899; /* surface/steps/success → teal/500 (fixed) */

245 --surface-steps-success-hover: #1B867D; /* surface/steps/success-hover → teal/600 (fixed) */

246 /* legacy aliases — keep until callers migrate */

247 --surface-steps-default-hover: var(--surface-steps-hover);

248 --surface-steps-selected-hover: var(--brand-p800);

249

250 --surface-card-100: #FFFFFF;

251 --surface-camera-viewport: #111827;

252 --surface-card-200: #FDFDFD; /* surface/card/200 → grey/100 (light) */

253 --surface-card-skycyan-100: var(--sky-cyan-50); /* surface/card/skycyan-100 → sky-cyan/50 */

254 /* surface/card/brand-100 → brand-p50 (Figma 2498:6269, 133:1031 Selected-Hover).

255 Despite the "100" in the name, the Figma primitive is primary/50.

256 Brand-aware via --brand-p50, so retints with <html data-brand="…">. */

257 --surface-card-brand100: var(--brand-p50);

258 --surface-card-sakura-200: #FFEDF3; /* surface/card/sakura-200 → color/sakura/100 (light) · color/sakura/900 #A35C7C (dark) */

259 --surface-input-default: #FFFFFF;

260 --surface-table-default: #FFFFFF; /* surface.table.default */

261

262 /* — TabPill / TabBar (Figma MIH Design System Foundation 2514:7929, 370:30;

263 design.md §6 rows 1297–1300, 1662–1665, 1965–1969).

264 Light values below — override under `[data-mode="dark"]` for dark mode. */

265 --surface-tabpill-background: var(--brand-p100); /* surface/tabpill/background emerald/100 ↔ emerald/900 */

266 --surface-tabpill-default: #FFFFFF; /* surface/tabpill/default grey/50 ↔ neutral/800 */

267 --surface-tabpill-selected: var(--surface-tabpill-default); /* alias of default */

268 --surface-tabpill-hover: var(--brand-p200); /* surface/tabpill/hover primary/200 ↔ primary/800 */

269 --surface-tabpill-disabled: var(--surface-tabpill-default); /* alias of default */

270 --text-tabpill-default: var(--brand-p700); /* text/tabpill/default primary/700 ↔ primary/300 */

271 --text-tabpill-hover: var(--brand-p700); /* text/tabpill/hover */

272 --text-tabpill-selected: var(--brand-p700); /* text/tabpill/selected */

273 --text-tabpill-disabled: var(--brand-p500); /* text/tabpill/disabled primary/500 (both modes) */

274 --icon-tabpill-default: var(--brand-p700); /* icon/tabpill/default primary/700 ↔ primary/300 */

275 --icon-tabpill-hover: var(--brand-p700); /* icon/tabpill/hover */

276 --icon-tabpill-selected: var(--brand-p700); /* icon/tabpill/selected */

277 --icon-tabpill-disabled: var(--brand-p500); /* icon/tabpill/disabled primary/500 (both modes) */

278 --text-neutral-default: var(--text-neutralbutton-default); /* text/neutral/default — alias used by Selected label in Figma */

279

280 /* — Timeslot (Figma 2302:11293) — outline-style Selected swap, not

281 the older filled chip. Light mode aliases the brand-p600 token;

282 dark mode swaps to brand-p400 inside the matching @media block

283 below. Surface + border tokens move in lockstep so the chip reads

284 as a 2 px brand outline on a white pill. */

285 --text-timeslot-selected: var(--brand-p600);

286 --border-timeslot-selected: var(--brand-p600);

287 --surface-timeslot-selected: var(--surface-timeslot-default, #FFFFFF);

288 /* Default-state border for the pill AND the surrounding slot tray.

289 Aliases brand-quaternary so the chip's idle outline picks up the

290 same soft mint hairline the Figma 2302:11293 / 4025:14538 panels

291 use — retints via [data-brand] so non-green themes follow suit. */

292 --border-timeslot-default: var(--border-brandPrimary-quaternary);

293

294 /* — Calendar slot (design.md text/surface/border.calendar slot.* · Appointment) */

295 --text-calendar-slot-date-default: #4D5358;

296 /* Today's pill — white on bright brand-p600 green per Figma 134:20117. */

297 --text-calendar-slot-date-current: #FFFFFF;

298 --text-calendar-slot-date-hover: var(--brand-p700);

299 --text-calendar-slot-date-selected: #FFFFFF;

300 --text-calendar-slot-date-disabled: #CBD5E1;

301 --text-calendar-slot-slot-default: var(--brand-p500);

302 --text-calendar-slot-slot-hover: var(--brand-p700);

303 --text-calendar-slot-slot-selected: #FFFFFF;

304 --text-calendar-slot-slot-disabled: #CBD5E1;

305 --text-calendar-slot-cta-default: var(--brand-p600);

306 --text-calendar-slot-cta-hover: var(--brand-p700);

307 --text-calendar-slot-cta-disabled: #CBD5E1;

308 --text-calendar-slot-month: #4D5358;

309 --text-calendar-slot-text: var(--brand-p700);

310 --border-calendar-slot-slot-default: var(--brand-p100);

311 --border-calendar-slot-slot-hover: var(--brand-p200);

312 --border-calendar-slot-slot-selected: #24A899;

313 --border-calendar-slot-slot-disabled: #F5F7F9;

314 --surface-calendar-slot-date-default: #FFFFFF;

315 /* Today's pill — bright brand-p600 (#08A768) per Figma 134:20117.

316 Distinct from brand-p700 (selected) and brand-p100 (hover) so the

317 user can tell "today" apart from interaction states. */

318 --surface-calendar-slot-date-current: var(--brand-p600);

319 --surface-calendar-slot-date-hover: var(--brand-p100);

320 --surface-calendar-slot-date-selected: var(--brand-p700);

321 --surface-calendar-slot-date-disabled: #FFFFFF;

322 --surface-calendar-slot-slot-default: #FFFFFF;

323 --surface-calendar-slot-slot-hover: var(--brand-p50);

324 --surface-calendar-slot-slot-selected: #24A899;

325 --surface-calendar-slot-slot-disabled: #FFFFFF;

326 --surface-calendar-slot-cta-default: #FFFFFF;

327 --surface-calendar-slot-cta-hover: var(--brand-p50);

328 --surface-calendar-slot-cta-disabled: #FFFFFF;

329 --icon-calendar-slot-selected: #FFFFFF;

330

331 /* — Profile avatar surfaces (Figma Appointment 1:38622 DoctorG · design.md §6.11) — */

332 --surface-profile-avatar-default: #CFE6F7;

333 --surface-profile-avatar-secondary: #E7F1F8;

334

335 /* — Vital sign chart-area (Figma PHCIS-ALL 2418:69815) — */

336 --surface-chart-area: #FEFEFE; /* chart-area fill */

337 --text-chart-axis-label: #A3ACB4; /* axis + date ticks */

338 --stroke-chart-grid: var(--border-neutral-quaternary);

339 --stroke-chart-series-sbp: #2575EF; /* SBP / informational blue */

340 --stroke-chart-series-dbp: #F49A1F; /* DBP / orange */

341 --dim-radius-chart-area: 10px; /* Figma chart-area r=10 */

342

343 /* — Border · brand-aware — */

344 --border-brandPrimary-default: var(--brand-p700);

345 --border-brandPrimary-tertiary: var(--brand-p200);

346 --border-brandPrimary-quaternary: var(--brand-p100); /* Brand/primary/100 per design.md */

347 --border-input-hover: var(--brand-p600);

348 --border-steps-default: var(--brand-p200);

349

350 --border-card-default: #E2E4E6;

351 --border-card-sakura-100: #FFE0EC; /* border/card/sakura-100 → color/sakura/200 (light) · color/sakura/700 #D687A8 (dark) */

352 --border-input-default: #E2E4E6;

353 --border-neutral-quat: #F4F5F5;

354

355 /* — Text · brand-aware — */

356 --text-brandPrimary-default: var(--brand-p700);

357 --text-brandPrimary-secondary: var(--brand-p600);

358 --text-brandPrimary-on-brand: #FFFFFF;

359 --text-brandPrimaryButton-default: var(--brand-p700);

360 --text-brandPrimaryButton-on-brand: #FFFFFF;

361 --text-payment-total: #24A899; /* Pharmacy payment total → teal/500 */

362 --text-steps-default: var(--brand-p700); /* text/steps/default */

363 --text-steps-select: #FFFFFF; /* text/steps/select */

364 --text-steps-title: rgb(var(--brand-p700-rgb) / 0.5); /* text/steps/title */

365 --text-steps-title-select: var(--brand-p700); /* text/steps/title-select */

366 --text-steps-title-hover: var(--brand-p700); /* text/steps/title-hover */

367 --text-steps-title-success: #196c65; /* text/steps/title-success → teal/700 (fixed) */

368 --text-steps-subtitle: #858C92; /* text/steps/subtitle → neutral/500 (fixed) */

369 --icon-steps-success-on: #FFFFFF; /* icon/step/success-on */

370

371 /* Step DS aliases (design.md naming) */

372 --surface-step-default: var(--surface-steps-default); /* surface.steps.default */

373 --surface-step-selected: var(--surface-steps-selected); /* surface.steps.selected */

374 --surface-step-selected-hover: var(--surface-steps-selected-hover);

375 --surface-step-default-hover: var(--surface-steps-default-hover);

376 --surface-step-success: #24A899; /* surface.steps.success */

377 --focus-ring-step-current: var(--primaryBorder-600); /* ring glow primary/600 @15% */

378 --border-step-default: var(--border-steps-default); /* border.steps.default */

379 --text-step-default: var(--text-steps-default); /* text.steps.default */

380 --text-step-selected: var(--text-steps-select); /* text.steps.select */

381 --text-step-title: var(--text-steps-title); /* text.steps.title/subtitle */

382 --text-step-title-hover: var(--text-steps-title-hover); /* text.steps.title-hover */

383 --text-step-title-selected: var(--text-steps-title-select); /* text.steps.title-select */

384 --icon-step-success-on: #FFFFFF; /* icon.step.success-on */

385 --text-navigation-title: var(--brand-p700);

386 --text-topic-primary-title: var(--brand-p700);

387 /* text/topic/secondary-title — Figma Telemed headers (Mitr 16 / #007549) */

388 --text-topic-secondary-title: var(--brand-p700);

389 /* text/topic/tertiary-subtext — Session ID / off-surface caption */

390 --text-topic-tertiary-subtext: #ADB2B7;

391 --text-topic-tertiary-subtext-on: #858C92;

392 --icon-topic-default: var(--brand-p700); /* icon/topic/default → Brand/primary/700 */

393 --icon-topic-hover: var(--brand-p700); /* icon/topic/hover → Brand/primary/700 */

394

395 /* — Text · neutral / static — */

396 --text-content-default: #363B3F;

397 --text-content-secondary: #636B72;

398 --text-content-tertiary: #858C92;

399 --text-content-quaternary: #ADB2B7;

400 --text-content-on-content: #FFFFFF;

401 --labels-primary: #000000; /* iOS home indicator / system label */

402 --text-neutralbutton-default: #4D5358;

403 --text-breadcrumb-current: #363B3F;

404 --text-breadcrumb-pagename: #858C92;

405 --text-input-require: #DC2626;

406

407 /* — Form Input · alias per design.md §6.4 ───────────

408 trigger field used by Dropdown / DatePicker / TextInput. */

409 /* surface.positive.* — teal ramp (design.md §4). The register/OTP stepper

410 paints the CURRENT segment with positive/default. */

411 --surface-positive-default: #196C65; /* teal/700 */

412 --surface-positive-tertiary: #D1F6EE; /* teal/100 */

413

414 --surface-input-disabled: #F4F5F5;

415 --border-input-filled: #E2E4E6;

416 --border-input-error: #DC2626;

417 --border-input-disabled: #E2E4E6;

418 --border-input-typing: var(--brand-p600); /* brand-aware */

419 --text-input-default: #ADB2B7; /* placeholder */

420 --text-input-hover: #ADB2B7;

421 --text-input-typing: #4D5358;

422 --text-input-filled: #4D5358; /* selected value */

423 --text-input-disabled: #ADB2B7;

424 /* Disabled ink for the Input Field label + helper (Figma DS "Input Field"

425 opz7X9AAKGQf5prHhsPDGn 267:25 → text/disabled/secondary · -tertiary). */

426 --text-disabled-secondary: #636B72; /* neutral/600 */

427 --text-disabled-tertiary: #ADB2B7; /* neutral/400 */

428 --icon-input-default: #ADB2B7; /* placeholder/idle/error/disabled */

429 --icon-input-filled: #4D5358; /* open / value-selected — n700 */

430 --icon-input-hover: var(--brand-p600); /* brand-aware (reserved) */

431 --primaryBorder-600: rgb(var(--brand-p600-rgb) / 0.15); /* effect/input/100 */

432 --focus-ring-input-hover: rgb(var(--brand-p600-rgb) / 0.15);

433 --focus-ring-input-typing: var(--primaryBorder-600);

434 --focus-ring-input-error: rgb(220 38 38 / 0.12);

435 /* Input state aliases — Figma states keep placeholder/icon gray; only the

436 border + focus ring move. Adding the missing names so components can

437 use one canonical token per state. */

438 --text-input-error: #ADB2B7; /* placeholder stays gray in Error */

439 --icon-input-error: #ADB2B7; /* icon stays gray in Error */

440 --icon-input-disabled: #ADB2B7; /* icon stays gray when disabled */

441 --text-danger-secondary: #DC2626; /* helper text in Error state */

442 /* Select-specific aliases (Figma 268:55) */

443 --text-input-label: #4D5358; /* Field label color (neutral/700) */

444 --text-input-helper: #ADB2B7; /* Helper text under select (neutral/400) */

445 --text-input-errorHelper: var(--text-danger-secondary); /* Error helper (#DC2626) */

446 --icon-input-typing: #4D5358; /* Leading icon in Open/Filled state */

447 --surface-disabled-tertiary: var(--surface-input-disabled); /* alias for Figma "surface/disabled/tertiary" */

448

449 /* — Dropdown panel · alias per design.md §6.14 ────── */

450 --surface-dropdown-default: #FFFFFF;

451 --border-dropdown-default: #EBEBEB;

452 /* Figma "Drop Shadow Bottom/400" — neutral slate-500 (#64748B), two-layer

453 (blur 4 + 32, y-offset 4 + 16, alpha 10% + 15%) per design.md row 762.

454 Canonical shadow for the popup-container family: <Popup>, <AlertDialog>,

455 <ScreeningConfirmPopup>, and any future popup-shaped surface. */

456 /* Figma "Drop Shadow Bottom/100" (design.md §1d effect.drop-shadow-bottom.100) —

457 slate-500 10%, blur 4, y 1. Avatar ring on hero cards (StaffProfileAvatar ring). */

458 --shadow-drop-bottom-100: 0 1px 4px rgb(100 116 139 / 0.10);

459 --shadow-avatar-ring: var(--shadow-drop-bottom-100);

460 --shadow-drop-bottom-400:

461 0 4px 4px rgb(100 116 139 / 0.10),

462 0 16px 32px rgb(100 116 139 / 0.15);

463 /* Back-compat alias — `--shadow-dropdown` predates the explicit

464 drop-bottom-400 name. Both resolve to the same value so existing

465 callers keep working; new code should reference the spec-named token. */

466 --shadow-dropdown: var(--shadow-drop-bottom-400);

467

468 /* Popup backdrop overlay — slate-500 @ 40% so the tint family stays

469 aligned with --shadow-drop-bottom-400. Replaces the hardcoded

470 rgba(15,23,42,0.4) (slate-900) that drifted across Popup, AlertDialog,

471 and CameraCapturePopup. */

472 --surface-overlay-default: rgb(100 116 139 / 0.40);

473 /* background/overlay/default — Figma Telemed dimmers (#64748B80) */

474 --background-overlay-default: #64748B80;

475

476 /* — Modal text (per design.md §4.2) ───────────────── */

477 --text-modal-text: #4D5358; /* Primitive/color/neutral/700 */

478 --text-modal-subtext: #ADB2B7; /* Primitive/color/neutral/400 */

479 /* — Modal borders (multi-select checkbox list rows, Figma 271:12592 · design.md §4.3) — */

480 --border-modal-cardBorder: #F5F6FA; /* Primitive/color/slate/50 — resting card outline */

481 --border-modal-default: var(--border-brandPrimary-default); /* #007549 — hover/active outline (brand-aware) */

482

483 /* — Colorful badge · Figma App 2076:8413 (design.md §4 / §5.11) — */

484 --surface-colorfulBadge-blue: #DBEAFE; /* Primitive/color/blue/100 */

485 --text-colorfulBadge-blue: #1D4ED8; /* Primitive/color/blue/700 */

486 --surface-colorfulbadge-blue: #DBEAFE;

487 --text-colorfulbadge-blue: #1D4ED8;

488 --surface-colorfulbadge-blue-bold: #3B82F6; /* blue/500 */

489 --surface-colorfulbadge-teal: #D1F6EE; /* teal/100 */

490 --text-colorfulbadge-teal: #196C65; /* teal/700 */

491 --surface-colorfulbadge-teal-bold: #24A899; /* teal/500 */

492 --surface-colorfulbadge-orange: #FFEDD5; /* orange/100 */

493 --text-colorfulbadge-orange: #C2410C; /* orange/700 */

494 --surface-colorfulbadge-orange-bold: #F97316; /* orange/500 */

495 --surface-colorfulbadge-grey: #F5F7F9; /* slate/100 */

496 --text-colorfulbadge-grey: #4D5358; /* neutral/700 */

497 --surface-colorfulbadge-grey-bold: #858C92; /* neutral/500 */

498 --surface-colorfulbadge-red: #FEE2E2; /* red/100 */

499 --text-colorfulbadge-red: #B91C1C; /* red/700 */

500 --surface-colorfulbadge-red-bold: #EF4444; /* red/500 */

501 /* PHCIS brand emerald — Distinct from teal; do not alias green → teal. */

502 --surface-colorfulbadge-green: var(--brand-p100); /* #E2F3EB */

503 --text-colorfulbadge-green: var(--brand-p700); /* #007549 */

504 --surface-colorfulbadge-green-bold: #54CF97; /* brand/primary/500 */

505 --surface-colorfulbadge-yellow: #FEF9C3; /* yellow/100 */

506 --text-colorfulbadge-yellow: #A16207; /* yellow/700 */

507 --surface-colorfulbadge-yellow-bold: #EAB308; /* yellow/500 */

508 --surface-colorfulbadge-indigo: #EEF2FF; /* indigo/50–100 · Figma Colorful Badge */

509 --text-colorfulbadge-indigo: #4F46E5; /* indigo/600 · design.md + Archive 367:41054 */

510 --surface-colorfulbadge-indigo-bold: #818CF8; /* indigo/400–500 */

511 --surface-colorfulbadge-pink: #FCE7F3; /* pink/100 */

512 --text-colorfulbadge-pink: #BE185D; /* pink/700 */

513 --surface-colorfulbadge-pink-bold: #EC4899; /* pink/500 */

514 --surface-colorfulbadge-magenta: #FAE8FF; /* fuchsia/100 — Figma Magenta */

515 --text-colorfulbadge-magenta: #A21CAF; /* fuchsia/700 */

516 --surface-colorfulbadge-magenta-bold: #C926E0; /* magenta/500 */

517 --surface-colorfulbadge-purple: #F3E8FF; /* purple/100 */

518 --text-colorfulbadge-purple: #7E22CE; /* purple/700 */

519 --surface-colorfulbadge-purple-bold: #A855F7; /* purple/500 */

520 --text-colorfulbadge-badge-on: #FFFFFF; /* Primary hierarchy label / icon / dot */

521 /* Outline borders — Figma border/colorfulbadge/* (Grey→neutral, Green→brand) */

522 --border-colorfulbadge-neutral: #E2E4E6; /* neutral/200 */

523 --border-colorfulbadge-brand: #C5EDDA; /* brand/primary/200 */

524 --border-colorfulbadge-info: #BFDBFE; /* blue/200 */

525 --border-colorfulbadge-success: #A2EDDE; /* teal/200 */

526 --border-colorfulbadge-warning: #FEF08A; /* yellow/200 */

527 --border-colorfulbadge-warning2:#FED7AA; /* orange/200 */

528 --border-colorfulbadge-error: #FECACA; /* red/200 */

529 /* Telemed queue badge blink rings — Figma PHCIS | Telemed 78:16496 / 78:16478 */

530 --border-telemed-queue-teal-blink: rgba(209, 246, 238, 0.4); /* teal/100 @ 40% */

531 --border-telemed-queue-orange-blink: rgba(254, 215, 170, 0.4); /* orange/200 @ 40% */

532 /* Quick Action press — Archive Figma 519:54747 (100 → 200, one level darker) */

533 --surface-quickaction-purple-pressed: #E9D5FF; /* purple/200 */

534 --surface-quickaction-blue-pressed: #BFDBFE; /* blue/200 */

535 --surface-quickaction-green-pressed: var(--brand-p200); /* brand/200 #C5EDDA */

536 --surface-quickaction-pink-pressed: #FBCFE8; /* pink/200 */

537 --surface-quickaction-indigo-pressed: #C7D2FE; /* indigo/300 (light scale step) */

538 --surface-quickaction-teal-pressed: #A2EDDE; /* teal/200 */

539 --surface-quickaction-orange-pressed: #FED7AA; /* orange/200 */

540 --surface-quickaction-yellow-pressed: #FEF08A; /* yellow/200 */

541 /* Turquoise alias for ColorfulIconBadge — same palette as teal. */

542 --surface-colorfulbadge-turquoise: var(--surface-colorfulbadge-teal);

543 --text-colorfulbadge-turquoise: var(--text-colorfulbadge-teal);

544 --surface-colorfulbadge-turquoise-bold: var(--surface-colorfulbadge-teal-bold);

545

546 /* — Topic surface · per design.md §6.28 (surface.topic.*) ─ */

547 --surface-topic-default: #FFFFFF; /* Primitive/color/grey/50 */

548 --surface-topic-hover: var(--brand-p50, #F4FBF8);

549 --surface-topic-disabled: #F9FBFB;

550

551 /* — Neutral quaternary panel surface (Vitals right column) ── */

552 --surface-neutral-quaternary: #F9FBFB; /* Primitive/color/neutral/50 — surface/neutral/quaternary */

553

554 /* — Border alias mirroring design.md naming ───────── */

555 --border-neutral-quaternary: var(--border-neutral-quat); /* #F4F5F5 */

556 --border-neutral-tertiary: #E2E4E6; /* design.md §6 border/neutral/tertiary — vertical dividers */

557

558 /* — Dropdown list items (brand-aware on hover) ────────────── */

559 --surface-list-default: #FFFFFF;

560 --surface-list-selected: #FFFFFF;

561 --surface-list-hover: var(--brand-p50); /* brand-aware */

562 --surface-list-selected-hover: var(--brand-p50); /* brand-aware */

563 --text-list-default: #4D5358;

564 --text-list-selected: #4D5358;

565 --text-list-hover: var(--brand-p700); /* brand-aware */

566 --text-list-selected-hover: var(--brand-p700); /* brand-aware */

567 /* Subtext rows (Figma List · `Show Subtext` true) — tertiary neutral

568 resting, retints to brand-p500 on hover. Both states inherit from

569 the parent row state, so subtext follows the same tone as the label. */

570 --text-list-subtext: #858C92; /* neutral/500 */

571 --text-list-subtext-hover: var(--brand-p500); /* brand-aware (brand/500) */

572 --icon-list-secondary-default: #858C92;

573 --icon-list-primary-selected-hover: var(--brand-p700); /* brand-aware */

574 --icon-brandSecondary-quaternary: var(--brand-p300); /* alias from primary/300 */

575 /* design.md §6 row 1504 — icon/brandPrimary/default aliases Brand/primary/700.

576 Brand-aware so switching <html data-brand="..."> retints all callers. */

577 --icon-brandPrimary-default: var(--brand-p700);

578 /* Figma icon/brandPrimary/quaternary | secondary — e.g. SuggestList add (335:64463). */

579 --icon-brandPrimary-quaternary: var(--brand-p300);

580 --icon-brandPrimary-secondary: var(--brand-p600);

581 --icon-list-check: var(--icon-brandPrimary-default); /* alias */

582 --icon-step-accent: #FD879F; /* coral accent in two-tone care-journey step glyphs (Figma 371:45332) */

583

584 /* — Brand drop shadow primitives (PHCIS · design.md) ─

585 PrimaryShadow/600 = brand-p600 @ 8%

586 PrimaryShadow/601 = brand-p600 @ 10%

587 PrimaryShadow/602 = brand-p600 @ 12%

588 Brand Drop Shadow Bottom/100 = single-layer 4px blur @ /600. */

589 --PrimaryShadow-600: rgb(var(--brand-p600-rgb) / 0.08);

590 --PrimaryShadow-601: rgb(var(--brand-p600-rgb) / 0.10);

591 --PrimaryShadow-602: rgb(var(--brand-p600-rgb) / 0.12);

592

593 /* — Indigo shadow primitives — `Primitive/color/shadow/indigo-{050,100,400}`.

594 Aliased from the indigo/400 swatch (#818CF8 — same color as

595 `--surface-colorfulbadge-indigo-bold`) at three opacity tiers

596 (050 = 10%, 100 = 15%, 400 = 25%). The `-rgb` triplet is exposed

597 so future shadow composites can use `rgb(var(--indigo-400-rgb) / 0.x)`

598 directly without redefining the same swatch. */

599 --indigo-400-rgb: 129 140 248;

600 --color-shadow-indigo-050: rgb(var(--indigo-400-rgb) / 0.10);

601 --color-shadow-indigo-100: rgb(var(--indigo-400-rgb) / 0.15);

602 --color-shadow-indigo-400: rgb(var(--indigo-400-rgb) / 0.25);

603

604 /* — Background tint primitives — Figma Primitive/color/bg/*

605 Alpha-baked at 20%. Semantic: background.bg.teal-400 / blue-400 (§4).

606 Used as ambient radial washes (e.g. Welcome illustration glow). */

607 --color-bg-teal-400-rgb: 62 195 178; /* #3EC3B2 */

608 --color-bg-teal-600-rgb: 27 134 125; /* #1B867D */

609 --color-bg-sky-cyan-400-rgb: 64 170 242; /* #40AAF2 */

610 --color-bg-sky-cyan-600-rgb: 10 115 203; /* #0A73CB */

611 /* Solid sky-cyan/700 — Clinic Card number-badge text (Figma DS Card 39:197) */

612 --color-sky-cyan-700: #0859A8;

613 --color-bg-teal-400: rgb(var(--color-bg-teal-400-rgb) / 0.20);

614 --color-bg-teal-600: rgb(var(--color-bg-teal-600-rgb) / 0.20);

615 --color-bg-sky-cyan-400: rgb(var(--color-bg-sky-cyan-400-rgb) / 0.20);

616 --color-bg-sky-cyan-600: rgb(var(--color-bg-sky-cyan-600-rgb) / 0.20);

617 --background-bg-teal-400: var(--color-bg-teal-400);

618 --background-bg-blue-400: var(--color-bg-sky-cyan-400);

619

620 /* — Indigo color primitives (Figma Primitive/color/indigo/*) ─

621 Tailwind-equivalent stops 100 / 300 / 400 / 600 / 700. Reused by

622 the aiSearch semantic group below (Doctor-AI search panel — Figma

623 156:27359 / 3396:1598) and any future indigo-themed AI surface. */

624 --color-indigo-100: #EEF2FF; /* indigo/100 — AISearch X-clear chip bg (Figma 3396:3243) */

625 --color-indigo-200: #E0E7FF; /* indigo/200 — AISearch X-clear chip bg on hover (Figma 3396:3245) */

626 --color-indigo-300: #A5B4FC; /* indigo/300 — dark-mode hover/typing border + icon */

627 --color-indigo-400: #818CF8; /* indigo/400 — dark-mode default/filled + light-mode shadow primitive */

628 --color-indigo-500: #6F82FF; /* indigo/500 — Doctor AI panel container border (Figma 156:27359) + border/aiSearch/default (both modes) */

629 --color-indigo-600: #4F46E5; /* indigo/600 — light-mode default/filled border + icon (same as --text-colorfulbadge-indigo) */

630 --color-indigo-700: #4338CA; /* indigo/700 — light-mode hover/typing border + icon */

631

632 /* Indigo-tinted card surface (Figma `surface/card/indigo-100`).

633 Used by the Doctor AI ICD search panel (156:27359) — a soft violet

634 fill so the AI surface reads as distinct from the plain white

635 section cards around it without overpowering the page palette. */

636 --surface-card-indigo-100: #F3F5FC;

637 --border-doctor-ai-panel: var(--color-indigo-500); /* alias to keep ICD-panel callers off the raw color name */

638

639 /* TabBar sliding indicator · TabPill selected (animated=false) —

640 Brand Drop Shadow Bottom/200 — matches --shadow-card; retints with [data-brand] via --brand-p600-rgb. */

641 --shadow-tabpill-selected:

642 0px 1px 4px var(--PrimaryShadow-600),

643 0px 1px 8px var(--PrimaryShadow-601);

644

645 /* — Dimension + Typography aliases (Figma token names) —─────

646 Used by MIH Design System components (Select/TabPill/etc).

647 Keep these as simple pixel/weight aliases so the app can

648 mirror Figma specs without hard-coding magic numbers. */

649 --dimension-space-050: 2px;

650 --dimension-space-100: 4px;

651 --dimension-space-150: 6px;

652 --dimension-space-200: 8px;

653 --dimension-space-300: 12px;

654 --dimension-space-400: 16px;

655

656 --dimension-radius-100: 4px;

657 --dimension-radius-200: 8px;

658 --dimension-radius-500: 16px;

659 --dimension-radius-full: 9999px;

660

661 --dimension-size-300: 16px; /* icon */

662 --dimension-size-500: 24px; /* badge height */

663 --dimension-size-800: 40px; /* avatar */

664 --dimension-size-1000: 48px; /* list row min-h */

665

666 --dimension-stroke-100: 1px;

667 --dimension-stroke-200: 2px;

668

669 /* ── Dash-aliased mirrors of the slash-named tokens above.

670 CSS spec requires custom-property names to be <dashed-ident>

671 (no `/` allowed). Some browsers parse slash-named vars leniently;

672 these aliases guarantee resolution everywhere. ───────────────── */

673 --dim-space-0: 0px;

674 --dim-space-100: 4px;

675 --dim-space-150: 6px;

676 --dim-space-200: 8px;

677 --dim-space-300: 12px;

678 --dim-space-400: 16px;

679

680 --dim-radius-100: 4px;

681 --dim-radius-150: 6px;

682 --dim-radius-200: 8px;

683 --dim-radius-300: 10px;

684 --dim-radius-400: 12px;

685 --dim-radius-450: 14px; /* kiosk card / header chip / queue-number box (Figma PHCIS|KIOSK 4002:928) */

686 --dim-radius-500: 16px;

687 --dim-radius-550: 22px; /* camera viewport (Archive 301:31530) */

688 --dim-radius-600: 24px; /* dimension.radius.600 — pill / circle-icon button */

689 --dim-radius-700: 38px; /* full-screen mobile sheet top corners (Archive 253:26766) */

690 --dim-radius-1000: 100px; /* dimension.radius.1000 — success card top arch (Archive 178:122765) */

691 --dim-radius-full: 9999px;

692

693 --dim-size-100: 8px; /* dimension.size.100 — XSmall trailing chevron (Brand Radius Subdue Icon Button 3871:4851) */

694 --dim-size-200: 12px; /* dimension.size.200 — small select icon */

695 --dim-size-250: 14px; /* dimension.size.250 — xs circle-icon glyph */

696 --dim-size-300: 16px;

697 --dim-size-500: 24px;

698 --dim-size-600: 32px;

699 --dim-size-700: 36px; /* Button Small / dimension.size.700 */

700 --dim-size-800: 40px; /* Button Medium / dimension.size.800 */

701 --dim-size-900: 44px; /* Button Large / dimension.size.900 */

702 --dim-size-1000: 48px;

703 --dim-size-1050: 50px; /* iPhone status bar (Archive 151:42896) */

704 --dim-size-1100: 52px; /* dimension.size.1100 — OTP cell width (PHCIS-Signin 55:8422) */

705 --dim-size-1200: 56px; /* dimension.size.1200 — HistoryListForm dashed add (Figma 3360:2711) */

706 --dim-size-1300: 60px; /* dimension.size.1300 — OTP cell height (PHCIS-Signin 55:8422) */

707 --dim-size-1400: 64px;

708 --dim-size-1500: 68px; /* dimension.size.1500 — mobile focused-search header (Archive 253:32666) */

709 --dim-size-1600: 72px; /* dimension.size.1600 — PIN keypad key (Mobile 2042:27780) */

710 --dim-size-1700: 80px; /* dimension.size.1700 — hub card illustration tile (Figma 21:1875) */

711 --dim-size-1750: 82px; /* dimension.size.1750 — splash logo disc (Mobile 2042:28041) */

712 --dim-size-1800: 96px; /* dimension.size.1800 — popup illustration */

713 --dim-size-1900: 112px; /* dimension.size.1900 — empty-search illustration (Archive 253:34862) */

714 --dim-size-2000: 128px; /* dimension.size.2000 — Input Field min-width (Figma DS 267:50) */

715 --dim-size-2050: 144px; /* iPhone home indicator width (Archive 175:94673) */

716 --dim-size-2100: 160px; /* dimension.size.2100 — Primary Search compact min-width (Figma 2056:4246) */

717 --dim-size-2170: 177px; /* pharmacy preparing home button width (Archive 284:36737) */

718 --dim-size-2190: 190px; /* add delivery details button width (Archive 371:51292) */

719 --dim-size-2200: 192px; /* dimension.size.2200 — receipt success buttons */

720 --dim-size-2280: 218px; /* success payment button width (Archive 176:105793) */

721 --dim-size-2350: 240px; /* dimension.size.2350 — full-page loading animation (Heart Care Lottie) */

722 --dim-size-2450: 280px; /* dimension.size.2450 — OTP channel select card width (PHCIS-Signin 42:8722) */

723 --dim-size-2470: 298px; /* dimension.size.2470 — auth primary button width (PHCIS-Signin 112:10776) */

724 --dim-size-2500: 320px; /* dimension.size.2500 — input field min-width / sign-in form column */

725 --dim-size-2600: 384px; /* dimension.size.2600 — sign-in card content / button max-width */

726 --dim-size-2610: 402px; /* dimension.size.2610 — iPhone 17 mobile sheet width */

727 --dim-size-2700: 448px; /* dimension.size.2700 — sign-in card max-width (Figma 40:10656) */

728 --dim-size-2800: 512px; /* dimension.size.2800 */

729 --dim-size-2900: 640px; /* primary search w / max-w */

730 --dim-size-2950: 720px; /* dimension.size.2950 — inline editor / form column / chart max-width (bma.health 10 จุด · 17 ต.ค. 69) */

731

732 /* Opacity — ความจางของตัวคุมที่ปิดใช้งาน (bma.health XCloseButton และปุ่ม/ช่อง disabled ~24 จุด · 17 ต.ค. 69) */

733 --opacity-disabled: 0.5;

734

735 --dim-stroke-100: 1px;

736 --dim-stroke-150: 1.5px;

737

738 --type-family-body: 'Sarabun', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

739 --type-family-heading-content: 'Sarabun', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

740 --type-family-ui: 'Sarabun', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

741 /* Brand display families — used only by typography.display.graphic*

742 (heading-graphic = Thai-led, heading-graphic2 = Latin-led with broader weights).

743 Both fall back to Sarabun → system if the brand font hasn't loaded yet. */

744 --type-family-heading-graphic: 'Sao Chingcha', 'Sarabun', system-ui, sans-serif;

745 --type-family-heading-graphic2: 'Mitr', 'Sarabun', system-ui, sans-serif;

746 --type-size-xxs: 10px; /* typography.size.xxs */

747 --type-size-xs: 12px;

748 --type-size-sm: 14px;

749 --type-size-base: 16px;

750 --type-size-lg: 18px; /* typography.size.lg */

751 --type-size-xl: 20px; /* typography.size.xl */

752 --type-size-2xl: 24px; /* typography.size.2xl — Sign-in card heading (h3 · Mitr) */

753 --type-size-3xl: 30px; /* typography.size.3xl */

754 --type-size-4xl: 36px; /* typography.size.4xl */

755 --type-size-5xl: 48px; /* typography.size.5xl */

756 --type-size-6xl: 60px; /* typography.size.6xl */

757 --type-weight-regular: 400;

758 --type-weight-medium: 500;

759 --type-weight-bold: 700;

760 /* Title aliases — used by ~240 call sites (page/popup/table titles). Lost in the 10 Aug 69

761 mirror pull; restored with the values those sites already render (24 ต.ค. 69). */

762 --type-weight-title: var(--type-weight-regular, 400);

763 --type-weight-heading-strong: var(--type-weight-medium, 500);

764 --type-size-title: var(--type-size-base, 16px);

765

766 /* Composite text styles (Figma text styles → CSS). Use as classes below. */

767 /* typography.h5-emphasis — Archive Payment Banner title 284:39953 */

768 --type-h5-emphasis-family: var(--type-family-heading-graphic2);

769 --type-h5-emphasis-size: var(--type-size-lg, 18px);

770 --type-h5-emphasis-weight: var(--type-weight-medium, 500);

771 --type-h5-emphasis-leading: 1.5;

772 /* typography.label1 — Payment Banner subtitle 284:39954 */

773 --type-label1-family: var(--type-family-body);

774 --type-label1-size: var(--type-size-sm, 14px);

775 --type-label1-weight: var(--type-weight-medium, 500);

776 --type-label1-leading: 1.5;

777

778 /* extra spacing/sizing/stroke aliases used by the Settings modal */

779 --dim-space-050: 2px;

780 --dim-space-500: 20px; /* dimension.space.500 — Figma scale */

781 --dim-space-600: 24px;

782 --dim-space-800: 32px; /* dimension.space.800 */

783 --dim-space-1200: 48px; /* dimension.space.1200 — large column gap (Figma Step 7 patient/diagnosis row) */

784 --dim-space-2400: 96px; /* dimension.space.2400 — sign-in screen padding (PHCIS-Signin 79:15268) */

785 --dim-size-400: 20px;

786 --dim-stroke-200: 2px;

787 --dim-stroke-400: 4px;

788 --dim-stroke-500: 5px; /* dimension.stroke.500 — appointment card top accent */

789 --dim-stroke-800: 8px; /* dimension.stroke.800 — framed QR/image border */

790

791 /* Queue Page tokens — OPD Queue (Figma 115:35757)

792 Status Summary Cards (info / positive / inprogress / brand / destructive) */

793 --surface-statussummarycard-info: #DBEAFE; /* blue-100 */

794 --surface-statussummarycard-positive: #D1F6EE; /* teal-100 */

795 --surface-statussummarycard-inprogress: #FFEDD5; /* orange-100 */

796 --surface-statussummarycard-destructive: #FEE2E2; /* red-100 */

797 --surface-statussummarycard-brand: var(--brand-p100);

798 --text-statussummarycard-info-number: #1D4ED8;

799 --text-statussummarycard-positive-number: #196C65;

800 --text-statussummarycard-inprogress-number: #C2410C;

801 --text-statussummarycard-destructive-number: #B91C1C;

802 --text-statussummarycard-brand-number: var(--brand-p700);

803 --text-statussummarycard-subtext: #858C92;

804 --text-statussummarycard-increase: #636B72;

805

806 /* Tab underline — design.md §6.15 / 1301-1305, 1473-1476, 1666-1670.

807 hover = primary/600 (light) · primary/400 (dark)

808 selected-hover = primary/800 (light) · primary/200 (dark) */

809 --surface-tabunderline-hover: var(--brand-p50); /* surface.brandPrimaryButton.quinary-hover */

810 --text-tabunderline-default: #4D5358;

811 --text-tabunderline-hover: var(--brand-p600); /* text.tabUnderline.hover */

812 --text-tabunderline-selected: var(--brand-p700); /* text.tabUnderline.selected */

813 --text-tabunderline-selected-hover: var(--brand-p800); /* text.tabUnderline.selected-hover */

814 --icon-tabunderline-default: #4D5358;

815 --icon-tabunderline-hover: var(--brand-p600); /* icon.tabUnderline.hover */

816 --icon-tabunderline-selected: var(--brand-p700); /* icon.tabUnderline.selected */

817 --icon-tabunderline-selected-hover: var(--brand-p800); /* icon.tabUnderline.selected-hover */

818 --border-tab-hover: var(--brand-p600); /* border.tab.hover */

819 --border-tab-selected: var(--brand-p700); /* border.tab.selected */

820 --border-tab-selected-hover: var(--brand-p800); /* border.tab.selected-hover */

821 --text-tabunderline-disabled: #C9CDD0; /* neutral/300 — Tab Underline disabled state (Figma 371:30) */

822 --icon-tabunderline-disabled: #C9CDD0;

823

824 /* Tab Capsule — Figma 2612:7791. Capsule-shaped tab with leading indicator.

825 3 types (default · in-progress · success) × 4 states. */

826 --surface-tabcapsule-default: #FFFFFF; /* white capsule */

827 --surface-tabcapsule-hover: var(--brand-p50); /* primary/50 tint */

828 --surface-tabcapsule-selected: var(--brand-p50); /* selected (Active) bg */

829 --surface-tabcapsule-success: #FFFFFF; /* in-progress / success default bg */

830 --surface-tabcapsule-disabled: #FFFFFF;

831 --border-tabcapsule-default: #E2E4E6; /* neutral/200 */

832 --border-tabcapsule-hover: var(--brand-p200); /* primary/200 — hover/active border */

833 --border-tabcapsule-selected: var(--brand-p200);

834 --border-tabcapsule-inprogress: #E2E4E6; /* same as default — in-progress shares neutral border */

835 --border-tabcapsule-success: #E2E4E6;

836 --border-tabcapsule-disabled: #E2E4E6;

837 --text-tabcapsule-default: #4D5358; /* neutral/700 */

838 --text-tabcapsule-hover: var(--brand-p700);

839 --text-tabcapsule-selected: var(--brand-p700);

840 --text-tabcapsule-inprogress: #4D5358;

841 --text-tabcapsule-success: #4D5358;

842 --text-tabcapsule-disabled: #C9CDD0; /* neutral/300 */

843 --icon-tabcapsule-default: #4D5358;

844 --icon-tabcapsule-hover: var(--brand-p700);

845 --icon-tabcapsule-selected: var(--brand-p700);

846 --icon-tabcapsule-success: var(--brand-p700); /* check icon tint */

847 --icon-tabcapsule-inprogress: #F08C29; /* orange dot (Figma) */

848 --icon-tabcapsule-disabled: #C9CDD0;

849

850 /* Brand Tag (filter chips) */

851 --surface-brandtag-default: #FFFFFF;

852 --surface-brandtag-hover: var(--brand-p50); /* surface.brandTag.default-hover */

853 --surface-brandtag-selected: var(--brand-p50);

854 --surface-brandtag-selected-hover: var(--brand-p100); /* surface.brandTag.selected-hover */

855 --text-brandtag-default: #4D5358;

856 --text-brandtag-hover: var(--brand-p700); /* text.brandTag.hover */

857 --text-brandtag-selected: var(--brand-p700);

858 --text-brandtag-selected-hover: var(--brand-p700); /* text.brandTag.selected-hover */

859 --text-brandtag-title: #858C92;

860 --border-brandtag-default: #E2E4E6;

861 --border-brandtag-hover: var(--brand-p200); /* border.brandTag.default-hover */

862 --border-brandtag-selected: var(--brand-p200);

863 --border-brandtag-selected-hover: var(--brand-p200); /* border.brandTag.selected (hover) */

864 /* Leading icon in FilterTag — primary/700 across all states (design.md §6 brandTag rows 6665-6680) */

865 --icon-brandtag-default: var(--brand-p700);

866 --icon-brandtag-hover: var(--brand-p700);

867 --icon-brandtag-selected: var(--brand-p700);

868 --icon-brandtag-selected-hover: var(--brand-p700);

869 --icon-brandtag-tailing: #C9CDD0; /* neutral/300 — chevron in brandTag (Figma "icon/brandTag/tailing") */

870 --surface-danger-quaternary: var(--surface-dangerButton-quaternary); /* alias for VoiceTextarea error-toolbar bg */

871

872 /* Neutral Tag — Figma 2056:4263 "Tag" with Style=Neutral.

873 All shades are neutral grays (not brand-tinted), so this variant

874 does NOT retint with [data-brand]. */

875 --surface-neutraltag-default: #FFFFFF; /* neutral surface */

876 --surface-neutraltag-hover: #F9FBFB; /* neutral/50 — surface/neutralTag/default-hover */

877 --surface-neutraltag-selected: #F4F5F5; /* neutral/100 */

878 --surface-neutraltag-selected-hover: #E2E4E6; /* neutral/200 */

879 --border-neutraltag-default: #E2E4E6; /* neutral/200 — same border for all states */

880 --border-neutraltag-hover: #E2E4E6;

881 --border-neutraltag-selected: #E2E4E6;

882 --border-neutraltag-selected-hover: #E2E4E6;

883 --text-neutraltag-default: #4D5358; /* neutral/700 — text/neutralTag/default */

884 --text-neutraltag-hover: #4D5358;

885 --text-neutraltag-selected: #4D5358;

886 --text-neutraltag-selected-hover: #4D5358;

887 --icon-neutraltag-default: #4D5358; /* icon/tag/default (neutral) */

888 --icon-neutraltag-hover: #4D5358;

889 --icon-neutraltag-selected: #4D5358;

890 --icon-neutraltag-selected-hover: #4D5358;

891 --icon-neutraltag-tailing: #C9CDD0; /* shared chevron color */

892

893 /* Table */

894 --surface-table-header: var(--brand-p50);

895 --surface-table-hover: var(--brand-p50); /* surface.table.hover — design.md row 1973 */

896 --surface-table-footer: var(--brand-p100); /* surface.table.footer — design.md row 1971 */

897 --surface-table-selected: var(--brand-p50); /* surface.table.selected — design.md row 1974 */

898 --surface-table-selected-hover: var(--brand-p100); /* surface.table.selected-hover — design.md row 1975 */

899 --border-table-default: var(--brand-p100);

900 --border-table-line: var(--brand-p50); /* border.table.line */

901 --text-table-title: var(--brand-p800);

902

903 /* Pagination — design.md §6.19 (Figma 328:4734).

904 Hover state aliases the brand palette (Figma node 306:1808):

905 light: surface→brand/p50, text→brand/p700

906 dark: surface→brand/p950, text→brand/p300

907 Both flip automatically when --brand-p* primitives swap per

908 [data-brand]/[data-theme] without changing this rule. */

909 --surface-pagination-default: #FFFFFF;

910 --surface-pagination-hover: var(--brand-p50); /* #F4FBF8 */

911 --surface-pagination-selected: var(--brand-p100); /* #E2F3EB */

912 --text-pagination-default: #4D5358;

913 --text-pagination-hover: var(--brand-p700); /* #007549 */

914 --text-pagination-selected: var(--brand-p700); /* #007549 */

915 --text-neutral-tertiary: #ADB2B7; /* ellipsis */

916

917 /* Calendar — Figma DS "Calendar" 152:46901 · day-cell states 143:23705.

918 Day/month text slate #4D5358, disabled #CBD5E1, current-day = brand/100

919 tint + brand/700 text (matches the inline booking date picker 140:9464). */

920 --surface-calendar-default: #FFFFFF;

921 --surface-calendar-disabled: #FFFFFF;

922 --surface-calendar-current: var(--brand-p100); /* #E2F3EB */

923 --surface-calendar-selected: var(--brand-p700); /* #007549 · web deep-green (mobile uses brighter p600 — design.md §12889) */

924 --surface-calendar-selected-mobile: var(--brand-p600); /* #08A768 · mobile brighter emerald (Figma 173:82996) */

925 --text-calendar-month: #4D5358;

926 --text-calendar-default: #4D5358;

927 --text-calendar-disabled: #CBD5E1; /* slate/300 */

928 --text-calendar-current: var(--brand-p700); /* #007549 */

929 --text-calendar-selected: #FFFFFF; /* text/calendar/selected */

930

931 /* Switch (off-state primitives used by the toggle inside ActionList).

932 Full switch token set is documented in design.md §4.2/4.5. */

933 --surface-switch-off: #E2E4E6; /* neutral/200 */

934 --surface-switch-on: var(--brand-p600); /* brand/p600 */

935 --surface-switch-icon: #FFFFFF; /* thumb */

936

937 /* Checkbox primitives — Figma "Checkbox" 306:1099 / 269:28.

938 surface/switch/* names mirror Figma's data-name on the box element. */

939 --surface-switch-default: #FFFFFF; /* unchecked bg */

940 --surface-switch-hover: #3EC3B2; /* surface/switch/hover → teal/300 */

941 --surface-switch-on-hover: #196C65; /* surface/switch/on-hover → teal/700 */

942 --surface-switch-checkbox: var(--brand-p600); /* legacy alias → brand/p600 #08A768 */

943 --surface-switch-checkbox-hover: var(--brand-p700); /* legacy alias → brand/p700 #007549 */

944 --surface-switch-checkbox-default-hover: var(--brand-p500); /* Unchecked Hover preview (brand/p500) */

945 --border-switch-default: #C9CDD0; /* unchecked border (neutral/300) */

946 --border-switch-disabled: #E2E4E6; /* disabled border (neutral/200) */

947 --surface-disabled-secondary-hover: #C9CDD0; /* Disabled-Checked fill (neutral/300) */

948 --icon-switch-checkbox-tick: #FFFFFF; /* tick stroke colour */

949

950 /* Form Builder — Figma "Content" 2210:7837, "Signature" 2451:13969,

951 "Drag and Drop" 2451:13908. Brand-aware drop-zone palette: tokens

952 alias --brand-p* primitives so retinting via [data-brand] works.

953 Error variant uses fixed danger tokens (non-brand-responsive). */

954 --surface-formbuilder-default: var(--brand-p50); /* dashed-border idle bg */

955 --surface-formbuilder-hover: var(--brand-p50); /* hover bg (border darkens, bg holds) */

956 --surface-formbuilder-card: #FFFFFF; /* Filled state — uploaded-file card */

957 --surface-formbuilder-error: var(--surface-dangerButton-quaternary); /* danger/quaternary (#FFF0F0) */

958 --border-formbuilder-default: var(--brand-p200); /* dashed border idle (#C5EDDA) */

959 --border-formbuilder-hover: var(--brand-p600); /* dashed border hover (#08A768)*/

960 --border-formbuilder-filled: var(--brand-p100); /* solid 1px on Filled card */

961 --border-formbuilder-error: var(--border-dangerButton-default); /* dangerbutton/default (#DC2626) */

962 --icon-formbuilder-iconbox-default: var(--brand-p100); /* Content's left iconbox bg (#E2F3EB) */

963 --icon-formbuilder-iconbox-hover: var(--brand-p100); /* Same — only outer state changes */

964 --icon-formbuilder-error: var(--border-dangerButton-default); /* file-up icon stroke in Error state (#DC2626) — Figma `icon/formBuilder/error` */

965 --text-formbuilder-text: var(--brand-p700); /* Title default (#007549) */

966 --text-formbuilder-error: var(--border-dangerButton-default); /* Title in Error state (#DC2626) — Figma `text/formbuilder/error` */

967 --text-formbuilder-subtext: #858C92; /* Subtitle / helper (neutral/500) */

968

969 /* Figma "Brand Drop Shadow Bottom/100" — single-layer PrimaryShadow/600

970 (offset 0,1px · blur 4). Brand-aware via `--PrimaryShadow-*`.

971 Use on subtle brand-tinted lifts (map popovers, tool markers, dropdowns). */

972 --shadow-brand-drop-bottom-100:

973 0 1px 4px var(--PrimaryShadow-600);

974 /* Figma "Brand Drop Shadow Top/100" — subtle upward footer lift. */

975 --shadow-brand-drop-top-100:

976 0 -1px 4px var(--PrimaryShadow-600);

977

978 /* Figma "Brand Drop Shadow Bottom/200" — stacked PrimaryShadow/600 + /601

979 (offset 0,1px · blur 4 + 8). Brand-aware via `--PrimaryShadow-*`.

980 Shared by Form Builder chrome, Small Alert success, copy toast, etc. */

981 --shadow-brand-drop-bottom-200:

982 0 1px 4px var(--PrimaryShadow-600),

983 0 1px 8px var(--PrimaryShadow-601);

984 /* Twin for `filter:` — use on animated toast wrapper so shadow follows the pill. */

985 --filter-brand-drop-bottom-200:

986 drop-shadow(0 1px 4px var(--PrimaryShadow-600)) drop-shadow(0 1px 8px var(--PrimaryShadow-601));

987

988 /* Figma "Brand Drop Shadow Bottom/400" — stacked PrimaryShadow/600 + /601

989 (offset 0,4 blur 4 spread -4 · offset 0,16 blur 32 spread -4).

990 Large brand-tinted lift for floating auth cards (PHCIS-Signin 42:8722). */

991 --shadow-brand-drop-bottom-400:

992 0 4px 4px -4px var(--PrimaryShadow-600),

993 0 16px 32px -4px var(--PrimaryShadow-601);

994

995 /* Figma "Indigo Drop Shadow Bottom/200" — stacked indigo-050 + indigo-100

996 (offset 0,1px · blur 4 + 8). The /200 spec is the canonical AISearch

997 drop — same shape as Brand Drop Shadow Bottom/200 but with the indigo

998 shadow primitives so the violet glow stays consistent across every

999 brand mode. NOT brand-aware. */

1000 --shadow-indigo-drop-bottom-200:

1001 0 1px 4px 0 var(--color-shadow-indigo-050),

1002 0 1px 8px 0 var(--color-shadow-indigo-100);

1003 /* Twin for `filter:` — use on animated wrappers where the shadow must

1004 follow non-rectangular content. */

1005 --filter-indigo-drop-bottom-200:

1006 drop-shadow(0 1px 4px var(--color-shadow-indigo-050))

1007 drop-shadow(0 1px 8px var(--color-shadow-indigo-100));

1008 /* Legacy single-layer alias — kept for callers that landed before the

1009 two-layer /200 token was published. Points at the canonical /200 so

1010 existing usages auto-upgrade. New code should reference /200 directly. */

1011 --shadow-indigo-drop-bottom: var(--shadow-indigo-drop-bottom-200);

1012 --filter-indigo-drop-bottom: var(--filter-indigo-drop-bottom-200);

1013

1014 /* Form Builder / floating form chrome — neutral slate drop shadow.

1015 Not brand-tinted (--shadow-brand-drop-bottom-* / --shadow-card).

1016 Used by form-builder tiles, exam floating toolbars, registration cards. */

1017 --shadow-formbuilder:

1018 0 1px 4px rgba(100, 116, 139, 0.10);

1019

1020 /* SuccessIcon (TickOnCircle) — Figma node 2798:5280.

1021 `icon/positive/success` = teal/500 (fixed, non-brand-responsive).

1022 White tick stays white in both light + dark modes. */

1023 --icon-positive-success: #24A899; /* teal/500 */

1024 --text-positive-success-tick: #FFFFFF; /* tick stroke */

1025

1026 /* Small Alert — Figma 3355:3149 (MIH Design System Foundation).

1027 Solid fills + white label/icon; success uses Brand Drop Shadow Bottom/200;

1028 error uses neutral slate shadow (Figma Drop Shadow Bottom/200). */

1029 --surface-smallalert-success: #24A899; /* Primitive/color/teal/500 — surface/smallalert/success */

1030 --surface-smallalert-error: #EF4444; /* Primitive/color/red/500 — surface/smallalert/error */

1031 --text-smallalert-on-success: #FFFFFF; /* grey/50 on teal/500 — Figma text/positive/on-positive */

1032 --text-smallalert-on-error: var(--text-danger-on-default); /* #FFFFFF — Figma text/danger/on-default */

1033 --shadow-smallalert-success: var(--shadow-brand-drop-bottom-200);

1034 --shadow-smallalert-error:

1035 0 1px 4px rgba(100, 116, 139, 0.15),

1036 0 1px 2px rgba(100, 116, 139, 0.10);

1037 --shadow-drop-bottom-200: var(--shadow-smallalert-error);

1038

1039 /* Status Badge — Figma 302:73, design.md §4.1/4.2.

1040 Surface (filled bg) + text per style. Outline variant uses neutral

1041 border instead of filled bg. */

1042 --surface-statusbadge-neutral: #F5F7F9; /* slate/100 */

1043 --surface-statusbadge-info: #DBEAFE; /* blue/100 */

1044 --surface-statusbadge-success: #D1F6EE; /* teal/100 */

1045 --surface-statusbadge-warning: #FFEDD5; /* orange/100 */

1046 --surface-statusbadge-error: #FEE2E2; /* red/100 */

1047 --text-statusbadge-neutral: #4D5358; /* neutral/700 */

1048 --text-statusbadge-info: #1D4ED8; /* blue/700 */

1049 --text-statusbadge-success: #196C65; /* teal/700 */

1050 --text-statusbadge-warning: #C2410C; /* orange/700 — Figma calls this `text/statuslBadge/in-progress` */

1051 --text-statusbadge-error: #B91C1C; /* red/700 */

1052 --border-statusbadge-neutral: #E2E4E6; /* neutral/200 — outline */

1053 --surface-statusbadge-yellow: var(--surface-pill-yellow); /* extended status — used for "in progress" queue rows */

1054 --text-statusbadge-yellow: var(--text-pill-yellow);

1055

1056 /* Alert — design.md §4.1/4.2/4.3 (Figma 325:2623 LargeAlert).

1057 4 tones (info/success/warning/error) × 3 properties (surface/border/text). */

1058 --surface-alert-info: #F0F6FF; /* blue/50 */

1059 --surface-alert-success: #F4FBFA; /* teal/50 */

1060 --surface-alert-warning: #FFF9F0; /* orange/50 */

1061 --surface-alert-error: #FFF0F0; /* red/50 */

1062 --border-alert-info: #DBEAFE; /* blue/100 */

1063 --border-alert-success: #D1F6EE; /* teal/100 */

1064 --border-alert-warning: #FFEDD5; /* orange/100 */

1065 --border-alert-error: #FEE2E2; /* red/100 */

1066 --text-alert-info: #1D4ED8; /* blue/700 */

1067 --text-alert-success: #196C65; /* teal/700 */

1068 --text-alert-warning: #C2410C; /* orange/700 */

1069 --text-alert-error: #B91C1C; /* red/700 */

1070 --surface-alertdialog-default: var(--surface-card-100); /* white card */

1071 --border-alertdialog-default: #E2E4E6; /* neutral/200 — Figma `border/alertdialog/default` (AlertDialog 1:1159) */

1072 --text-alertdialog-text: #4D5358; /* neutral/700 — title color (h5/h6) */

1073 --text-alertdialog-subtext: #636B72; /* neutral/600 — description body */

1074 /* AlertDialog tone icons — Figma node 1:1162 ("Info") uses brand/primary/700.

1075 Brand-aware so it follows setBrandTheme() automatically. Success/Warning/

1076 Destructive icons reuse Alert banner tones (fixed semantic colors). */

1077 --icon-alertdialog-info: var(--brand-p700); /* icon/alertDialog/info → primary/700 (brand-aware) */

1078 --icon-alertdialog-success: var(--text-alert-success); /* icon/alert/success → teal/700 (#196C65) */

1079 --icon-alertdialog-warning: var(--text-alert-warning); /* icon/alert/warning → orange/700 (#C2410C) */

1080 --icon-alertdialog-destructive: var(--text-alert-error); /* icon/alert/error → red/700 (#B91C1C) */

1081

1082 /* Background tertiary-hover (X close button hover bg per tone)

1083 design.md §4.0 / Figma 3064:4984. */

1084 --background-info-tertiary-hover: #BFDBFE; /* blue/200 */

1085 --background-positive-tertiary-hover: var(--brand-p200); /* brand/p200 */

1086 --background-warning-tertiary-hover: #FED7AA; /* orange/200 */

1087 --background-danger-tertiary-hover: #FECACA; /* red/200 */

1088

1089 /* Alert scrollbar — design.md "Alert · Scrollbar" table.

1090 Bar = same as alert border (100-shade), Pill thumb = 300-shade. */

1091 --surface-scrollbar-info-bar: #DBEAFE; /* blue/100 */

1092 --surface-scrollbar-info-pill: #93C5FD; /* blue/300 */

1093 --surface-scrollbar-success-bar: #D1F6EE; /* teal/100 */

1094 --surface-scrollbar-success-pill:#6CDCCA; /* teal/300 */

1095 --surface-scrollbar-warning-bar: #FFEDD5; /* orange/100 */

1096 --surface-scrollbar-warning-pill:#FDBA74; /* orange/300 */

1097 --surface-scrollbar-error-bar: #FEE2E2; /* red/100 */

1098 --surface-scrollbar-error-pill: #FCA5A5; /* red/300 */

1099

1100 /* Primary Search — 5 states per Figma MIH DS Foundation 2056:4246.

1101 Default/Focus/Filled use brand-p600; Hover/Typing use brand-p700. */

1102 --surface-primarysearch-default: #FFFFFF; /* alias of surface/search/default */

1103 --border-primarysearch-default: var(--brand-p600);

1104 --border-primarysearch-hover: var(--brand-p700);

1105 /* Focus state — Figma 2056:4246 property panel adds a 5th state between

1106 Hover and Typing: the input is focused with an empty value (dropdown

1107 shows recent searches). Per Figma the border stays on `default` and

1108 text stays on the placeholder tone. */

1109 --border-primarysearch-focus: var(--border-primarysearch-default);

1110 --border-primarysearch-typing: var(--brand-p700);

1111 --border-primarysearch-filled: var(--brand-p600);

1112 --text-primarysearch-default: #ADB2B7; /* placeholder */

1113 --text-primarysearch-hover: #4D5358;

1114 --text-primarysearch-focus: var(--text-primarysearch-default); /* placeholder grey */

1115 --text-primarysearch-typing: #4D5358;

1116 --text-primarysearch-filled: #4D5358;

1117 --icon-primarysearch-default: var(--brand-p600);

1118 --icon-primarysearch-hover: var(--brand-p700);

1119 --icon-primarysearch-focus: var(--brand-p600);

1120 --icon-primarysearch-typing: var(--brand-p700);

1121 --icon-primarysearch-filled: var(--brand-p600);

1122

1123 /* Brand drop shadow Bottom/200 (used by Primary Search) */

1124 --shadow-primarysearch:

1125 0 1px 4px var(--PrimaryShadow-600),

1126 0 1px 8px var(--PrimaryShadow-601);

1127

1128 /* — AI Search (Doctor-AI ICD panel — Figma 156:27359 / Variables panel

1129 border/aiSearch + icon/aiSearch). 4 states share the indigo palette

1130 used by the AI surface chrome:

1131 default → indigo/500 (same in light + dark — no theme swap)

1132 hover → indigo/700 (light) / indigo/300 (dark)

1133 typing → indigo/700 (light) / indigo/300 (dark) — same as hover, per Figma

1134 filled → indigo/600 (light) / indigo/400 (dark) — matches resting tint

1135 Dark-mode swap (below in @media block) flips 600→400 / 700→300.

1136 `border/aiSearch/default` deliberately skips the swap — indigo/500

1137 reads as the "resting AI border" identically on both surfaces. */

1138 --border-aiSearch-default: var(--color-indigo-500);

1139 --border-aiSearch-hover: var(--color-indigo-700);

1140 --border-aiSearch-typing: var(--color-indigo-700);

1141 --border-aiSearch-filled: var(--color-indigo-600);

1142 --icon-aiSearch-default: var(--color-indigo-600);

1143 --icon-aiSearch-hover: var(--color-indigo-700);

1144 --icon-aiSearch-typing: var(--color-indigo-700);

1145 --icon-aiSearch-filled: var(--color-indigo-600);

1146

1147 /* Secondary Search (per Figma MIH DS Foundation 305:43) */

1148 --surface-search-default: #FFFFFF;

1149 --border-secondarysearch-default: #C9CDD0;

1150 --border-secondarysearch-filled: #C9CDD0;

1151 --border-secondarysearch-hover: var(--brand-p700); /* brand-aware */

1152 --border-secondarysearch-typing: var(--brand-p700);

1153 --text-secondarysearch-default: #ADB2B7; /* placeholder */

1154 --text-secondarysearch-hover: #4D5358;

1155 --text-secondarysearch-typing: #4D5358;

1156 --text-secondarysearch-filled: #4D5358;

1157 --ring-secondarysearch: rgb(var(--brand-p600-rgb) / 0.15); /* effect/input/100 = primaryborder/600 */

1158

1159 /* Settings modal — surfaces, borders, text, mode-icon backdrops */

1160 --surface-modal-default: #FFFFFF;

1161 --border-popover-grey: #E2E4E6;

1162 --surface-neutralbutton-quinary: #FFFFFF;

1163 --surface-neutralbutton-quinary-hover: #F9FBFB; /* design.md row 1876 */

1164 --surface-neutralbutton-quaternary: #F9FBFB; /* design.md §7d row 3054 — Ghost button Default bg (= background/neutral/quinary) */

1165 --surface-neutralbutton-quaternary-hover: #F4F5F5; /* design.md row 1874 — Ghost button hover bg (= background/neutral/tertiary) */

1166 /* Neutral Subdue (Icon) Button — design.md §7f row 3088/3089/3091 (node 2024-4516).

1167 Fill Default uses neutral/200, Fill Hover steps to neutral/300; Selected

1168 reuses the Ghost-tier quaternary surface + border. */

1169 --surface-neutralbutton-secondary: #E2E4E6; /* neutral/200 — Subdue Fill default bg */

1170 --surface-neutralbutton-secondary-hover: #C9CDD0; /* neutral/300 — Subdue Fill hover bg */

1171 --border-neutralbutton-tertiary: #E2E4E6;

1172 --border-neutralbutton-tertiary-hover: #C9CDD0; /* design.md row 1435 */

1173 --border-neutralbutton-quaternary: #F4F5F5; /* neutral/100 — Subdue Selected border */

1174 --icon-neutralbutton-default: #4D5358; /* design.md row 1609 — Ghost icon Default */

1175 --icon-neutralbutton-secondary: #636B72; /* design.md row 1612 — Ghost icon Hover (e.g. Popup close X 104:5369) */

1176 --border-brandprimarybutton-tertiary: var(--brand-p200); /* #C5EDDA on default */

1177 --text-topic-tertiary-title: #363B3F;

1178 --surface-pink-quaternary: #FBF4F8;

1179 --surface-pink-default: #BE185D; /* Figma 217:27084 mark dot */

1180 --surface-pink-default-hover: #9D174D; /* Figma 220:27777 Hover */

1181 --border-image-default: #FFFFFF;

1182 --border-popover-grey: #E2E4E6;

1183 --text-modal-subtext: #ADB2B7;

1184 --surface-navy-quaternary: #F3F5FC;

1185

1186 --typography-family-body: 'Sarabun', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

1187 --typography-size-xs: 12px;

1188 --typography-size-sm: 14px;

1189 --typography-size-base: 16px;

1190 --typography-weight-regular: 400;

1191 --typography-weight-medium: 500;

1192

1193 /* — Sidemenu (brand-aware) — */

1194 --surface-navigation-default: #FFFFFF;

1195 --surface-sidemenu-hover: var(--brand-p50); /* surface/sidemenu/hover */

1196 --surface-sidemenu-active: var(--brand-p50);

1197 --border-sidemenu-active: var(--brand-p700);

1198 /* Shell right edge — Figma Design Template Urt0JAQES9364u2ud3XtpY · node 1:2447:

1199 border/brandprimary/quaternary @ dimension/stroke/100 */

1200 --border-sidemenu-shell: var(--border-brandPrimary-quaternary);

1201 --text-sidemenu-default: #4D5358;

1202 --text-sidemenu-hover: var(--brand-p700);

1203 --text-sidemenu-selected: var(--brand-p700);

1204 --text-sidemenu-disabled: #ADB2B7;

1205 --text-sidemenu-tertiary: #858C92;

1206 --text-brand-name: #383B3D;

1207 --text-brand-sub: #565D6C;

1208

1209 /* — Patient banner gradient — */

1210 --gradient-patient-banner:

1211 linear-gradient(94.93deg, #00A4AC 0.67%, #1FA091 100.76%);

1212

1213 /* — Notifications — */

1214 --surface-notification-default: #DB2777;

1215 --text-danger-on-default: #FFFFFF;

1216

1217 /* — Severity / status badges (Triage levels — STATIC, not brand) — */

1218 --surface-triage-level1: #FEE2E2; --text-triage-level1: #B91C1C; /* Resuscitation — red */

1219 --surface-triage-level2: #FFEDD5; --text-triage-level2: #C2410C; /* Emergency — orange */

1220 --surface-triage-level3: #FEF9C3; --text-triage-level3: #A16207; /* Urgent — yellow */

1221 --surface-triage-level4: var(--surface-colorfulbadge-teal); --text-triage-level4: var(--text-colorfulbadge-teal); /* Semi-urgent — teal */

1222 --surface-triage-level5: #DBEAFE; --text-triage-level5: #1D4ED8; /* Non-urgent — blue */

1223

1224 /* — Severity badges (allergy/disease) — */

1225 --surface-severity-high: #FEE2E2; --text-severity-high: #B91C1C;

1226 --surface-severity-medium: #FFEDD5; --text-severity-medium: #C2410C;

1227 --surface-severity-low: #FEF9C3; --text-severity-low: #A16207;

1228 --surface-severity-mild: #D1F6EE; --text-severity-mild: #196C65;

1229

1230 /* — Colorful status pills — */

1231 --surface-pill-green: #DFF2E9; --text-pill-green: #007549;

1232 --surface-pill-red: #FEE2E2; --text-pill-red: #B91C1C;

1233 --surface-pill-orange: #FFEDD5; --text-pill-orange: #C2410C;

1234 --surface-pill-blue: #DBEAFE; --text-pill-blue: #1D4ED8;

1235 --surface-pill-teal: #D1F6EE; --text-pill-teal: #196C65;

1236 --surface-pill-yellow: #FEF9C3; --text-pill-yellow: #A16207;

1237 --surface-pill-purple: #F3E8FF; --text-pill-purple: #7E22CE;

1238

1239 /* — Sidemenu dimensions — */

1240 --sm-width-closed: 64px;

1241 --sm-width-open: 320px;

1242 --sm-stroke-400: 4px;

1243 --sm-radius-100: 6px;

1244 --sm-space-300: 12px;

1245 --sm-space-600: 24px;

1246 --sm-z-overlay: 1300; /* sidebar — above Topbar (z=1200) and Leaflet (z≤1000) */

1247 --sm-z-modal: 1400; /* full-screen modal (Popup): above sidebar + app header */

1248 /* Portaled menus from inside a modal (e.g. OverflowFlexRow "More" in DateFilterPopup). */

1249 --sm-z-modal-popover: 1450;

1250 /* Tooltips must sit above EVERY UI layer — including modals + their

1251 portal'd popovers — since they explain controls inside those

1252 layers. Anything lower means hovering a tool inside a popup

1253 surfaces no tooltip (the popup paints over the bubble). */

1254 --sm-z-tooltip: 1500;

1255 --sm-z-dropdown: 1196; /* dropdown trigger layer: near header, still below it */

1256 --sm-z-popover: 1199; /* dropdown popover: almost header level, but lower */

1257 /* Portaled lists (e.g. FilterDropdown): above Topbar (1200) and above mobile

1258 sidemenu (--sm-z-overlay 1300) so the menu is not hidden behind the drawer. */

1259 --sm-z-popover-nested: calc(var(--sm-z-overlay) + 2);

1260 --sm-shadow-overlay:

1261 0 8px 24px rgb(var(--brand-p600-rgb) / 0.12),

1262 0 2px 6px rgb(var(--brand-p600-rgb) / 0.08);

1263

1264 /* — Figma "Brand Drop Shadow Top/200" — used by SideMenu shell.

1265 Two stacked DROP_SHADOWs per Figma Design Template node 1:2447:

1266 layer 1 — color PrimaryShadow/600 · offset (0, −1) · blur 4 · spread 0

1267 layer 2 — color PrimaryShadow/601 · offset (0, −1) · blur 8 · spread 0

1268 Both colors are tied to var(--brand-p600-rgb) → the shadow tint

1269 follows whichever brand mode is active (mode-independent). */

1270 --shadow-brand-top-200:

1271 0px -1px 4px var(--PrimaryShadow-600),

1272 0px -1px 8px var(--PrimaryShadow-601);

1273 --shadow-sidemenu: var(--shadow-brand-top-200);

1274

1275 --icon-sidemenu-hover-filter:

1276 brightness(0) invert(27%) sepia(100%) saturate(600%) hue-rotate(148deg) brightness(89%) contrast(99%);

1277

1278 /* — Shadows · Brand Drop Shadow Bottom (PHCIS Figma) ──────

1279 Bottom/200 = 2 layers (4px @ /600) + (8px @ /601) → cards

1280 Bottom/100 = 1 layer (4px @ /600) → header bar

1281 (--shadow-header) */

1282 --shadow-card:

1283 0px 1px 4px var(--PrimaryShadow-600),

1284 0px 1px 8px var(--PrimaryShadow-601);

1285 /* Queue / table card shell: same two layers as --shadow-card, each layer

1286 alpha +10% vs PrimaryShadow-600/601 (0.08→0.088, 0.10→0.11). */

1287 --shadow-card-strong:

1288 0px 1px 4px rgb(var(--brand-p600-rgb) / 0.088),

1289 0px 1px 8px rgb(var(--brand-p600-rgb) / 0.11);

1290 --shadow-card-hover:

1291 0px 1px 4px var(--PrimaryShadow-600),

1292 0px 1px 8px var(--PrimaryShadow-601);

1293 /* Header / SubHeader bar — Figma "Brand Drop Shadow Bottom/100"

1294 (effect.brand-drop-shadow-bottom.100 · design.md §6.19.3). Aliased, not

1295 restated: the old literal used PrimaryShadow/602 (0.12 alpha), which no

1296 Figma effect defines, so the bar sat a shade heavier than every other

1297 brand-tinted lift on the page. */

1298 --shadow-header: var(--shadow-brand-drop-bottom-100);

1299 /* Telemed floating CTA — purple→magenta glow on hover, matching its

1300 gradient (#7A4CE5 / #D833A1). Decorative elevation for the FAB only. */

1301 --shadow-telemed-fab-hover:

1302 0px 10px 28px -4px rgba(122, 76, 229, 0.50),

1303 0px 4px 12px rgba(216, 51, 161, 0.32);

1304

1305 /* ── Motion (enter/exit) — design.md §1d Motion tokens */

1306 --motion-duration-modal: 220ms;

1307 --motion-duration-popover: 160ms;

1308 --motion-duration-calendar: 320ms;

1309 --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

1310 --motion-easing-popover: ease-out;

1311 --motion-easing-enter: cubic-bezier(0.16, 1, 0.3, 1);

1312 --motion-panel-offset-y: var(--dim-space-200, 8px);

1313 --motion-panel-scale-from: 0.98;

1314 --motion-offset-calendar-x: var(--dim-space-600, 24px);

1315

1316 /* ── Brand Primary Button — full token set per design.md §7a (Brand Icon Button)

1317 Surface levels (semantic, brand-aware via brand-pXXX): default-hover,

1318 secondary (#C5EDDA — selected/subdue fill), quaternary (#F4FBF8),

1319 quaternary-hover (#E2F3EB), quinary (#FFFFFF), quinary-hover (#F4FBF8). */

1320 --surface-brandPrimaryButton-default-hover: var(--brand-p800);

1321 --surface-brandPrimaryButton-secondary: var(--brand-p200);

1322 --surface-brandPrimaryButton-tertiary-hover: var(--brand-p200); /* Subdue Fill hover · design.md row 1714 */

1323 --surface-brandPrimaryButton-quaternary: var(--brand-p50);

1324 --surface-brandPrimaryButton-quaternary-hover: var(--brand-p100);

1325 --surface-brandPrimaryButton-quinary: #FFFFFF;

1326 --surface-brandPrimaryButton-quinary-hover: var(--brand-p50);

1327

1328 --border-brandPrimaryButton-default: var(--brand-p700);

1329 --border-brandPrimaryButton-default-hover: var(--brand-p800);

1330 --border-brandPrimaryButton-tertiary: var(--brand-p200); /* Focus ring (4px) — Figma 377:11596 */

1331 /* Dashed "add row" hover (HistoryListForm · Figma 3360:2711) — brand/primary/300 */

1332 --border-brandPrimaryButton-tertiary-hover: var(--brand-p300);

1333 --border-brandPrimaryButton-quaternary: var(--brand-p100); /* Active state border — Figma 377:11596 */

1334 --border-brandPrimaryButton-quaternary-hover: var(--brand-p200);

1335

1336 --icon-brandPrimaryButton-default: var(--brand-p700);

1337 --icon-brandPrimaryButton-default-hover: var(--brand-p800);

1338 --icon-brandPrimaryButton-on-brand: #FFFFFF;

1339 --icon-brandPrimaryButton-secondary: var(--brand-p600);

1340

1341 /* lowercase aliases — match Figma data-name "brandprimarybutton".

1342 RadioButton/SelectableCardButton selected state aliases the

1343 border colour from `border/brandPrimaryButton/Default` (Figma

1344 node 2250:8270) → brand-p700. Routing the lowercase variant

1345 through the camelCase token keeps brand-aware tinting intact

1346 when `<html data-brand="…">` switches palettes. */

1347 --surface-brandprimarybutton-tertiary: var(--surface-brandPrimaryButton-tertiary);

1348 --surface-brandprimarybutton-tertiary-hover: var(--surface-brandPrimaryButton-tertiary-hover);

1349 --border-brandprimarybutton-default: var(--border-brandPrimaryButton-default);

1350 --border-brandprimarybutton-default-hover: var(--border-brandPrimaryButton-default-hover);

1351 --border-brandprimarybutton-tertiary-hover: var(--border-brandPrimaryButton-tertiary-hover);

1352 --icon-brandprimarybutton-default: var(--icon-brandPrimaryButton-default);

1353 --icon-brandprimarybutton-default-hover: var(--icon-brandPrimaryButton-default-hover);

1354

1355 /* ── Disabled Button — design.md §7 disabled state (neutral, brand-agnostic) */

1356 --surface-disabledButton-default: #4D5358; /* neutral/700 */

1357 --surface-disabledButton-tertiary: #F4F5F5; /* neutral/100 — Subdue/Ghost disabled bg */

1358 --surface-disabledButton-quinary: #FFFFFF; /* Outline disabled */

1359 --border-disabledButton-default: #636B72; /* neutral/600 */

1360 --border-disabledButton-tertiary: #E2E4E6; /* neutral/200 — Subdue Outline disabled border (design.md §7f row 3094) */

1361 --icon-disabledButton-default: #4D5358; /* neutral/700 */

1362 --icon-disabledButton-tertiary: #ADB2B7; /* neutral/400 — Subdue Disabled icon (design.md §7f row 3090/3094) */

1363 --icon-disabledButton-on-disabled: #FFFFFF;

1364 --text-disabledButton-tertiary: #ADB2B7; /* text.disabledButton.tertiary — matches icon-disabledButton-tertiary (design.md §5.2a / §7f) */

1365 --text-disabledbutton-tertiary: var(--text-disabledButton-tertiary); /* legacy lowercase alias */

1366

1367 /* Brand Primary Button drop shadow — primaryshadow/600 + /601 (Figma effect). */

1368 --shadow-brandPrimaryButton-default:

1369 0 1px 2px var(--PrimaryShadow-600),

1370 0 1px 3px var(--PrimaryShadow-601);

1371

1372 /* — Backward-compat aliases (lowercase, for legacy components) — */

1373 --surface-brandprimary-default: var(--surface-brandPrimary-default);

1374 --surface-brandprimary-secondary: var(--brand-p600);

1375 --surface-brandprimary-tertiary: var(--surface-brandPrimary-tertiary);

1376 --surface-brandprimary-quaternary: var(--surface-brandPrimary-quaternary);

1377 --surface-brandprimary-quinary: var(--brand-p100);

1378 --background-screen-brand-100: var(--brand-p50);

1379

1380 /* — Popup quick-options sidebar — Figma MIH DS Popup node 74:7041

1381 Both surface + border are brand-aware (resolved via brand primitives)

1382 so the panel retints automatically across brand/mode switches. */

1383 --surface-popup-quickoptions: var(--background-screen-brand-100);

1384 --border-popup-quickoptions: var(--border-brandPrimary-quaternary);

1385

1386 /* — Popup quick-options list item · hover — Figma MIH DS Popup

1387 node 111:5394 specifies a stronger hover than the generic list hover:

1388 surface/brandPrimary/quaternary-hover = brand-p100 (#E2F3EB)

1389 text/list/hover = brand-p700 (#007549)

1390 Aliased separately from --surface-list-hover (= brand-p50) so other

1391 list components keep their existing softer hover. Mode-independent

1392 because both resolve through brand primitives. */

1393 --surface-brandPrimary-quaternary-hover: var(--brand-p100);

1394 --surface-popup-listitem-hover: var(--surface-brandPrimary-quaternary-hover);

1395 --text-popup-listitem-hover: var(--text-list-hover);

1396 --text-brandprimarybutton-default: var(--text-brandPrimary-default);

1397 --text-brandprimarybutton-secondary: var(--text-brandPrimary-secondary);

1398 --text-brandprimarybutton-on-brand: var(--text-brandPrimary-on-brand);

1399 --border-brandprimary-default: var(--border-brandPrimary-default);

1400 --border-brandprimary-tertiary: var(--border-brandPrimary-tertiary);

1401 --border-brandprimary-quaternary: var(--border-brandPrimary-quaternary);

1402 --icon-brandprimary-quaternary: var(--icon-brandPrimary-quaternary);

1403 --icon-brandprimary-secondary: var(--icon-brandPrimary-secondary);

1404}

1405

1406/* ── Vibe-code sync (26 ต.ค. 69) ───────────────────────────────

1407 Tokens the bma.health code already uses whose light value was missing

1408 (dark-only, or never defined) — so light mode rendered each call site's

1409 fallback. Values = the fallback the code renders (most common one), so

1410 the screen does not change. Documented in design.md §4.7.

1411 Must stay above the [data-mode="dark"] blocks (same specificity). */

1412:root {

1413 /* dim */

1414 --dim-blur-100: 4px;

1415 --dim-radius-0: 0px;

1416 --dim-size-50: 4px;

1417 --dim-space-1000: 40px;

1418 --dim-space-250: 10px;

1419 --dim-space-50: 2px;

1420 --dim-space-700: 28px;

1421 --dim-space-900: 36px;

1422 /* type */

1423 --type-family-button: var(--type-family-heading-content);

1424 --type-family-heading: var(--type-family-heading-content);

1425 --type-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

1426 --type-lineheight-relaxed: 1.7;

1427 /* background */

1428 --background-neutral-tertiary: #F4F5F5;

1429 --background-screen-default: #FFFFFF;

1430 /* surface */

1431 --surface-actionlist-default: #FFFFFF;

1432 --surface-alert-error-default: #DC2626;

1433 --surface-alert-warning-default: #EA580C;

1434 --surface-avatar-fallback: #9AA1A8;

1435 --surface-brandTag-default: #FFFFFF;

1436 --surface-card-brand-100: var(--brand-p50);

1437 --surface-card-default: #FFFFFF;

1438 --surface-card-quaternary: #F9FBFB;

1439 --surface-content-default: #FFFFFF;

1440 --surface-content-secondary: #F5F6F7;

1441 --surface-danger-default: #DC2626;

1442 --surface-destructive-default: #D42F2F;

1443 --surface-indicator-indigo: #6366F1;

1444 --surface-info-default: #3B82F6;

1445 --surface-negative-primary: #D04949;

1446 --surface-neutral-default: #FFFFFF;

1447 --surface-neutral-primary: #FFFFFF;

1448 --surface-neutral-secondary: #1B2227;

1449 --surface-neutralbutton-default: #FFFFFF;

1450 --surface-page-default: #FFFFFF;

1451 --surface-positive-primary: #08A768;

1452 --surface-positive-quaternary: var(--surface-brandPrimary-quaternary);

1453 --surface-positive-secondary: #A2EDDE;

1454 --surface-progress-quaternary: #FBFAF4;

1455 --surface-sidesubmenu-hover: var(--brand-p100);

1456 --surface-sidesubmenu-selected: var(--brand-p100);

1457 --surface-slider-indigo-bar: #EEF2FF;

1458 --surface-slider-indigo-pill: #818CF8;

1459 --surface-slider-lavender-bar: #EDE7FF;

1460 --surface-slider-lavender-pill: #C8B6FF;

1461 --surface-slider-sakura-bar: #FFEDF3;

1462 --surface-slider-sakura-pill: #F5AFCA;

1463 --surface-success-default: #1F9D55;

1464 --surface-switch-knob-disabled: #FFFFFF;

1465 --surface-switch-unchecked-default: #E2E4E6;

1466 --surface-switch-unchecked-disabled: #F4F5F5;

1467 --surface-switch-unchecked-hover: #C9CDD0;

1468 --surface-timeslot-box: #FAFCFA;

1469 --surface-timeslot-default: #FFFFFF;

1470 --surface-timeslot-disabled: #FAFCFA;

1471 --surface-warning-default: #EAB308;

1472 --surface-warning-quaternary: #FFF9F0;

1473 --surface-warning-secondary: #FDF1E0;

1474 --surface-warning-tertiary: #FEF3C7;

1475 /* border */

1476 --border-brandPrimary-secondary: var(--brand-p600);

1477 --border-brandsecondary-quaternary: #EFF5EF;

1478 --border-brandSecondary-quaternary: var(--border-brandsecondary-quaternary);

1479 --border-brandTag-default: #E2E4E6;

1480 --border-card-brand-100: var(--brand-p200);

1481 --border-content-quaternary: var(--border-neutral-quaternary);

1482 --border-content-tertiary: #E1E3E5;

1483 --border-danger-default: #E58585;

1484 --border-danger-quaternary: #F7D9D9;

1485 --border-danger-subdued: #F5C2C2;

1486 --border-danger-tertiary: #F6C9C9;

1487 --border-info-quaternary: #DBEAFE;

1488 --border-info-tertiary: #BFDBFE;

1489 --border-modal-cardborder: #F5F6FA;

1490 --border-negative-primary: #E7A0A0;

1491 --border-neutral-secondary: #C8CDD1;

1492 --border-slider-indigo: #818CF8;

1493 --border-slider-lavender: #C8B6FF;

1494 --border-slider-sakura: #F5AFCA;

1495 --border-statusbadge-error: #B91C1C;

1496 --border-statusbadge-warning: #FDBA74;

1497 --border-success-default: #1F9D55;

1498 --border-success-subdued: #BFE5CC;

1499 --border-warning-default: #FDBA74;

1500 --border-warning-primary: #F0C589;

1501 --border-warning-subdued: #F6DFA8;

1502 /* text */

1503 --text-brandprimary-default: var(--brand-p700);

1504 --text-brandPrimaryButton-onBrand: #FFFFFF;

1505 --text-brandTag-default: #4D5358;

1506 --text-content-primary: var(--text-content-default);

1507 --text-input-placeholder: #ADB2B7;

1508 --text-negative-primary: #B91C1C;

1509 --text-neutral-disabled: #CBD5E1;

1510 --text-neutral-on-neutral: #FFFFFF;

1511 --text-positive-on-positive: #FFFFFF;

1512 --text-positive-secondary: #1B867D;

1513 --text-sidesubmenu-default: var(--brand-p700);

1514 --text-sidesubmenu-disabled: #C9CDD0;

1515 --text-sidesubmenu-selected: var(--brand-p700);

1516 --text-timeslot-default: #4D5358;

1517 --text-tooltip-default: #F9FBFB;

1518 --text-topic-primary-disabled: #ADB2B7;

1519 --text-topic-primary-subtext-disabled: #C9CDD0;

1520 /* icon */

1521 --icon-alert-warning: #D97706;

1522 --icon-content-secondary: var(--text-content-secondary);

1523 --icon-content-tertiary: #7A7F83;

1524 --icon-danger-default: #DC2626;

1525 --icon-disablediconButton-default: #4D5358;

1526 --icon-info-default: #1D4ED8;

1527 --icon-info-tertiary: #60A5FA;

1528 --icon-negative-primary: #D04949;

1529 --icon-neutral-quaternary: #C6CBD0;

1530 --icon-positive-default: #196C65;

1531 --icon-positive-tertiary: #3EC3B2;

1532 --icon-statusbadge-warning: #B25E09;

1533 --icon-success-default: #1B8A4C;

1534 --icon-topic-primary-disabled: #C9CDD0;

1535 --icon-warning-default: #F59E0B;

1536 --icon-warning-tertiary: #EA580C;

1537}

1538

1539/* ─────────────────────────────────────────────────────────────

1540 Dark-mode token overrides (Figma Variables panel — dark column).

1541 Triggered by either the OS-level preference or an explicit

1542 `data-theme="dark"` attribute on `<html>` so consumers can pin the

1543 theme manually when needed. Today only the aiSearch tokens publish

1544 dark-mode values; broader dark-mode coverage will follow as more

1545 Figma variables ship.

1546 ───────────────────────────────────────────────────────────── */

1547:root[data-theme="dark"],

1548:root[data-theme="dark"] [data-brand] {

1549 --border-aiSearch-default: var(--color-indigo-500); /* same alias as light — no swap */

1550 --border-aiSearch-hover: var(--color-indigo-300);

1551 --border-aiSearch-typing: var(--color-indigo-300);

1552 --border-aiSearch-filled: var(--color-indigo-400);

1553 --icon-aiSearch-default: var(--color-indigo-400);

1554 --icon-aiSearch-hover: var(--color-indigo-300);

1555 --icon-aiSearch-typing: var(--color-indigo-300);

1556 --icon-aiSearch-filled: var(--color-indigo-400);

1557}

1558

1559@media (prefers-color-scheme: dark) {

1560 :root:not([data-theme="light"]) {

1561 --border-aiSearch-default: var(--color-indigo-500); /* same alias as light — no swap */

1562 --border-aiSearch-hover: var(--color-indigo-300);

1563 --border-aiSearch-typing: var(--color-indigo-300);

1564 --border-aiSearch-filled: var(--color-indigo-400);

1565 --icon-aiSearch-default: var(--color-indigo-400);

1566 --icon-aiSearch-hover: var(--color-indigo-300);

1567 --icon-aiSearch-typing: var(--color-indigo-300);

1568 --icon-aiSearch-filled: var(--color-indigo-400);

1569

1570 /* Timeslot Selected — dark mode swaps the brand-p600 alias for

1571 brand-p400 so the outline + label stay visible against a deeper

1572 surface backdrop. Border tracks the text colour for consistency. */

1573 --text-timeslot-selected: var(--brand-p400);

1574 --border-timeslot-selected: var(--brand-p400);

1575 }

1576}

1577

1578/* ───────────────────────────────────────────────────────────────

1579 Dark mode — active when Settings → Mode = Dark (or System resolves

1580 to dark). <html data-mode="dark"> is set by SidebarProfileMenu.

1581 Overrides the neutral surface / text / border / icon families with

1582 a cool-dark ramp and remaps brand tints to deep-green via the

1583 active brand's --brand-p* scale, so every [data-brand] theme stays

1584 on-brand in dark. Appended last so it wins the token cascade.

1585 ─────────────────────────────────────────────────────────────── */

1586

1587/* ───────────────────────────────────────────────────────────────

1588 Dark mode — แรมป์สีเทาที่ทุก override ด้านล่างอ้างถึง

1589 ───────────────────────────────────────────────────────────────

1590 ⚠️ ต้องนิยามใน `[data-mode="dark"]` เท่านั้น — เคยมีบั๊กที่ตัวแปรชุดนี้

1591 ถูกนิยามไว้ใต้ `[data-mobile-theme="dark"]` อย่างเดียว (สโคปกรอบมือถือ)

1592 ทำให้ override ที่อ้าง var(--d-*) กว่า 140 จุดคำนวณค่าไม่ได้ แล้ว

1593 fallback กลับไปใช้ค่าสว่าง → เปิด dark mode แล้วสีไม่เปลี่ยนเลยทั้งเว็บ

1594

1595 ค่าทั้งหมดคือ step ของ palette `neutral` ใน design.md §1a

1596 ─────────────────────────────────────────────────────────────── */

1597

1598[data-mode="dark"] {

1599 --d-bg: #111314; /* neutral/950 — พื้นจอ */

1600 --d-surface-1: #222629; /* neutral/900 — การ์ด / แถบนำทาง */

1601 --d-surface-2: #363B3F; /* neutral/800 — ช่องกรอก / modal */

1602 --d-surface-3: #4D5358; /* neutral/700 — พื้นที่ยกระดับ / active */

1603 --d-hover: #363B3F; /* neutral/800 — hover ของแถว/รายการ */

1604 --d-border-1: #363B3F; /* neutral/800 — เส้นคั่นบาง / gridline */

1605 --d-border-2: #4D5358; /* neutral/700 — ขอบช่องกรอก */

1606 --d-text-1: #F4F5F5; /* neutral/100 — ตัวอักษรหลัก */

1607 --d-text-2: #ADB2B7; /* neutral/400 — ตัวอักษรรอง */

1608 --d-text-3: #858C92; /* neutral/500 — ตัวอักษรลำดับสาม / placeholder */

1609 --d-icon: #C9CDD0; /* neutral/300 — ไอคอนปกติ */

1610

1611 color-scheme: dark;

1612 background-color: var(--d-bg);

1613}

1614

1615/* ───────────────────────────────────────────────────────────────

1616 Dark mode — สลับ token ตาม design.md (generate 10 ส.ค. 2569)

1617 ───────────────────────────────────────────────────────────────

1618 กติกา: dark = สลับ step ของ palette กลับด้าน — 50↔950 · 100↔900 ·

1619 200↔800 · 300↔700 · 400↔600 ส่วน 500 อยู่กลางจึงคงเดิม

1620 (เช่น neutral/100 #F4F5F5 → neutral/900 #222629,

1621 red/100 #FEE2E2 → red/900 #7F1D1D, blue/200 #BFDBFE → blue/800 #1E40AF)

1622

1623 ที่มาของค่าแต่ละตัว เรียงตามลำดับความน่าเชื่อถือ:

1624 1. ตารางความหมายใน design.md ที่มีคอลัมน์ dark อยู่แล้ว (ชื่อ token ตรงกัน)

1625 2. ตารางเดียวกันแต่จับคู่จากค่า light ที่ตรงกัน

1626 3. สลับ step จาก palette ใน design.md §1a โดยตรง

1627 4. พื้นขาว/เทาโครงสร้าง (#FFFFFF, #F9FBFB, #F5F7F9) → แรมป์ --d-surface-*

1628 ไม่มีสีไหนถูกกะเอง ทุกค่ามาจาก design.md

1629

1630 ครอบเฉพาะ 5 ตระกูลสีของเว็บ: background · surface · border · text · icon

1631 ไม่แตะ --mobile-* (สโคปกรอบมือถือ ห้ามผูกกับ html data-mode),

1632 --brand-p* / --color-* (primitive) และ --d-* (แรมป์เอง)

1633

1634 ⚠️ ไฟล์นี้เป็น mirror ที่ generate จาก @mih/design-tokens —

1635 ต้องยกบล็อกนี้ขึ้น mih-design ไม่งั้น `npm run tokens:pull` ครั้งหน้าจะลบทิ้ง

1636 ─────────────────────────────────────────────────────────────── */

1637

1638[data-mode="dark"] {

1639 /* — พื้นหลัง (3) — */

1640 --background-danger-tertiary-hover: #991B1B;

1641 --background-info-tertiary-hover: #1E40AF;

1642 --background-warning-tertiary-hover: #9A3412;

1643

1644 /* — พื้นผิว (135) — */

1645 --surface-alert-error: #450A0A;

1646 --surface-alert-info: #172554;

1647 --surface-alert-success: #082B2A;

1648 --surface-alert-warning: #431407;

1649 --surface-brandPrimaryButton-quinary: var(--d-surface-1);

1650 --surface-brandtag-default: var(--d-surface-1);

1651 --surface-calendar-default: var(--d-surface-1);

1652 --surface-calendar-disabled: var(--d-surface-1);

1653 --surface-calendar-slot-cta-default: var(--d-surface-1);

1654 --surface-calendar-slot-cta-disabled: var(--d-surface-1);

1655 --surface-calendar-slot-date-default: var(--d-surface-1);

1656 --surface-calendar-slot-date-disabled: var(--d-surface-1);

1657 --surface-calendar-slot-slot-default: var(--d-surface-1);

1658 --surface-calendar-slot-slot-disabled: var(--d-surface-1);

1659 --surface-card-100: var(--d-surface-1);

1660 --surface-card-200: #363B3F;

1661 --surface-card-indigo-100: #1E1B4B;

1662 --surface-card-sakura-200: #A35C7C;

1663 --surface-colorfulBadge-blue: #1E3A8A;

1664 --surface-colorfulbadge-blue: #1E3A8A;

1665 --surface-colorfulbadge-grey: var(--d-surface-2);

1666 --surface-colorfulbadge-indigo: #3730A3;

1667 --surface-colorfulbadge-orange: #7C2D12;

1668 --surface-colorfulbadge-pink: #831843;

1669 --surface-colorfulbadge-purple: #581C87;

1670 --surface-colorfulbadge-red: #7F1D1D;

1671 --surface-colorfulbadge-teal: #194845;

1672 --surface-colorfulbadge-yellow: #713F12;

1673 --surface-danger-tertiary: #7F1D1D;

1674 --surface-dangerButton-default: #FCA5A5;

1675 --surface-dangerButton-default-hover: #FECACA;

1676 --surface-dangerButton-quaternary: #450A0A;

1677 --surface-dangerButton-quaternary-hover: #7F1D1D;

1678 --surface-dangerButton-quinary: var(--d-surface-1);

1679 --surface-dangerButton-quinary-hover: #450A0A;

1680 --surface-dangerButton-secondary: #991B1B;

1681 --surface-dangerButton-secondary-hover: #B91C1C;

1682 --surface-dangerButton-tertiary: #7F1D1D;

1683 --surface-dangerButton-tertiary-hover: #991B1B;

1684 --surface-disabled-secondary-hover: #4D5358;

1685 --surface-disabledButton-default: #C9CDD0;

1686 --surface-disabledButton-quinary: var(--d-surface-1);

1687 --surface-disabledButton-tertiary: #363B3F;

1688 --surface-dropdown-default: var(--d-surface-1);

1689 --surface-formbuilder-card: var(--d-surface-1);

1690 --surface-info-tertiary: #1E3A8A;

1691 --surface-input-default: var(--d-surface-1);

1692 --surface-input-disabled: #363B3F;

1693 --surface-list-default: var(--d-surface-1);

1694 --surface-list-selected: var(--d-surface-1);

1695 --surface-modal-default: var(--d-surface-1);

1696 --surface-navigation-default: var(--d-surface-1);

1697 --surface-navy-quaternary: #1E1B4B;

1698 --surface-neutral-quaternary: var(--d-surface-1);

1699 --surface-neutral-tertiary: #222629;

1700 --surface-neutralButton-default: #C9CDD0;

1701 --surface-neutralButton-default-hover: #E2E4E6;

1702 --surface-neutralButton-quaternary: var(--d-surface-1);

1703 --surface-neutralButton-quaternary-hover: #222629;

1704 --surface-neutralButton-quinary: var(--d-surface-1);

1705 --surface-neutralButton-quinary-hover: var(--d-surface-1);

1706 --surface-neutralButton-secondary: #363B3F;

1707 --surface-neutralButton-secondary-hover: #4D5358;

1708 --surface-neutralButton-tertiary: #222629;

1709 --surface-neutralButton-tertiary-hover: #363B3F;

1710 --surface-neutralbutton-quaternary: var(--d-surface-1);

1711 --surface-neutralbutton-quaternary-hover: #222629;

1712 --surface-neutralbutton-quinary: var(--d-surface-1);

1713 --surface-neutralbutton-quinary-hover: var(--d-surface-1);

1714 --surface-neutralbutton-secondary: #363B3F;

1715 --surface-neutralbutton-secondary-hover: #4D5358;

1716 --surface-neutraltag-default: var(--d-surface-1);

1717 --surface-neutraltag-hover: var(--d-surface-1);

1718 --surface-neutraltag-selected: #222629;

1719 --surface-neutraltag-selected-hover: #363B3F;

1720 --surface-notification-default: #F472B6;

1721 --surface-pagination-default: var(--d-surface-1);

1722 --surface-pill-blue: #1E3A8A;

1723 --surface-pill-orange: #7C2D12;

1724 --surface-pill-purple: #581C87;

1725 --surface-pill-red: #7F1D1D;

1726 --surface-pill-teal: #194845;

1727 --surface-pill-yellow: #713F12;

1728 --surface-pink-default: #F9A8D4;

1729 --surface-pink-default-hover: #FBCFE8;

1730 --surface-pink-quaternary: #500724;

1731 --surface-positive-default: #6CDCCA;

1732 --surface-positive-tertiary: #194845;

1733 --surface-primarysearch-default: var(--d-surface-1);

1734 --surface-quickaction-blue-pressed: #1E40AF;

1735 --surface-quickaction-indigo-pressed: #4F46E5;

1736 --surface-quickaction-orange-pressed: #9A3412;

1737 --surface-quickaction-pink-pressed: #9D174D;

1738 --surface-quickaction-purple-pressed: #6B21A8;

1739 --surface-quickaction-teal-pressed: #195652;

1740 --surface-quickaction-yellow-pressed: #854D0E;

1741 --surface-scrollbar-error-bar: #7F1D1D;

1742 --surface-scrollbar-error-pill: #B91C1C;

1743 --surface-scrollbar-info-bar: #1E3A8A;

1744 --surface-scrollbar-info-pill: #1D4ED8;

1745 --surface-scrollbar-success-bar: #194845;

1746 --surface-scrollbar-success-pill: #196C65;

1747 --surface-scrollbar-warning-bar: #7C2D12;

1748 --surface-scrollbar-warning-pill: #C2410C;

1749 --surface-search-default: var(--d-surface-1);

1750 --surface-severity-high: #7F1D1D;

1751 --surface-severity-low: #713F12;

1752 --surface-severity-medium: #7C2D12;

1753 --surface-severity-mild: #194845;

1754 --surface-statusbadge-error: #7F1D1D;

1755 --surface-statusbadge-info: #1E3A8A;

1756 --surface-statusbadge-neutral: var(--d-surface-2);

1757 --surface-statusbadge-success: #194845;

1758 --surface-statusbadge-warning: #7C2D12;

1759 --surface-statussummarycard-destructive: #7F1D1D;

1760 --surface-statussummarycard-info: #1E3A8A;

1761 --surface-statussummarycard-inprogress: #7C2D12;

1762 --surface-statussummarycard-positive: #194845;

1763 --surface-steps-success-hover: #3EC3B2;

1764 --surface-switch-default: var(--d-surface-1);

1765 --surface-switch-hover: #1B867D;

1766 --surface-switch-icon: var(--d-surface-1);

1767 --surface-switch-off: #4D5358;

1768 --surface-switch-on-hover: #6CDCCA;

1769 --surface-tabcapsule-default: var(--d-surface-1);

1770 --surface-tabcapsule-disabled: var(--d-surface-1);

1771 --surface-tabcapsule-success: var(--d-surface-1);

1772 --surface-table-default: var(--d-surface-1);

1773 --surface-tabpill-default: var(--d-surface-1);

1774 --surface-topic-default: var(--d-surface-1);

1775 --surface-topic-disabled: var(--d-surface-1);

1776 --surface-triage-level1: #7F1D1D;

1777 --surface-triage-level2: #7C2D12;

1778 --surface-triage-level3: #713F12;

1779 --surface-triage-level5: #1E3A8A;

1780

1781 /* — เส้นขอบ (55) — */

1782 --border-alert-error: #7F1D1D;

1783 --border-alert-info: #1E3A8A;

1784 --border-alert-success: #194845;

1785 --border-alert-warning: #7C2D12;

1786 --border-alertdialog-default: #363B3F;

1787 --border-brandtag-default: #363B3F;

1788 --border-calendar-slot-slot-disabled: var(--d-surface-2);

1789 --border-card-default: #4D5358;

1790 --border-card-sakura-100: #D687A8;

1791 --border-colorfulbadge-brand: #004C31;

1792 --border-colorfulbadge-error: #991B1B;

1793 --border-colorfulbadge-info: #1E40AF;

1794 --border-colorfulbadge-neutral: #363B3F;

1795 --border-colorfulbadge-success: #195652;

1796 --border-colorfulbadge-warning: #854D0E;

1797 --border-colorfulbadge-warning2: #9A3412;

1798 --border-dangerButton-default: #FCA5A5;

1799 --border-dangerButton-default-hover: #FCA5A5;

1800 --border-dangerButton-quaternary: #7F1D1D;

1801 --border-dangerButton-quaternary-hover: #991B1B;

1802 --border-dangerButton-secondary: #DC2626;

1803 --border-dangerButton-tertiary: #7F1D1D;

1804 --border-disabledButton-default: #ADB2B7;

1805 --border-disabledButton-tertiary: #363B3F;

1806 --border-dropdown-default: #F4F4F4;

1807 --border-image-default: var(--d-surface-1);

1808 --border-input-default: #4D5358;

1809 --border-input-disabled: #363B3F;

1810 --border-input-error: #F87171;

1811 --border-input-filled: #363B3F;

1812 --border-modal-cardBorder: #004C31;

1813 --border-neutral-quat: #222629;

1814 --border-neutral-tertiary: #363B3F;

1815 --border-neutralButton-default: #ADB2B7;

1816 --border-neutralButton-default-hover: #E2E4E6;

1817 --border-neutralButton-quaternary: #222629;

1818 --border-neutralButton-secondary: #636B72;

1819 --border-neutralButton-tertiary: #4D5358;

1820 --border-neutralbutton-quaternary: #222629;

1821 --border-neutralbutton-tertiary: #363B3F;

1822 --border-neutralbutton-tertiary-hover: #4D5358;

1823 --border-neutraltag-default: #363B3F;

1824 --border-neutraltag-hover: #363B3F;

1825 --border-neutraltag-selected: #363B3F;

1826 --border-neutraltag-selected-hover: #363B3F;

1827 --border-popover-grey: #363B3F;

1828 --border-secondarysearch-default: #4D5358;

1829 --border-secondarysearch-filled: #4D5358;

1830 --border-statusbadge-neutral: #363B3F;

1831 --border-switch-default: #4D5358;

1832 --border-switch-disabled: #363B3F;

1833 --border-tabcapsule-default: #363B3F;

1834 --border-tabcapsule-disabled: #363B3F;

1835 --border-tabcapsule-inprogress: #363B3F;

1836 --border-tabcapsule-success: #363B3F;

1837

1838 /* — ตัวอักษร (105) — */

1839 --text-alert-error: #FCA5A5;

1840 --text-alert-info: #93C5FD;

1841 --text-alert-success: #6CDCCA;

1842 --text-alert-warning: #FDBA74;

1843 --text-alertdialog-subtext: #ADB2B7;

1844 --text-alertdialog-text: #C9CDD0;

1845 --text-brandPrimary-on-brand: #111314;

1846 --text-brandPrimaryButton-on-brand: #111314;

1847 --text-brandtag-default: #C9CDD0;

1848 --text-breadcrumb-current: #E2E4E6;

1849 --text-calendar-default: #C9CDD0;

1850 --text-calendar-disabled: #334155;

1851 --text-calendar-month: #C9CDD0;

1852 --text-calendar-selected: #111314;

1853 --text-calendar-slot-cta-disabled: #334155;

1854 --text-calendar-slot-date-current: #111314;

1855 --text-calendar-slot-date-default: #C9CDD0;

1856 --text-calendar-slot-date-disabled: #334155;

1857 --text-calendar-slot-date-selected: #111314;

1858 --text-calendar-slot-month: #C9CDD0;

1859 --text-calendar-slot-slot-disabled: #334155;

1860 --text-calendar-slot-slot-selected: #111314;

1861 --text-colorfulBadge-blue: #93C5FD;

1862 --text-colorfulbadge-badge-on: #111314;

1863 --text-colorfulbadge-blue: #93C5FD;

1864 --text-colorfulbadge-grey: #C9CDD0;

1865 --text-colorfulbadge-indigo: #C7D2FE;

1866 --text-colorfulbadge-orange: #FDBA74;

1867 --text-colorfulbadge-pink: #F9A8D4;

1868 --text-colorfulbadge-purple: #D8B4FE;

1869 --text-colorfulbadge-red: #FCA5A5;

1870 --text-colorfulbadge-teal: #6CDCCA;

1871 --text-colorfulbadge-yellow: #FDE047;

1872 --text-content-default: #E2E4E6;

1873 --text-content-on-content: #111314;

1874 --text-content-quaternary: #636B72;

1875 --text-content-secondary: #ADB2B7;

1876 --text-danger-default: #FCA5A5;

1877 --text-danger-on-default: #111314;

1878 --text-danger-secondary: #F87171;

1879 --text-dangerButton-default: #FCA5A5;

1880 --text-dangerButton-default-hover: #FECACA;

1881 --text-dangerButton-on-danger: #111314;

1882 --text-disabled-secondary: #ADB2B7;

1883 --text-disabled-tertiary: #636B72;

1884 --text-disabledButton-tertiary: #858C92;

1885 --text-info-default: #93C5FD;

1886 --text-info-secondary: #60A5FA;

1887 --text-info-tertiary: #2563EB;

1888 --text-input-default: #636B72;

1889 --text-input-disabled: #636B72;

1890 --text-input-error: #636B72;

1891 --text-input-filled: #C9CDD0;

1892 --text-input-helper: #636B72;

1893 --text-input-hover: #C9CDD0;

1894 --text-input-label: #C9CDD0;

1895 --text-input-require: #F87171;

1896 --text-input-typing: #C9CDD0;

1897 --text-list-default: #C9CDD0;

1898 --text-list-selected: #C9CDD0;

1899 --text-modal-text: #C9CDD0;

1900 --text-neutral-on-neutral: #111314;

1901 --text-neutral-tertiary: #636B72;

1902 --text-neutralButton-default: #C9CDD0;

1903 --text-neutralButton-default-hover: #E2E4E6;

1904 --text-neutralButton-on-neutral: #111314;

1905 --text-neutralbutton-default: #C9CDD0;

1906 --text-neutraltag-default: #C9CDD0;

1907 --text-neutraltag-hover: #C9CDD0;

1908 --text-neutraltag-selected: #C9CDD0;

1909 --text-neutraltag-selected-hover: #C9CDD0;

1910 --text-pagination-default: #E2E4E6;

1911 --text-positive-success-tick: #111314;

1912 --text-primarysearch-default: #636B72;

1913 --text-primarysearch-filled: #C9CDD0;

1914 --text-primarysearch-hover: #C9CDD0;

1915 --text-primarysearch-typing: #C9CDD0;

1916 --text-secondarysearch-default: #636B72;

1917 --text-secondarysearch-filled: #C9CDD0;

1918 --text-secondarysearch-hover: #C9CDD0;

1919 --text-secondarysearch-typing: #C9CDD0;

1920 --text-sidemenu-default: #C9CDD0;

1921 --text-sidemenu-disabled: #636B72;

1922 --text-smallalert-on-success: #111314;

1923 --text-statusbadge-error: #FCA5A5;

1924 --text-statusbadge-info: #93C5FD;

1925 --text-statusbadge-neutral: #C9CDD0;

1926 --text-statusbadge-success: #6CDCCA;

1927 --text-statusbadge-warning: #FDBA74;

1928 --text-statussummarycard-destructive-number: #FCA5A5;

1929 --text-statussummarycard-increase: #ADB2B7;

1930 --text-statussummarycard-info-number: #93C5FD;

1931 --text-statussummarycard-inprogress-number: #FDBA74;

1932 --text-statussummarycard-positive-number: #6CDCCA;

1933 --text-steps-select: #111314;

1934 --text-steps-title-success: #6CDCCA;

1935 --text-tabcapsule-default: #C9CDD0;

1936 --text-tabcapsule-disabled: #4D5358;

1937 --text-tabcapsule-inprogress: #C9CDD0;

1938 --text-tabcapsule-success: #C9CDD0;

1939 --text-tabunderline-default: #C9CDD0;

1940 --text-tabunderline-disabled: #4D5358;

1941 --text-topic-tertiary-subtext: #636B72;

1942 --text-topic-tertiary-title: #E2E4E6;

1943 --text-warning-default: #FDBA74;

1944

1945 /* — ไอคอน (34) — */

1946 --icon-brandPrimaryButton-on-brand: #111314;

1947 --icon-brandtag-tailing: #4D5358;

1948 --icon-calendar-slot-selected: #111314;

1949 --icon-dangerButton-default: #FCA5A5;

1950 --icon-dangerButton-default-hover: #FECACA;

1951 --icon-dangerButton-on-danger: #111314;

1952 --icon-disabledButton-default: #C9CDD0;

1953 --icon-disabledButton-on-disabled: #111314;

1954 --icon-disabledButton-tertiary: #636B72;

1955 --icon-input-default: #636B72;

1956 --icon-input-disabled: #636B72;

1957 --icon-input-error: #636B72;

1958 --icon-input-filled: #636B72;

1959 --icon-input-typing: #C9CDD0;

1960 --icon-neutral-default: #C9CDD0;

1961 --icon-neutral-secondary: #ADB2B7;

1962 --icon-neutral-tertiary: #636B72;

1963 --icon-neutralButton-default: #C9CDD0;

1964 --icon-neutralButton-default-hover: #E2E4E6;

1965 --icon-neutralButton-on-neutral: #111314;

1966 --icon-neutralbutton-default: #C9CDD0;

1967 --icon-neutralbutton-secondary: #ADB2B7;

1968 --icon-neutraltag-default: #C9CDD0;

1969 --icon-neutraltag-hover: #C9CDD0;

1970 --icon-neutraltag-selected: #C9CDD0;

1971 --icon-neutraltag-selected-hover: #C9CDD0;

1972 --icon-neutraltag-tailing: #4D5358;

1973 --icon-step-success-on: #111314;

1974 --icon-steps-success-on: #111314;

1975 --icon-switch-checkbox-tick: #111314;

1976 --icon-tabcapsule-default: #C9CDD0;

1977 --icon-tabcapsule-disabled: #4D5358;

1978 --icon-tabunderline-default: #C9CDD0;

1979 --icon-tabunderline-disabled: #4D5358;

1980 /* ── token ที่ "ใช้ในโค้ดแต่ไม่เคยนิยามใน :root" ─────────────────

1981 component เรียก var(--x, #FALLBACK) โดยที่ --x ไม่มีอยู่จริง ค่าจึงตก

1982 ไปที่ fallback สว่างเสมอ ไม่ว่าจะโหมดไหน — ต้องนิยามในบล็อก dark เอง

1983 ค่ามาจากการสลับ step ของ fallback ตาม palette design.md

1984 (--text-pill-* ไม่มี fallback ในโค้ด จึงจับคู่กับ --surface-pill-*

1985 ของสีเดียวกันแล้วเลือกขั้นสว่าง เพื่อให้อ่านออกบนพื้นเข้ม) */

1986

1987 /* — พื้นหลัง (2) — */

1988 --background-neutral-tertiary: #222629;

1989 --background-screen-default: var(--d-surface-1);

1990

1991 /* — เส้นขอบ (8) — */

1992 --border-brandPrimary-secondary: #08A768;

1993 --border-brandTag-default: #363B3F;

1994 --border-card-brand-100: #004C31;

1995 --border-info-quaternary: #1E3A8A;

1996 --border-info-tertiary: #1E40AF;

1997 --border-modal-cardborder: var(--d-surface-2);

1998 --border-statusbadge-error: #FCA5A5;

1999 --border-statusbadge-warning: #FDBA74;

2000

2001 /* — ไอคอน (8) — */

2002 --icon-content-secondary: #ADB2B7;

2003 --icon-disablediconButton-default: #C9CDD0;

2004 --icon-info-default: #93C5FD;

2005 --icon-info-tertiary: #2563EB;

2006 --icon-positive-default: #6CDCCA;

2007 --icon-positive-tertiary: #1B867D;

2008 --icon-topic-primary-disabled: #4D5358;

2009 --icon-warning-tertiary: #EA580C;

2010

2011 /* — พื้นผิว (23) — */

2012 --surface-actionlist-default: var(--d-surface-1);

2013 --surface-brandTag-default: var(--d-surface-1);

2014 --surface-card-quaternary: var(--d-surface-1);

2015 --surface-danger-default: #F87171;

2016 --surface-indicator-indigo: #A5B4FC;

2017 --surface-neutral-default: var(--d-surface-1);

2018 --surface-neutral-primary: var(--d-surface-1);

2019 --surface-page-default: var(--d-surface-1);

2020 --surface-positive-primary: #6AD6A5;

2021 --surface-positive-quaternary: #082B2A;

2022 --surface-positive-secondary: #195652;

2023 --surface-progress-quaternary: #422006;

2024 --surface-slider-indigo-bar: #3730A3;

2025 --surface-slider-lavender-bar: #4E3490;

2026 --surface-slider-sakura-bar: #A35C7C;

2027 --surface-switch-knob-disabled: var(--d-surface-1);

2028 --surface-switch-unchecked-default: #363B3F;

2029 --surface-switch-unchecked-disabled: #222629;

2030 --surface-switch-unchecked-hover: #4D5358;

2031 --surface-timeslot-box: #102310;

2032 --surface-timeslot-default: var(--d-surface-1);

2033 --surface-timeslot-disabled: #102310;

2034 --surface-warning-quaternary: #431407;

2035

2036 /* — ตัวอักษร (19) — */

2037 --text-brandPrimaryButton-onBrand: #111314;

2038 --text-brandTag-default: #C9CDD0;

2039 --text-brandprimary-default: #91DFBB;

2040 --text-input-placeholder: #636B72;

2041 --text-negative-primary: #FCA5A5;

2042 --text-neutral-disabled: #334155;

2043 --text-pill-blue: #BFDBFE;

2044 --text-pill-orange: #FED7AA;

2045 --text-pill-purple: #E9D5FF;

2046 --text-pill-red: #FECACA;

2047 --text-pill-teal: #A2EDDE;

2048 --text-pill-yellow: #FEF08A;

2049 --text-positive-on-positive: #111314;

2050 --text-positive-secondary: #3EC3B2;

2051 --text-statussummarycard-lavender-number: #D0BEFF;

2052 --text-timeslot-default: #C9CDD0;

2053 --text-tooltip-default: #111314;

2054 --text-topic-primary-disabled: #636B72;

2055 --text-topic-primary-subtext-disabled: #4D5358;

2056

2057 /* ── token ที่ alias ไปที่ --brand-p* (สแกนจากค่า hex ไม่เจอ) ──

2058 tint p50/p100 → p900/p950 · เส้น selected p200 → p600 ·

2059 ตัวอักษร/ไอคอน p600-p800 → p400 ตามตารางของ skill light-to-dark-mode */

2060 /* — พื้นผิวโทนแบรนด์ — */

2061 --surface-brandPrimary-quaternary: var(--brand-p900);

2062 --surface-brandPrimary-quaternary-hover: var(--brand-p950);

2063 --surface-brandPrimary-tertiary: var(--brand-p950);

2064 --surface-brandPrimaryButton-quaternary: var(--brand-p900);

2065 --surface-brandPrimaryButton-quaternary-hover: var(--brand-p950);

2066 --surface-brandPrimaryButton-quinary-hover: var(--brand-p900);

2067 --surface-brandPrimaryButton-tertiary: var(--brand-p950);

2068 --surface-brandprimary-quinary: var(--brand-p950);

2069 --surface-calendar-current: var(--brand-p950);

2070 --surface-calendar-slot-cta-hover: var(--brand-p900);

2071 --surface-calendar-slot-date-hover: var(--brand-p950);

2072 --surface-calendar-slot-slot-hover: var(--brand-p900);

2073 --surface-card-brand100: var(--brand-p900);

2074 --surface-colorfulbadge-green: var(--brand-p950);

2075 --surface-formbuilder-default: var(--brand-p900);

2076 --surface-formbuilder-hover: var(--brand-p900);

2077 --surface-sidemenu-active: var(--brand-p900);

2078 --surface-sidemenu-hover: var(--brand-p900);

2079 --surface-statussummarycard-brand: var(--brand-p950);

2080 --surface-steps-default: var(--brand-p950);

2081 --surface-table-footer: var(--brand-p950);

2082 --surface-table-header: var(--brand-p900);

2083 --surface-table-hover: var(--brand-p900);

2084 --surface-table-selected: var(--brand-p900);

2085 --surface-table-selected-hover: var(--brand-p950);

2086 --surface-tabunderline-hover: var(--brand-p900);

2087

2088 /* — ตัวอักษรโทนแบรนด์ — */

2089 --text-brandPrimary-default: var(--brand-p400);

2090 --text-brandPrimary-secondary: var(--brand-p400);

2091 --text-brandPrimaryButton-default: var(--brand-p400);

2092 --text-calendar-current: var(--brand-p400);

2093 --text-calendar-slot-cta-default: var(--brand-p400);

2094 --text-calendar-slot-cta-hover: var(--brand-p400);

2095 --text-calendar-slot-date-hover: var(--brand-p400);

2096 --text-calendar-slot-slot-hover: var(--brand-p400);

2097 --text-calendar-slot-text: var(--brand-p400);

2098 --text-colorfulbadge-green: var(--brand-p400);

2099 --text-formbuilder-text: var(--brand-p400);

2100 --text-navigation-title: var(--brand-p400);

2101 --text-sidemenu-hover: var(--brand-p400);

2102 --text-sidemenu-selected: var(--brand-p400);

2103 --text-statussummarycard-brand-number: var(--brand-p400);

2104 --text-steps-default: var(--brand-p400);

2105 --text-steps-title-hover: var(--brand-p400);

2106 --text-steps-title-select: var(--brand-p400);

2107 --text-tabcapsule-hover: var(--brand-p400);

2108 --text-tabcapsule-selected: var(--brand-p400);

2109 --text-table-title: var(--brand-p400);

2110 --text-tabpill-default: var(--brand-p400);

2111 --text-tabpill-hover: var(--brand-p400);

2112 --text-tabpill-selected: var(--brand-p400);

2113 --text-tabunderline-hover: var(--brand-p400);

2114 --text-tabunderline-selected: var(--brand-p400);

2115 --text-tabunderline-selected-hover: var(--brand-p400);

2116 --text-timeslot-selected: var(--brand-p400);

2117 --text-topic-primary-title: var(--brand-p400);

2118 --text-topic-secondary-title: var(--brand-p400);

2119

2120 /* — ไอคอนโทนแบรนด์ — */

2121 --icon-alertdialog-info: var(--brand-p400);

2122 --icon-brandPrimary-default: var(--brand-p400);

2123 --icon-brandPrimary-secondary: var(--brand-p400);

2124 --icon-brandPrimaryButton-default: var(--brand-p400);

2125 --icon-brandPrimaryButton-default-hover: var(--brand-p400);

2126 --icon-brandPrimaryButton-secondary: var(--brand-p400);

2127 --icon-input-hover: var(--brand-p400);

2128 --icon-tabcapsule-hover: var(--brand-p400);

2129 --icon-tabcapsule-selected: var(--brand-p400);

2130 --icon-tabcapsule-success: var(--brand-p400);

2131 --icon-tabpill-default: var(--brand-p400);

2132 --icon-tabpill-hover: var(--brand-p400);

2133 --icon-tabpill-selected: var(--brand-p400);

2134 --icon-tabunderline-hover: var(--brand-p400);

2135 --icon-tabunderline-selected: var(--brand-p400);

2136 --icon-tabunderline-selected-hover: var(--brand-p400);

2137 --icon-topic-default: var(--brand-p400);

2138 --icon-topic-hover: var(--brand-p400);

2139 /* ── รอบเก็บตก: token ที่ยังคำนวณออกมาเป็นสีสว่างในโหมดมืด ──────────

2140 ตรวจจากค่าที่ browser คำนวณจริง (ไล่ตาม alias จนสุดสาย) ไม่ใช่สแกนไฟล์

2141 จึงจับตัวที่ alias ซ้อนหลายชั้นได้ครบ เช่น --border-dropdown-default

2142 (เส้นขอบ dropdown ที่ยังขาว) และ --background-screen-brand-100

2143 (พื้นหลังทั้งหน้าที่ยังเป็นเขียวอ่อน)

2144 โทนแบรนด์อ่อน p100/p200 → p900/p950 · เทาโครงสร้าง → แรมป์ --d-* */

2145 --background-positive-tertiary-hover: var(--brand-p900);

2146 --background-screen-brand-100: var(--d-bg);

2147 --border-dropdown-default: var(--d-border-1);

2148 --border-neutralButton-default-hover: var(--d-border-2);

2149 --surface-brandPrimary-secondary: var(--brand-p900);

2150 --surface-brandPrimaryButton-secondary: var(--brand-p900);

2151 --surface-brandPrimaryButton-tertiary-hover: var(--brand-p900);

2152 --surface-brandprimarybutton-tertiary-hover: var(--brand-p900);

2153 --surface-card-skycyan-100: #081E40;

2154 --surface-chart-area: var(--d-surface-1);

2155 --surface-dangerButton-default-hover: #991B1B;

2156 --surface-disabledButton-default: var(--d-surface-3);

2157 --surface-neutralButton-default: var(--d-surface-3);

2158 --surface-neutralButton-default-hover: var(--d-border-2);

2159 --surface-pill-green: var(--brand-p900);

2160 --surface-pink-default: #BE185D;

2161 --surface-pink-default-hover: #9D174D;

2162 --surface-popup-quickoptions: var(--brand-p950);

2163 --surface-quickaction-green-pressed: var(--brand-p900);

2164 --surface-step-default-hover: var(--brand-p900);

2165 --surface-steps-default-hover: var(--brand-p900);

2166 --surface-steps-hover: var(--brand-p900);

2167 --surface-topic-hover: var(--brand-p950);

2168}

2169

2170[data-mode="dark"] {

2171 /* ลำดับชั้นพื้นของ dropdown/list ในโหมดมืด — เดิมสลับกัน:

2172 แถว (--d-surface-2 #363B3F) สว่างกว่าตัวแผง (--d-surface-1 #222629)

2173 แล้ว hover ก็ใช้ #363B3F เท่าแถวปกติเป๊ะ → ชี้เมาส์แล้วไม่มีอะไรเปลี่ยน

2174 ที่ถูกคือ แถว = สีเดียวกับแผง · hover สว่างขึ้นหนึ่งขั้น · selected โทนแบรนด์ */

2175 --surface-list-default: var(--d-surface-1);

2176 --surface-list-selected: var(--brand-p900);

2177 --surface-list-hover: var(--d-hover);

2178 --surface-list-selected-hover: var(--brand-p800);

2179 --text-list-default: var(--d-text-1);

2180 /* แถวที่เลือกอยู่ใช้ตัวอักษรโทนแบรนด์ให้เข้าชุดกับเครื่องหมายถูก */

2181 --text-list-selected: var(--brand-p400);

2182 --text-list-hover: var(--brand-p400);

2183 --text-list-selected-hover: var(--brand-p400);

2184 --text-list-subtext: var(--d-text-3);

2185 --text-list-subtext-hover: var(--brand-p400);

2186 --icon-list-secondary-default: var(--d-icon);

2187 --icon-list-primary-selected-hover: var(--brand-p400);

2188

2189 /* token ของ dropdown/popover ที่ component เรียกแต่ไม่เคยนิยาม — ให้ตามชุด list */

2190 --surface-dropdown-hover: var(--d-hover);

2191 --surface-dropdown-selected: var(--brand-p900);

2192 --surface-popover-default: var(--d-surface-1);

2193 --border-popover-default: var(--d-border-1);

2194}

2195

2196[data-mode="dark"] {

2197 /* — Search boxes — */

2198 --surface-primarysearch-default: var(--d-surface-2);

2199 --surface-search-default: var(--d-surface-2);

2200

2201 /* — Tab pill — */

2202 --surface-tabpill-default: var(--d-surface-2);

2203 --surface-tabpill-selected: var(--d-surface-2);

2204 --surface-tabpill-disabled: var(--d-surface-1);

2205 --surface-tabpill-background: var(--brand-p900);

2206 --surface-tabpill-hover: var(--brand-p800);

2207

2208 /* — Tab capsule — */

2209 --surface-tabcapsule-default: var(--d-surface-2);

2210 --surface-tabcapsule-success: var(--d-surface-2);

2211 --surface-tabcapsule-disabled: var(--d-surface-1);

2212 --surface-tabcapsule-hover: var(--brand-p900);

2213 --surface-tabcapsule-selected: var(--brand-p900);

2214 --border-tabcapsule-default: var(--d-border-2);

2215 --border-tabcapsule-inprogress: var(--d-border-2);

2216 --border-tabcapsule-success: var(--d-border-2);

2217 --border-tabcapsule-disabled: var(--d-border-1);

2218

2219 /* — Filter tag · Brand — */

2220 --surface-brandtag-default: var(--d-surface-2);

2221 --surface-brandtag-hover: var(--d-hover);

2222 --surface-brandtag-selected: var(--brand-p900);

2223 --surface-brandtag-selected-hover: var(--brand-p800);

2224 --border-brandtag-default: var(--d-border-2);

2225

2226 /* — Filter tag · Neutral — */

2227 --surface-neutraltag-default: var(--d-surface-2);

2228 --surface-neutraltag-hover: var(--d-hover);

2229 --surface-neutraltag-selected: var(--d-surface-3);

2230 --surface-neutraltag-selected-hover: var(--d-hover);

2231

2232 /* — Status badge — deep-tinted bg, lighter ink — */

2233 --surface-statusbadge-neutral: var(--d-surface-3);

2234 --surface-statusbadge-info: #14263D;

2235 --surface-statusbadge-success: #0F2E2C;

2236 --surface-statusbadge-warning: #33220F;

2237 --surface-statusbadge-error: #3A1C1C;

2238 --border-statusbadge-neutral: var(--d-border-2);

2239 --text-statusbadge-neutral: var(--d-text-2);

2240 --text-statusbadge-info: #6BA5F5;

2241 --text-statusbadge-success: #3FCE93;

2242 --text-statusbadge-warning: #F5A76B;

2243 --text-statusbadge-error: #F58B8B;

2244

2245 /* — Triage levels — deep-tinted bg, lighter ink — */

2246 --surface-triage-level1: #3A1C1C; --text-triage-level1: #F58B8B;

2247 --surface-triage-level2: #33220F; --text-triage-level2: #F5A76B;

2248 --surface-triage-level3: #2E2A0F; --text-triage-level3: #E8CF6A;

2249 --surface-triage-level4: #0F2E2C; --text-triage-level4: #5AD6C4;

2250 --surface-triage-level5: #14263D; --text-triage-level5: #6BA5F5;

2251

2252 /* — Scrollbar tracks — */

2253 --surface-scrollbar-info-bar: #14263D;

2254 --surface-scrollbar-success-bar: #0F2E2C;

2255 --surface-scrollbar-warning-bar: #33220F;

2256 --surface-scrollbar-error-bar: #3A1C1C;

2257}

2258

2259[data-mode="dark"] {

2260 --border-table-default: var(--d-border-2);

2261 --border-table-line: var(--d-border-1);

2262}

2263

2264[data-mode="dark"] {

2265 --border-neutralButton-tertiary: var(--d-border-2);

2266 --text-neutralButton-default: var(--d-text-1);

2267 --text-neutralButton-default-hover: var(--d-text-1);

2268 --text-calendar-slot-date-default: var(--d-text-1);

2269 --text-calendar-slot-month: var(--d-text-1);

2270 --border-calendar-slot-slot-disabled: var(--d-border-1);

2271 --border-card-default: var(--d-border-2);

2272 --border-input-default: var(--d-border-2);

2273 --border-neutral-quat: var(--d-border-1);

2274 --text-steps-subtitle: var(--d-text-3);

2275 --text-content-default: var(--d-text-1);

2276 --text-content-secondary: var(--d-text-2);

2277 --text-content-tertiary: var(--d-text-3);

2278 --text-content-quaternary: var(--d-text-3);

2279 --text-neutralbutton-default: var(--d-text-1);

2280 --text-breadcrumb-current: var(--d-text-1);

2281 --text-breadcrumb-pagename: var(--d-text-3);

2282 --border-input-filled: var(--d-border-2);

2283 --border-input-disabled: var(--d-border-2);

2284 --text-input-default: var(--d-text-3);

2285 --text-input-hover: var(--d-text-3);

2286 --text-input-typing: var(--d-text-1);

2287 --text-input-filled: var(--d-text-1);

2288 --text-input-disabled: var(--d-text-3);

2289 --text-input-error: var(--d-text-3);

2290 --text-input-label: var(--d-text-1);

2291 --text-input-helper: var(--d-text-3);

2292 --text-modal-text: var(--d-text-1);

2293 --text-modal-subtext: var(--d-text-3);

2294 --border-neutral-tertiary: var(--d-border-2);

2295 --text-list-default: var(--d-text-1);

2296 /* ให้ตรงกับบล็อก list ด้านบน (บล็อกนี้อยู่ท้ายไฟล์จึงชนะ cascade) */

2297 --text-list-selected: var(--brand-p400);

2298 --text-list-subtext: var(--d-text-3);

2299 --text-statussummarycard-subtext: var(--d-text-3);

2300 --text-statussummarycard-increase: var(--d-text-2);

2301 --text-tabunderline-default: var(--d-text-1);

2302 --border-tabcapsule-default: var(--d-border-2);

2303 --border-tabcapsule-inprogress: var(--d-border-2);

2304 --border-tabcapsule-success: var(--d-border-2);

2305 --border-tabcapsule-disabled: var(--d-border-2);

2306 --text-tabcapsule-default: var(--d-text-1);

2307 --text-tabcapsule-inprogress: var(--d-text-1);

2308 --text-tabcapsule-success: var(--d-text-1);

2309 --text-brandtag-default: var(--d-text-1);

2310 --text-brandtag-title: var(--d-text-3);

2311 --border-brandtag-default: var(--d-border-2);

2312 --border-neutraltag-default: var(--d-border-2);

2313 --border-neutraltag-hover: var(--d-border-2);

2314 --border-neutraltag-selected: var(--d-border-2);

2315 --border-neutraltag-selected-hover: var(--d-border-2);

2316 --text-neutraltag-default: var(--d-text-1);

2317 --text-neutraltag-hover: var(--d-text-1);

2318 --text-neutraltag-selected: var(--d-text-1);

2319 --text-neutraltag-selected-hover: var(--d-text-1);

2320 --text-pagination-default: var(--d-text-1);

2321 --text-neutral-tertiary: var(--d-text-3);

2322 --border-switch-default: var(--d-border-2);

2323 --border-switch-disabled: var(--d-border-2);

2324 --text-formbuilder-subtext: var(--d-text-3);

2325 --text-statusbadge-neutral: var(--d-text-1);

2326 --border-statusbadge-neutral: var(--d-border-2);

2327 --text-alertdialog-text: var(--d-text-1);

2328 --text-alertdialog-subtext: var(--d-text-2);

2329 --text-primarysearch-default: var(--d-text-3);

2330 --text-primarysearch-focus: var(--d-text-3);

2331 --text-primarysearch-hover: var(--d-text-1);

2332 --text-primarysearch-typing: var(--d-text-1);

2333 --text-primarysearch-filled: var(--d-text-1);

2334 --icon-primarysearch-default: var(--brand-p400);

2335 --icon-primarysearch-hover: var(--brand-p300);

2336 --icon-primarysearch-focus: var(--brand-p400);

2337 --icon-primarysearch-typing: var(--brand-p300);

2338 --icon-primarysearch-filled: var(--brand-p400);

2339 --border-secondarysearch-default: var(--d-border-2);

2340 --border-secondarysearch-filled: var(--d-border-2);

2341 --text-secondarysearch-default: var(--d-text-3);

2342 --text-secondarysearch-hover: var(--d-text-1);

2343 --text-secondarysearch-typing: var(--d-text-1);

2344 --text-secondarysearch-filled: var(--d-text-1);

2345 --border-popover-grey: var(--d-border-2);

2346 --border-neutralbutton-tertiary: var(--d-border-2);

2347 --border-neutralbutton-tertiary-hover: var(--d-border-2);

2348 --border-neutralbutton-quaternary: var(--d-border-1);

2349 --text-topic-tertiary-title: var(--d-text-1);

2350 --border-popover-grey: var(--d-border-2);

2351 --text-modal-subtext: var(--d-text-3);

2352 --text-sidemenu-default: var(--d-text-1);

2353 --text-sidemenu-disabled: var(--d-text-3);

2354 --text-sidemenu-tertiary: var(--d-text-3);

2355 --border-disabledButton-tertiary: var(--d-border-2);

2356 --text-disabledButton-tertiary: var(--d-text-3);

2357 /* Paired surface for the remapped disabled-button label. */

2358 --surface-disabledButton-tertiary: var(--d-surface-3);

2359}

2360

2361[data-mode="dark"] {

2362 /* SideSubMenu flyout (collapsed-sidebar sub items) */

2363 --surface-card-brand-100: var(--d-surface-1); /* panel shell bg */

2364 --surface-sidesubmenu-hover: var(--d-hover);

2365 --surface-sidesubmenu-selected: var(--brand-p900);

2366 --text-sidesubmenu-default: var(--brand-p400);

2367 --text-sidesubmenu-selected: var(--brand-p400);

2368 --text-sidesubmenu-disabled: var(--d-text-3);

2369

2370 /* QueueSubMenu (queue side panel) */

2371 --surface-card-default: var(--d-surface-1);

2372 --surface-neutralbutton-default: var(--d-surface-3);

2373 --border-brandsecondary-quaternary: var(--d-border-1);

2374}

2375

2376[data-mode="dark"] {

2377 --border-brandPrimary-quaternary: var(--d-border-2);

2378 --border-brandPrimary-tertiary: var(--brand-p600);

2379 --border-brandPrimaryButton-quaternary-hover: var(--brand-p600);

2380 --border-brandPrimaryButton-quaternary: var(--d-border-2);

2381 --border-brandPrimaryButton-tertiary: var(--brand-p600);

2382 --border-brandprimarybutton-tertiary: var(--brand-p600);

2383 --border-brandtag-hover: var(--brand-p600);

2384 --border-brandtag-selected-hover: var(--brand-p600);

2385 --border-brandtag-selected: var(--brand-p600);

2386 --border-calendar-slot-slot-default: var(--d-border-2);

2387 --border-calendar-slot-slot-hover: var(--brand-p600);

2388 --border-formbuilder-default: var(--brand-p600);

2389 --border-formbuilder-filled: var(--d-border-2);

2390 --border-steps-default: var(--brand-p600);

2391 --border-tabcapsule-hover: var(--brand-p600);

2392 --border-tabcapsule-selected: var(--brand-p600);

2393 --border-table-default: var(--d-border-2);

2394 --border-table-line: var(--d-border-1);

2395}

2396

2397[data-mode="dark"] {

2398 --ink-line: var(--d-border-1); /* chart gridlines */

2399 --ink-neutral: var(--d-surface-3); /* gauge / donut unfilled track */

2400 --ink-secondary: var(--d-text-2);

2401 --ink-tertiary: var(--d-text-3);

2402 --ink: var(--d-text-1);

2403}

2404

2405[data-mode="dark"] {

2406 /* Brand tag chip (FilterDropdown variant='brand') */

2407 --surface-brandtag-selected: var(--d-surface-3);

2408 --surface-brandtag-selected-hover: var(--d-hover);

2409 --text-brandtag-hover: var(--brand-p400);

2410 --text-brandtag-selected: var(--brand-p400);

2411 --text-brandtag-selected-hover: var(--brand-p400);

2412 --icon-brandtag-default: var(--brand-p400);

2413 --icon-brandtag-hover: var(--brand-p400);

2414 --icon-brandtag-selected: var(--brand-p400);

2415 --icon-brandtag-selected-hover: var(--brand-p400);

2416 --icon-brandtag-tailing: var(--d-text-3);

2417

2418 /* Pagination page buttons */

2419 --surface-pagination-default: var(--d-surface-2);

2420 --surface-pagination-hover: var(--d-hover);

2421 --surface-pagination-selected: var(--brand-p900);

2422 --text-pagination-hover: var(--brand-p400);

2423 --text-pagination-selected: var(--brand-p400);

2424}

2425

2426[data-mode="dark"] {

2427 --border-brandPrimary-quaternary: var(--d-border-1);

2428}

2429

2430[data-mode="dark"] {

2431 --text-brand-name: var(--d-text-1);

2432 --text-brand-sub: var(--d-text-2);

2433

2434 --text-danger-default: #F87171; /* design.md red/400 */

2435 --text-danger-secondary: #FCA5A5; /* red/300 */

2436 --text-dangerButton-default: #F87171; /* red/400 */

2437 --text-dangerButton-default-hover: #FCA5A5; /* red/300 */

2438 --text-input-require: #F87171; /* red/400 — the * marker */

2439 --text-warning-default: #FDBA74; /* orange/300 */

2440 --text-info-default: #93C5FD; /* blue/300 */

2441 --text-info-emphasis: #BFDBFE; /* blue/200 */

2442 --text-info-secondary: #60A5FA; /* blue/400 */

2443 --text-info-tertiary: #2563EB; /* blue/600 */

2444 --text-steps-title-success: #6CDCCA; /* teal/300 */

2445}

2446