:root,
[data-theme="light"] {
  --surface:                #ffffff;
  --raised:                 #ffffff;
  --muted:                  #e7ebf3;
  --sunken:                 #f2f4fa;
  --contrast:               #2d333f;
  --inverse:                #1a202d;
  --title:                  #1a202d;
  --strong:                 #2e3441;
  --body:                   #444a57;
  --dim:                    #575d69;
  --faint:                  #626874;
  --on-inverse:             #ffffff;
  --line-soft:              #eaedf2;
  --line:                   #d3d8e0;
  --line-strong:            #999fa9;
  --surface-hover:          #f1f4fa;
  --muted-hover:            #dce1ea;
  --sunken-hover:           #e7ebf1;
  --contrast-hover:         #3f4655;
  --inverse-hover:          #2f3543;
  --warn-surface:           #fff2e4;
  --warn:                   #915b00;
  --danger-surface:         #ffefee;
  --danger-hover:           #fff6f5;
  --bubble-own:             #0e47b6;
  --bubble-own-ink:         #ffffff;
  --bubble-peer:            #dadfe8;
  --bubble-peer-ink:        #1a202d;
  --link:                   #1256d8;
  --link-hover:             #033dac;
  --markdown-fill:          rgba(20, 24, 45, 0.07);
  --markdown-line:          rgba(20, 24, 45, 0.16);
  --badge-ok-surface:       #e2f6e6;
  --badge-ok:               #00773a;
  --badge-warn-surface:     #fff2e4;
  --badge-warn:             #915b00;
  --badge-info-surface:     #e8f4ff;
  --badge-info:             #005f98;
  --badge-neutral-surface:  #e7ebf3;
  --loader-ink:             #3d70d1;
  --loader-track:           #d0e0fe;
  --gradient-start:         #e2eeff;
  --gradient-mid:           #f9fbff;
  --gradient-end:           #f2eaff;
  --unread-surface:         #ebf2ff;
  --ghost:                  #b3b7c1;
  --accent-ink:             #1256d8;
  --warn-ink:               #915b00;
  --on-accent:              #ffffff;
  --on-accent-soft:         #dce9ff;
  --focus:                  #2468f0;
  --focus-strong:           #1256d8;
  --accent-active:          #0443ba;
  --danger-line:            #ffc3bd;
  --success-ink:            #00773a;
  --accent:                 #1f63ea;
  --accent-strong:          #0d51d3;
  --danger:                 #b51e26;
  --danger-strong:          #9d0618;
  --success:                #007e3f;
  --mention:                #a16500;
  --mention-hover:          #815100;
  --on-mention:             #ffffff;
  --unread:                 #1f63ea;
  --on-unread:              #ffffff;
  --selection-bg:           #c3d8ff;
  --selection-ink:          #1a202d;
  --avatar-lightness:       0.53;
  --avatar-chroma:          0.16;
  --shadow-sm:              0 1px 2px rgba(20, 24, 45, 0.06);
  --shadow:                 0 1px 3px rgba(20, 24, 45, 0.10), 0 1px 2px rgba(20, 24, 45, 0.06);
  --shadow-lg:              0 10px 18px -4px rgba(20, 24, 45, 0.10), 0 4px 8px -4px rgba(20, 24, 45, 0.07);
  --shadow-xl:              0 20px 28px -6px rgba(20, 24, 45, 0.12), 0 8px 12px -6px rgba(20, 24, 45, 0.07);
  --shadow-2xl:             0 28px 55px -14px rgba(20, 24, 45, 0.22);
  --radius:                 0.25rem;
  --radius-lg:              0.5rem;
  --radius-xl:              0.75rem;
  --radius-2xl:             1rem;
  --scrim:                  rgba(12, 14, 26, 0.45);
  --flash:                  rgba(245, 158, 11, 0.30);
  --bubble-radius:          1rem;
  --toggle-radius:          9999px;
  --toggle-track:           #acb1bc;
  --toggle-knob:            #ffffff;
  color-scheme: light;
}

[data-theme="dark"] {
  --surface:                #141922;
  --raised:                 #1d222c;
  --muted:                  #282e39;
  --sunken:                 #0c0f17;
  --contrast:               #373d4a;
  --inverse:                #dce0e6;
  --title:                  #f1f3f9;
  --strong:                 #dbdee5;
  --body:                   #bbbfc9;
  --dim:                    #a5abb6;
  --faint:                  #949aa6;
  --on-inverse:             #151922;
  --line-soft:              #262b36;
  --line:                   #323844;
  --line-strong:            #5d6574;
  --surface-hover:          #1f252f;
  --muted-hover:            #343a46;
  --sunken-hover:           #161b24;
  --contrast-hover:         #49505f;
  --inverse-hover:          #b9bec7;
  --warn-surface:           #37250e;
  --warn:                   #ffb24f;
  --danger-surface:         #3b1e1c;
  --danger-hover:           #301917;
  --bubble-own:             #0e47b6;
  --bubble-own-ink:         #ffffff;
  --bubble-peer:            #252a35;
  --bubble-peer-ink:        #f1f3f9;
  --link:                   #86b1ff;
  --link-hover:             #afcbff;
  --markdown-fill:          rgba(255, 255, 255, 0.07);
  --markdown-line:          rgba(255, 255, 255, 0.18);
  --badge-ok-surface:       #16321f;
  --badge-ok:               #5ee38b;
  --badge-warn-surface:     #37250e;
  --badge-warn:             #ffb24f;
  --badge-info-surface:     #0f2c43;
  --badge-info:             #79c2ff;
  --badge-neutral-surface:  #323844;
  --loader-ink:             #7e93b8;
  --loader-track:           #222b3d;
  --gradient-start:         #0b1421;
  --gradient-mid:           #141621;
  --gradient-end:           #181123;
  --unread-surface:         #1b273e;
  --ghost:                  #555b66;
  --accent-ink:             #86b1ff;
  --warn-ink:               #ffb24f;
  --on-accent:              #ffffff;
  --on-accent-soft:         #dce9ff;
  --focus:                  #7caaff;
  --focus-strong:           #a4c5ff;
  --accent-active:          #1256d8;
  --danger-line:            #742e2b;
  --success-ink:            #5ee38b;
  --accent:                 #2569ee;
  --accent-strong:          #296df2;
  --danger:                 #fe8b83;
  --danger-strong:          #ffb5ae;
  --success:                #007e3f;
  --mention:                #ffa829;
  --mention-hover:          #ffc480;
  --on-mention:             #321c00;
  --unread:                 #7caaff;
  --on-unread:              #0e2043;
  --selection-bg:           #1d438c;
  --selection-ink:          #f1f3f9;
  --avatar-lightness:       0.53;
  --avatar-chroma:          0.16;
  --shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow:                 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg:              0 10px 18px -4px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl:              0 20px 28px -6px rgba(0, 0, 0, 0.65), 0 8px 12px -6px rgba(0, 0, 0, 0.5);
  --shadow-2xl:             0 28px 55px -14px rgba(0, 0, 0, 0.8);
  --radius:                 0.25rem;
  --radius-lg:              0.5rem;
  --radius-xl:              0.75rem;
  --radius-2xl:             1rem;
  --scrim:                  rgba(8, 8, 16, 0.66);
  --flash:                  rgba(255, 168, 41, 0.32);
  --bubble-radius:          1rem;
  --toggle-radius:          9999px;
  --toggle-track:           #464d5b;
  --toggle-knob:            #dbdee5;
  color-scheme: dark;
}

.bubble--own {
  --link:           #83d9ff;
  --link-hover:     #bdeeff;
  --markdown-fill:  rgba(0, 0, 0, 0.26);
  --markdown-line:  rgba(255, 255, 255, 0.28);
}