:root {
  /* design_tokens.py generate canvas=#FAF8F5 ink=#1C1715 brand=#165CC8 danger=#B53116 warn=#F5A623 ok=#186E3F */
  --canvas: #faf8f5;
  --canvas-50: #f8f6f3;
  --canvas-100: #eeecea;
  --canvas-200: #dcdad8;
  --canvas-300: #c2c1be;
  --canvas-400: #a6a4a2;
  --canvas-500: #8a8987;
  --canvas-600: #71706e;
  --canvas-700: #5a5958;
  --canvas-800: #444343;
  --canvas-900: #2f2f2e;
  --canvas-950: #1c1c1b;
  --ink: #1c1715;
  --ink-50: #f8f6f6;
  --ink-100: #eeecec;
  --ink-200: #dcdad9;
  --ink-300: #c3c0bf;
  --ink-400: #a7a4a3;
  --ink-500: #8c8887;
  --ink-600: #736f6d;
  --ink-700: #5d5857;
  --ink-800: #474241;
  --ink-900: #332e2c;
  --ink-950: #1f1a18;
  --brand: #165cc8;
  --brand-50: #f2f7ff;
  --brand-100: #e3eeff;
  --brand-200: #c6dcff;
  --brand-300: #9dc2ff;
  --brand-400: #70a4fa;
  --brand-500: #4d87e6;
  --brand-600: #2b6bd2;
  --brand-700: #0e52b8;
  --brand-800: #003c94;
  --brand-900: #002a6b;
  --brand-950: #001845;
  --brand-text: #165cc8; /* 5.83:1 trên canvas */
  --on-brand: #ffffff; /* 6.18:1 trên brand */
  --brand-strong: #165cc8; /* nền nút: chữ #ffffff đạt 6.18:1 */
  --on-brand-strong: #ffffff;
  --danger: #b53116;
  --danger-50: #fff4f1;
  --danger-100: #ffe7e1;
  --danger-200: #ffcec2;
  --danger-300: #ffa793;
  --danger-400: #ec836d;
  --danger-500: #d46149;
  --danger-600: #bd3f26;
  --danger-700: #a1250a;
  --danger-800: #7e1600;
  --danger-900: #5b0d00;
  --danger-950: #3a0500;
  --danger-text: #b53116; /* 5.8:1 trên canvas */
  --on-danger: #ffffff; /* 6.15:1 trên danger */
  --danger-strong: #b53116; /* nền nút: chữ #ffffff đạt 6.15:1 */
  --on-danger-strong: #ffffff;
  --warn: #f5a623;
  --warn-50: #fff5e9;
  --warn-100: #ffe9ce;
  --warn-200: #ffd299;
  --warn-300: #fcaf39;
  --warn-400: #dc9419;
  --warn-500: #b97a0a;
  --warn-600: #986300;
  --warn-700: #7a4f00;
  --warn-800: #5e3b00;
  --warn-900: #422900;
  --warn-950: #291800;
  --warn-text: #9e6700; /* 4.51:1 trên canvas */
  --on-warn: #000000; /* 10.36:1 trên warn */
  --warn-strong: #a36a00; /* nền nút: chữ #ffffff đạt 4.55:1 */
  --on-warn-strong: #ffffff;
  --ok: #186e3f;
  --ok-50: #e4ffeb;
  --ok-100: #d2f8dd;
  --ok-200: #bde7c9;
  --ok-300: #9ecfad;
  --ok-400: #7cb48e;
  --ok-500: #5a9970;
  --ok-600: #398154;
  --ok-700: #156a3c;
  --ok-800: #00522a;
  --ok-900: #003a1c;
  --ok-950: #00230f;
  --ok-text: #186e3f; /* 5.93:1 trên canvas */
  --on-ok: #ffffff; /* 6.29:1 trên ok */
  --ok-strong: #186e3f; /* nền nút: chữ #ffffff đạt 6.29:1 */
  --on-ok-strong: #ffffff;
}