/* Hẹn — generated from tokens.json */
:root,
[data-theme='light'] {
  --violet: #9867ff;
  --magenta: #e569ff;
  --peach: #f7a985;
  --peach-soft: #f5cab9;
  --sun: #fac275;
  --bg: #f8f7fc;
  --bg-deep: #f1eef9;
  --surface: #ffffff;
  --surface-soft: #f8f2fe;
  --surface-tint: #f1ebfd;
  --surface-raised: #ece4fd;
  --border: #ece6f7;
  --border-strong: #8f80b8;
  --ink-600: #d6d0e4;
  --text: #1b1a1f;
  --text-muted: #6b6880;
  --text-faint: #8e8aa3;
  --text-on-grad: #ffffff;
  --primary: #7040ee;
  --primary-fill: #7c4dff;
  --primary-pressed: #6a3cf0;
  --primary-soft: #efe7ff;
  --on-primary: #ffffff;
  --focus: #7c4dff;
  --on-accent: #1b1a1f;
  --success: #1acb73;
  --on-success: #0b2417;
  --danger: #e5484d;
  --warning: #f08a24;
  --coin: #f5b83d;
  --coin-edge: #d99a1c;
  --coin-soft: #fde7d0;
  --coin-text: #a3500f;
  --pro-1: #3e2f56;
  --pro-2: #241a36;
  --pro-3: #1f172e;
  --pro-ink: #120d1c;
  --pro-gold: #f7cbb6;
  --grad-hero-1: #9968ff;
  --grad-hero-2: #e569ff;
  --grad-hero-3: #f59fa8;
  --grad-hero-4: #fac275;
  --grad-top-1: #cd9bfe;
  --grad-top-2: #f1e8fd;
  --grad-text-1: #b03ac4;
  --grad-text-2: #7040ee;
  --bubble-character: #ffffff;
  --bubble-user: var(--primary-fill);
  --on-bubble-user: var(--on-primary);
  --narrative: #6b6880;
  --emo-neutral: #b3aec6;
  --emo-happy: #f5b83d;
  --emo-excited: #ff7a59;
  --emo-sad: #5b8def;
  --emo-concerned: #e5484d;
  --emo-surprised: #e569ff;
  --emo-thinking: #9867ff;
  --emo-confused: #2fb5a8;
  --success-text: #0f7a43;
  --warning-text: #a34a06;
  --danger-text: #c92a2f;
  --scrim: rgba(27, 16, 48, 0.55);
  --scrim-card: rgba(40, 16, 70, 0.88);
  --bg-veil: rgba(248, 247, 252, 0.72);
  --bg-veil-strong: rgba(248, 247, 252, 0.92);
  --bg-veil-chat: rgba(248, 247, 252, 0.84);
  --pass-1: #6a3cf0;
  --pass-2: #b03ac4;
  --shadow-1: 0 1px 2px rgba(70, 40, 140, 0.06), 0 2px 8px rgba(70, 40, 140, 0.06);
  --shadow-2: 0 8px 24px rgba(70, 40, 140, 0.1);
  --shadow-3: 0 24px 60px rgba(70, 40, 140, 0.18);
}
[data-theme='dark'] {
  --violet: #b79bff;
  --magenta: #ef8dff;
  --peach: #f7a985;
  --peach-soft: #f5cab9;
  --sun: #f2b866;
  --bg: #120c1e;
  --bg-deep: #0c0815;
  --surface: #1d152d;
  --surface-soft: #251b38;
  --surface-tint: #2e2245;
  --surface-raised: #362952;
  --border: #33284a;
  --border-strong: #6f5f99;
  --ink-600: #4a3d66;
  --text: #f4f0ff;
  --text-muted: #a9a3c0;
  --text-faint: #8a83a6;
  --text-on-grad: #ffffff;
  --primary: #c4adff;
  --primary-fill: #b79bff;
  --primary-pressed: #a586ff;
  --primary-soft: #2f2350;
  --on-primary: #160f24;
  --focus: #c4adff;
  --on-accent: #1b1a1f;
  --success: #3fd68a;
  --on-success: #0b2417;
  --danger: #ff6369;
  --warning: #ffa24d;
  --coin: #f5b83d;
  --coin-edge: #d99a1c;
  --coin-soft: #3a2a1c;
  --coin-text: #f7b48d;
  --pro-1: #3e2f56;
  --pro-2: #2a1f40;
  --pro-3: #241a36;
  --pro-ink: #000000;
  --pro-gold: #f7cbb6;
  --grad-hero-1: #4b2a96;
  --grad-hero-2: #7a2f8c;
  --grad-hero-3: #87405e;
  --grad-hero-4: #8a5a2f;
  --grad-top-1: #3a2470;
  --grad-top-2: #1d1433;
  --grad-text-1: #ef8dff;
  --grad-text-2: #c4adff;
  --bubble-character: #251b38;
  --bubble-user: var(--primary-fill);
  --on-bubble-user: var(--on-primary);
  --narrative: #a9a3c0;
  --emo-neutral: #8a83a6;
  --emo-happy: #f5b83d;
  --emo-excited: #ff7a59;
  --emo-sad: #5b8def;
  --emo-concerned: #ff6369;
  --emo-surprised: #ef8dff;
  --emo-thinking: #b79bff;
  --emo-confused: #2fb5a8;
  --success-text: #3fd68a;
  --warning-text: #ffa24d;
  --danger-text: #ff6369;
  --scrim: rgba(12, 8, 21, 0.72);
  --scrim-card: rgba(20, 10, 36, 0.9);
  --bg-veil: rgba(18, 12, 30, 0.72);
  --bg-veil-strong: rgba(18, 12, 30, 0.9);
  --bg-veil-chat: rgba(18, 12, 30, 0.84);
  --pass-1: #5a2fd6;
  --pass-2: #8a2fa0;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.5);
}
:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;
  --r-bubble: 20px;
  --r-bubble-tail: 6px;
  --font-ui: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mobile: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.display {
  font-family: var(--font-ui);
  font-size: 64px;
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.h1 {
  font-family: var(--font-ui);
  font-size: 32px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--font-ui);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}
.h3 {
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}
.body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}
.ui {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
}
.narrative {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  font-style: italic;
}
.small {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}
.caption {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
}
.overline {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.m-display {
  font-family: var(--font-mobile);
  font-size: 28px;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.m-title-l {
  font-family: var(--font-mobile);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
}
.m-title-m {
  font-family: var(--font-mobile);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}
.m-title-s {
  font-family: var(--font-mobile);
  font-size: 16px;
  line-height: 1.375;
  font-weight: 700;
}
.m-body {
  font-family: var(--font-mobile);
  font-size: 15px;
  line-height: 1.47;
  font-weight: 400;
}
.m-label {
  font-family: var(--font-mobile);
  font-size: 13px;
  line-height: 1.38;
  font-weight: 600;
}
.m-caption {
  font-family: var(--font-mobile);
  font-size: 12px;
  line-height: 1.33;
  font-weight: 400;
}
.m-narrative {
  font-family: var(--font-mobile);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  font-style: italic;
}