/* Generated from shared/design/tokens.json. Do not edit by hand. */
:root,
[data-theme="light"],
[data-theme="giay"] {
  color-scheme: light;
  --bg: #f4efe6;
  --card: #fffdf8;
  --ink: #1c1712;
  --muted: #5c5348;
  --line: #e6dccb;
  --seal: #8c2f2a;
  --seal-ink: #fff8f2;
  --good: #146b3a;
  --poor: #8c2f2a;
  --chip: #f3e7d4;
  --link: #7a2824;
  --link-hover: #5c1c19;
  --link-visited: #5c5348;
  --surface: #f4efe6;
  --surface-container: #fffdf8;
  --on-surface: #1c1712;
  --stone: #5c5348;
  --outline: #e6dccb;
  --primary: #8c2f2a;
  --primary-deep: #8c2f2a;
  --primary-soft: #146b3a;
  --brand-dark: #8c2f2a;
  --danger: #8c2f2a;
  --success: #146b3a;
  --warning: #8c2f2a;
  --secondary: #5c5348;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}
.swatch[data-preview="giay"] {
  background: #fffdf8;
  color: #1c1712;
  border-color: #8c2f2a;
  box-shadow: inset 4px 0 0 #8c2f2a;
}
[data-theme="muc"],
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12100e;
  --card: #1c1916;
  --ink: #f6efe4;
  --muted: #d2c4b2;
  --line: #3a332c;
  --seal: #e4b15a;
  --seal-ink: #1c1408;
  --good: #8fceab;
  --poor: #f0a8a2;
  --chip: #2a241e;
  --link: #e8bc6e;
  --link-hover: #f3d39a;
  --link-visited: #d2c4b2;
  --surface: #12100e;
  --surface-container: #1c1916;
  --on-surface: #f6efe4;
  --stone: #d2c4b2;
  --outline: #3a332c;
  --primary: #e4b15a;
  --primary-deep: #e4b15a;
  --primary-soft: #8fceab;
  --brand-dark: #e4b15a;
  --danger: #f0a8a2;
  --success: #8fceab;
  --warning: #e4b15a;
  --secondary: #d2c4b2;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}
.swatch[data-preview="muc"] {
  background: #1c1916;
  color: #f6efe4;
  border-color: #e4b15a;
  box-shadow: inset 4px 0 0 #e4b15a;
}
[data-theme="son"] {
  color-scheme: light;
  --bg: #f7efe8;
  --card: #fffaf6;
  --ink: #1c1712;
  --muted: #5e463c;
  --line: #ead9cc;
  --seal: #7d241f;
  --seal-ink: #fff6f2;
  --good: #146b3a;
  --poor: #7d241f;
  --chip: #f6e0d6;
  --link: #6b1f1b;
  --link-hover: #4e1512;
  --link-visited: #5e463c;
  --surface: #f7efe8;
  --surface-container: #fffaf6;
  --on-surface: #1c1712;
  --stone: #5e463c;
  --outline: #ead9cc;
  --primary: #7d241f;
  --primary-deep: #7d241f;
  --primary-soft: #146b3a;
  --brand-dark: #7d241f;
  --danger: #7d241f;
  --success: #146b3a;
  --warning: #7d241f;
  --secondary: #5e463c;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}
.swatch[data-preview="son"] {
  background: #fffaf6;
  color: #1c1712;
  border-color: #7d241f;
  box-shadow: inset 4px 0 0 #7d241f;
}
[data-theme="tre"] {
  color-scheme: light;
  --bg: #e7f0e4;
  --card: #f7fbf5;
  --ink: #132016;
  --muted: #3c5344;
  --line: #d3e2d4;
  --seal: #1b5c38;
  --seal-ink: #f3fff6;
  --good: #146b3a;
  --poor: #8c2f2a;
  --chip: #dcead9;
  --link: #174e30;
  --link-hover: #0f3a23;
  --link-visited: #3c5344;
  --surface: #e7f0e4;
  --surface-container: #f7fbf5;
  --on-surface: #132016;
  --stone: #3c5344;
  --outline: #d3e2d4;
  --primary: #1b5c38;
  --primary-deep: #1b5c38;
  --primary-soft: #146b3a;
  --brand-dark: #1b5c38;
  --danger: #8c2f2a;
  --success: #146b3a;
  --warning: #1b5c38;
  --secondary: #3c5344;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}
.swatch[data-preview="tre"] {
  background: #f7fbf5;
  color: #132016;
  border-color: #1b5c38;
  box-shadow: inset 4px 0 0 #1b5c38;
}
[data-theme="go"] {
  color-scheme: dark;
  --bg: #1a120c;
  --card: #271c14;
  --ink: #f6efe4;
  --muted: #d9c6b0;
  --line: #3d3126;
  --seal: #e2c08a;
  --seal-ink: #1a120c;
  --good: #8fceab;
  --poor: #f0a8a2;
  --chip: #3a2c20;
  --link: #e8c892;
  --link-hover: #f3dcb4;
  --link-visited: #d9c6b0;
  --surface: #1a120c;
  --surface-container: #271c14;
  --on-surface: #f6efe4;
  --stone: #d9c6b0;
  --outline: #3d3126;
  --primary: #e2c08a;
  --primary-deep: #e2c08a;
  --primary-soft: #8fceab;
  --brand-dark: #e2c08a;
  --danger: #f0a8a2;
  --success: #8fceab;
  --warning: #e2c08a;
  --secondary: #d9c6b0;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}
.swatch[data-preview="go"] {
  background: #271c14;
  color: #f6efe4;
  border-color: #e2c08a;
  box-shadow: inset 4px 0 0 #e2c08a;
}
[data-theme="kim"] {
  color-scheme: light;
  --bg: #f2f4f7;
  --card: #fbfcfe;
  --ink: #1a1c1f;
  --muted: #4a5160;
  --line: #d9dee6;
  --seal: #3d4654;
  --seal-ink: #f7f8fa;
  --good: #146b3a;
  --poor: #8c2f2a;
  --chip: #e6ebf2;
  --link: #2f3846;
  --link-hover: #1a1c1f;
  --link-visited: #4a5160;
  --surface: #f2f4f7;
  --surface-container: #fbfcfe;
  --on-surface: #1a1c1f;
  --stone: #4a5160;
  --outline: #d9dee6;
  --primary: #3d4654;
  --primary-deep: #3d4654;
  --primary-soft: #146b3a;
  --brand-dark: #3d4654;
  --danger: #8c2f2a;
  --success: #146b3a;
  --warning: #3d4654;
  --secondary: #4a5160;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}
.swatch[data-preview="kim"] {
  background: #fbfcfe;
  color: #1a1c1f;
  border-color: #3d4654;
  box-shadow: inset 4px 0 0 #3d4654;
}
[data-theme="moc"] {
  color-scheme: light;
  --bg: #e8f2ea;
  --card: #f6fbf7;
  --ink: #122016;
  --muted: #3a5344;
  --line: #d2e3d6;
  --seal: #1a5c38;
  --seal-ink: #f4fff7;
  --good: #0f5a32;
  --poor: #8c2f2a;
  --chip: #d7eadc;
  --link: #164f30;
  --link-hover: #0e3a22;
  --link-visited: #3a5344;
  --surface: #e8f2ea;
  --surface-container: #f6fbf7;
  --on-surface: #122016;
  --stone: #3a5344;
  --outline: #d2e3d6;
  --primary: #1a5c38;
  --primary-deep: #1a5c38;
  --primary-soft: #0f5a32;
  --brand-dark: #1a5c38;
  --danger: #8c2f2a;
  --success: #0f5a32;
  --warning: #1a5c38;
  --secondary: #3a5344;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}
.swatch[data-preview="moc"] {
  background: #f6fbf7;
  color: #122016;
  border-color: #1a5c38;
  box-shadow: inset 4px 0 0 #1a5c38;
}
[data-theme="thuy"] {
  color-scheme: dark;
  --bg: #0e1a24;
  --card: #152833;
  --ink: #e8f2f7;
  --muted: #c5d5e0;
  --line: #2c4554;
  --seal: #9ec8de;
  --seal-ink: #0e1a24;
  --good: #8fceab;
  --poor: #f0a8a2;
  --chip: #1d3644;
  --link: #a8d2e6;
  --link-hover: #c5e3f2;
  --link-visited: #c5d5e0;
  --surface: #0e1a24;
  --surface-container: #152833;
  --on-surface: #e8f2f7;
  --stone: #c5d5e0;
  --outline: #2c4554;
  --primary: #9ec8de;
  --primary-deep: #9ec8de;
  --primary-soft: #8fceab;
  --brand-dark: #9ec8de;
  --danger: #f0a8a2;
  --success: #8fceab;
  --warning: #9ec8de;
  --secondary: #c5d5e0;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}
.swatch[data-preview="thuy"] {
  background: #152833;
  color: #e8f2f7;
  border-color: #9ec8de;
  box-shadow: inset 4px 0 0 #9ec8de;
}
[data-theme="hoa"] {
  color-scheme: light;
  --bg: #f8eee8;
  --card: #fff8f4;
  --ink: #1c1412;
  --muted: #5e4038;
  --line: #eddcd4;
  --seal: #8c2f2a;
  --seal-ink: #fff8f2;
  --good: #146b3a;
  --poor: #7a2420;
  --chip: #f6ddd4;
  --link: #7a2824;
  --link-hover: #5c1c19;
  --link-visited: #5e4038;
  --surface: #f8eee8;
  --surface-container: #fff8f4;
  --on-surface: #1c1412;
  --stone: #5e4038;
  --outline: #eddcd4;
  --primary: #8c2f2a;
  --primary-deep: #8c2f2a;
  --primary-soft: #146b3a;
  --brand-dark: #8c2f2a;
  --danger: #7a2420;
  --success: #146b3a;
  --warning: #8c2f2a;
  --secondary: #5e4038;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}
.swatch[data-preview="hoa"] {
  background: #fff8f4;
  color: #1c1412;
  border-color: #8c2f2a;
  box-shadow: inset 4px 0 0 #8c2f2a;
}
[data-theme="tho"] {
  color-scheme: light;
  --bg: #f6f1e6;
  --card: #fffdf8;
  --ink: #1c1712;
  --muted: #5c4a38;
  --line: #e7dcc8;
  --seal: #6d4a22;
  --seal-ink: #fff8ee;
  --good: #146b3a;
  --poor: #8c2f2a;
  --chip: #f0e4cc;
  --link: #5c3e1c;
  --link-hover: #3f2a12;
  --link-visited: #5c4a38;
  --surface: #f6f1e6;
  --surface-container: #fffdf8;
  --on-surface: #1c1712;
  --stone: #5c4a38;
  --outline: #e7dcc8;
  --primary: #6d4a22;
  --primary-deep: #6d4a22;
  --primary-soft: #146b3a;
  --brand-dark: #6d4a22;
  --danger: #8c2f2a;
  --success: #146b3a;
  --warning: #6d4a22;
  --secondary: #5c4a38;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}
.swatch[data-preview="tho"] {
  background: #fffdf8;
  color: #1c1712;
  border-color: #6d4a22;
  box-shadow: inset 4px 0 0 #6d4a22;
}